Как запустить @keyframes в фокусе?

@SD163 · Регистрация: 25.08.2018

Author24 — интернет-сервис помощи студентам

Привет форумчане. Всех с наступившим 2019.
Есть страница, где три картинки на разной высоте
1=400, 2=700, 3=1400(не в фокусе)
Ко всем трем применяю @keyframes с разными параметрами для каждой картинки
from / to / animation
Все работает норм, но запускается одновременно при старте.
Та которая вне фокуса (№3) нужно стартануть, когда скролл попадает в фокус Y=1200
Как добиться результата?

Инет дает только задержка по времени - не подходит.
Есть еще через скрипт

Java

<script>
$(document).scroll(function() {
  if ($(document).scrollTop() == 1200px) {
    $("#foto3").addClass("animate");
  }
});
</script>

не срабатывает, юрик версии 3.1.0 подключен

Кто нибудь подскажите что делать и где посмотреть инфу.
Заранее благодарю.

@atanov · 08.01.2019, 18:25

SD163, Вам нужно по событию scroll сравнивать положение foto3 с клиентским окном. Или проще, когда style.top+высота <клиентской области -> прицепить класс animate.

@SD163 · 09.01.2019, 02:16 **[ТС]**

atanov, большое спасибо за ответ, но к моему сожалению мои знания в js очень и очень. Скрипты могу маленько разобрать и изменить на примерах, а вот в написании пока что не могу разобрать, хотя пытаюсь иногда. Поэтому не совсем понимаю ответ.
Конечно хотелось решить эту задачу, т.к. выглядеть будет приличней, но пока что оставил - все разом запускаются -не айс.

@atanov · 09.01.2019, 09:14

SD163, давайте Ваш html и css

@SD163 · 14.01.2019, 20:20 **[ТС]**

atanov, Количество картинок поменялось и цифры другие, но суть вопроса та же - как картинку которая не в в фокусе (нижняя-последняя) стартануть только когда она чуть появляется в фокус или чуть раньше. Сейчас они все одновременно запускаются.

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
    
<body translate="no">
    <div class="content-group">
        <div id="app">
            <div class="info-container">
                <img src="img2/info-1.jpg" alt=" " id="round1">
                <img src="img2/info-2.jpg" alt=" " id="round2">
                <img src="img2/info-3.jpg" alt=" " id="round3">             
                <img src="img2/info-4.jpg" alt=" " id="round4">
                <img src="img2/info-5.jpg" alt=" " id="round5"> 
            </div>
            <div class="container">
                <div class="pagination p6">
                    <ul>
                        <a href="index.html"><li></li></a>
                        <a class="is-active" href="kovka.html"><li></li></a>
                        <a href="rezka.html"><li></li></a>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body, #app {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}
  #round1 {
    position:absolute;
    display: flex;
    margin: 300px 0 0 50px;
}
  #round2{ 
    width: 600px;
    position:absolute;
    display: flex;
    margin: 150px 0 0 600px;
}
  #round3 { 
    position:absolute;
    display: flex;
    margin: 600px 0 0 250px;
}
 #round4{
    width: 360px;
    position:absolute;
    display: flex;
    margin: 900px 50px 0 0 ;
}
  #round5 { 
    position:absolute;
    display: flex;
    margin: 1200px 0 0 800px;
}
/* АНИМАЦИЯ */
    @keyframes anim-text {
    from {margin-top:1000px;}
    to {margin-top:0px;}
    }
    #app {
    animation: anim-text 4s;
    }   
    @keyframes anim-r1 {
    from {margin-top: 1000px;}
    to {margin-top: 300px;}
    }
    #round1 {
    animation: anim-r1 1s;
    }
    @keyframes anim-r2 {
    from {margin-top: 1000px;}
    to {margin-top: 150px;}
    }
    #round2 {
    animation: anim-r2 2s;
    }
    @keyframes anim-r3 {
    from {margin-top: 1200px;}
    to {margin-top: 600px;}
    }
    #round3 {
    animation: anim-r3 5s;
    }
    @keyframes anim-r4 {
    from {margin-top: 1800px;}
    to {margin-top: 900px;}
    }
    #round4 {
    animation: anim-r4 6s;
    }
    @keyframes anim-r5 {
    from {margin-top: 1800px;}
    to {margin-top: 1200px;}
    }
    #round5 {
    animation: anim-r5 3s;
    }

@atanov · 15.01.2019, 11:41

SD163, картинок у меня нет, но вот Вам элементарный пример:

CSS

#divOne
{
    display: flex;
    width: 100%;
    height: 120%;
    background-color: grey;
}
#divTwo
{
    display: flex;
    width: 100%;
    height: 120%;
    background-color: green;
}
@keyframes anim
{
    0%
    {
        background-color: green;
    }
    100%
    {
        background-color: red;
    }
}

HTML5

<html>
<head>
    <link href="140.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id = "divOne"></div>
    <div id = "divTwo"></div>   
</body>
</html>
<script src = "140.js"></script>

Javascript

window.onscroll = function ()
{
    if(document.getElementById('divTwo').getBoundingClientRect().top < 0)
    {
        document.getElementById('divTwo').style.cssText = 'animation: anim 3s linear 1;';
    }
}

Здесь в DOM два дива. При прокрутке, если граница второго дива достигла или превысила верхнюю границу окна, то в стили второго дива добавляется "подключение" анимации, записанной в css.
Пробуйте

@SD163 · 15.01.2019, 18:53 **[ТС]**

atanov, добавил так

PHP/HTML

            <div class="info-container">
                <div id = "divOne">
                    <img src="img2/info-1.jpg" alt=" " id="round1">
                    <img src="img2/info-2.jpg" alt=" " id="round2">
                    <img src="img2/info-3.jpg" alt=" " id="round3">             
                    <img src="img2/info-4.jpg" alt=" " id="round4">
                </div>
                <div id = "divTwo">
                    <img src="img2/info-5.jpg" alt=" " id="round5">
                </div> 
            </div>
<script>
window.onscroll = function ()
{
    if(document.getElementById('divTwo').getBoundingClientRect().top < 0)
    {
        document.getElementById('divTwo').style.cssText = 'animation: anim 3s linear 1;';
    }
}
</script>

скрипт делал и перед закрытием боди и после закрытия боди - не срабатывает
добавил

CSS

    #divOne
{
    display: flex;
    width: 100%;
    height: 120%;
    background-color: grey;
}
#divTwo
{
    display: flex;
    width: 100%;
    height: 120%;
    background-color: green;
}
@keyframes anim
{
    0%
    {
        background-color: green;
    }
    100%
    {
        background-color: red;
    }
}

не работает

@Ilterego · 16.01.2019, 02:39

https://github.com/michalsnik/aos, https://github.com/matthieua/WOW

@atanov · 16.01.2019, 06:33

SD163, естественно не будет работать, мой пример для Вас, чтобы разобраться. Давайте картинки (только в архиве), попробую посмотреть, как они к Вас по размеру в окне выглядят.

@SD163 · 16.01.2019, 10:44 **[ТС]**

atanov,

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    
    <style>
    #divOne
{
    display: flex;
    width: 100%;
    height: 120%;
    background-color: grey;
}
#divTwo
{
    display: flex;
    width: 100%;
    height: 120%;
    background-color: green;
}
@keyframes anim
{
    0%
    {
        background-color: green;
    }
    100%
    {
        background-color: red;
    }
}
    
    </style>
</head>
    
<body translate="no">
    <div class="content-group">
        <div id="app">
            <div class="info-container">
                <div id = "divOne">
                    <img src="img2/info-1.jpg" alt=" " id="round1">
                    <img src="img2/info-2.jpg" alt=" " id="round2">
                    <img src="img2/info-3.jpg" alt=" " id="round3">             
                    <img src="img2/info-4.jpg" alt=" " id="round4">
                </div>
 
                <div id = "divTwo">
                    <img src="img2/info-5.jpg" alt=" " id="round5">
                </div> 
            </div>
 
        </div>
    </div>
    
    
    
    
    <script>
window.onscroll = function ()
{
    if(document.getElementById('divTwo').getBoundingClientRect().top < 0)
    {
        document.getElementById('divTwo').style.cssText = 'animation: anim 3s linear 1;';
    }
}
</script>
</body>
 
</html>

CSS

body, #app {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}
  #round1 {
    position:absolute;
    display: flex;
    margin: 300px 0 0 50px;
}
  #round2{ 
    width: 600px;
    position:absolute;
    display: flex;
    margin: 150px 0 0 600px;
}
  #round3 { 
    position:absolute;
    display: flex;
    margin: 600px 0 0 250px;
}
 #round4{
    width: 360px;
    position:absolute;
    display: flex;
    margin: 900px 50px 0 0 ;
}
  #round5 { 
    position:absolute;
    display: flex;
    margin: 1200px 0 0 800px;
}
/* АНИМАЦИЯ */
    @keyframes anim-text {
    from {margin-top:1000px;}
    to {margin-top:0px;}
    }
    #app {
    animation: anim-text 4s;
    }   
    @keyframes anim-r1 {
    from {margin-top: 1000px;}
    to {margin-top: 300px;}
    }
    #round1 {
    animation: anim-r1 1s;
    }
    @keyframes anim-r2 {
    from {margin-top: 1000px;}
    to {margin-top: 150px;}
    }
    #round2 {
    animation: anim-r2 2s;
    }
    @keyframes anim-r3 {
    from {margin-top: 1200px;}
    to {margin-top: 600px;}
    }
    #round3 {
    animation: anim-r3 5s;
    }
    @keyframes anim-r4 {
    from {margin-top: 1800px;}
    to {margin-top: 900px;}
    }
    #round4 {
    animation: anim-r4 6s;
    }
    @keyframes anim-r5 {
    from {margin-top: 1800px;}
    to {margin-top: 1200px;}
    }
    #round5 {
    animation: anim-r5 3s;
    }

img2.rar

@SD163 · 16.01.2019, 11:07 **[ТС]**

Ilterego, спасибо за ссылки, но чет не хочется много мусора, а так посмотрел https://codepen.io/michalsnik/pen/WxvNvE да что то в этом ключе

@atanov · 16.01.2019, 12:40

SD163, во примерно так. Только надо с геометрией разобраться

CSS

body, #app {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}
  #round1 {
    position:absolute;
    display: flex;
    margin: 300px 0 0 50px;
}
  #round2{ 
    width: 600px;
    position:absolute;
    display: flex;
    margin: 150px 0 0 600px;
}
  #round3 { 
    position:absolute;
    display: flex;
    margin: 600 px 0 0 250px;
}
 #round4{
    width: 360px;
    position:absolute;
    display: flex;
    margin: 900px 50px 0 0 ;
}
  #round5 { 
    position:absolute;
    display: flex;
    margin: 1200px 0 0 800px;
}
/* АНИМАЦИЯ */
    @keyframes anim-text {
    from {margin-top:1000px;}
    to {margin-top:0px;}
    }
    #app {
    animation: anim-text 4s;
    }   
    @keyframes anim-r1 {
    from {margin-top: 1000px;}
    to {margin-top: 300px;}
    }
    #round1 {
    animation: anim-r1 1s;
    }
    @keyframes anim-r2 {
    from {margin-top: 1000px;}
    to {margin-top: 150px;}
    }
    #round2 {
    animation: anim-r2 2s;
    }
    @keyframes anim-r3 {
    from {margin-top: 1200px;}
    to {margin-top: 600px;}
    }
    #round3 {
    animation: anim-r3 5s;
    }
    @keyframes anim-r4 {
    from {margin-top: 1800px;}
    to {margin-top: 900px;}
    }
    #round4 {
    animation: anim-r4 6s;
    }
    @keyframes anim-r5 {
    from {margin-top: 1800px;}
    to {margin-top: 1200px;}
    }
   /* #round5 {
    animation: anim-r5 3s;
    }*/

HTML5

<html>
<head>
    <link href="141.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <body translate="no">
    <div class="content-group">
        <div id="app">
            <div class="info-container">
                    <img src="img2/info-1.jpg" alt=" " id="round1">
                    <img src="img2/info-2.jpg" alt=" " id="round2">
                    <img src="img2/info-3.jpg" alt=" " id="round3">             
                    <img src="img2/info-4.jpg" alt=" " id="round4">          
                    <img src="img2/info-5.jpg" alt=" " id="round5">            
            </div>
        </div>
    </div>
</body>
</html>
<script src = "141.js"></script>

Javascript

document.addEventListener('DOMContentLoaded', docReady);
let round5Top;
let clientHeight;
function docReady()
{
    round5Top = Number(document.getElementById('round5').getBoundingClientRect().top);
    clientHeight = Number(document.documentElement.clientHeight);
}
window.onscroll = function ()
{
    if((clientHeight + window.pageYOffset) > round5Top)
    {
        document.getElementById('round5').style.cssText = 'animation: anim-r5 3s;';
    }
}

@SD163 · 16.01.2019, 22:43 **[ТС]**

atanov, спасибо конечно за помощь, но у меня не работает - в хроме и опере все 5 фото стартуют одновременно. Если у Вас 5я стартует после попадания в фокус - в чем может быть причина?

@atanov · 17.01.2019, 05:20

SD163, в css 74-76 строки закомментированы?

@Ilterego · 17.01.2019, 15:39

SD163, используйте значит, библиотека простенькая совсем. Тем более решения, я предполагаю, в ближайшем будущем не появится.

@SD163 · 18.01.2019, 10:01 **[ТС]**

atanov, и закоментировал, и не коментировал, и удалял из css, и менял 3s на 8s (и в css и в js) - не работает

Добавлено через 3 минуты
Ilterego, т.е. на чистом css или js ванильный на пару строк - вообще не реально?

@atanov · 18.01.2019, 10:03

SD163, ну не знаю... Выложите код, посмотрю, что Вы там намудрили.

@SD163 · 18.01.2019, 10:13 **[ТС]**

atanov,

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body, #app {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}
  #round1 {
    position:absolute;
    display: flex;
    margin: 300px 0 0 50px;
}
  #round2{ 
    width: 600px;
    position:absolute;
    display: flex;
    margin: 150px 0 0 600px;
}
  #round3 { 
    position:absolute;
    display: flex;
    margin: 600 px 0 0 250px;
}
 #round4{
    width: 360px;
    position:absolute;
    display: flex;
    margin: 900px 50px 0 0 ;
}
  #round5 { 
    position:absolute;
    display: flex;
    margin: 1200px 0 0 800px;
}
/* АНИМАЦИЯ */
    @keyframes anim-text {
    from {margin-top:1000px;}
    to {margin-top:0px;}
    }
    #app {
    animation: anim-text 4s;
    }   
    @keyframes anim-r1 {
    from {margin-top: 1000px;}
    to {margin-top: 300px;}
    }
    #round1 {
    animation: anim-r1 1s;
    }
    @keyframes anim-r2 {
    from {margin-top: 1000px;}
    to {margin-top: 150px;}
    }
    #round2 {
    animation: anim-r2 2s;
    }
    @keyframes anim-r3 {
    from {margin-top: 1200px;}
    to {margin-top: 600px;}
    }
    #round3 {
    animation: anim-r3 5s;
    }
    @keyframes anim-r4 {
    from {margin-top: 1800px;}
    to {margin-top: 900px;}
    }
    #round4 {
    animation: anim-r4 6s;
    }
    @keyframes anim-r5 {
    from {margin-top: 1800px;}
    to {margin-top: 1200px;}
    }
 
    </style>
 
</head>
    
<body translate="no">
    <div class="content-group">
        <div id="app">
            <div class="info-container">
                    <img src="img2/info-1.jpg" alt=" " id="round1">
                    <img src="img2/info-2.jpg" alt=" " id="round2">
                    <img src="img2/info-3.jpg" alt=" " id="round3">             
                    <img src="img2/info-4.jpg" alt=" " id="round4">          
                    <img src="img2/info-5.jpg" alt=" " id="round5">            
            </div>
        </div>
    </div>
</body>
<script>
document.addEventListener('DOMContentLoaded', docReady);
let round5Top;
let clientHeight;
function docReady()
{
    round5Top = Number(document.getElementById('round5').getBoundingClientRect().top);
    clientHeight = Number(document.documentElement.clientHeight);
}
window.onscroll = function ()
{
    if((clientHeight + window.pageYOffset) > round5Top)
    {
        document.getElementById('round5').style.cssText = 'animation: anim-r5 8s;';
    }
}
</script>
</html>

добавление #round5 { animation: anim-r5 3s;} ни чего не дает

@atanov · 18.01.2019, 10:56

SD163, а... Я упустил, что у Вас margin, а не top установлен. Для позиционирования лучше используйте top, left, right, bottom. Замените строку 38 на

CSS

1	top: 1200px;

и при прокрутке увидите начало анимации. Дальше - подогнать геометрию.

@SD163 · 19.01.2019, 17:50 **[ТС]**

atanov, огромное спасибо за редакцию. заработало.

Добавлено через 1 минуту
теперь буду рихтовать по плавности и геометрии

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	08.01.2019, 18:25	2
	SD163, Вам нужно по событию scroll сравнивать положение foto3 с клиентским окном. Или проще, когда style.top+высота <клиентской области -> прицепить класс animate. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	09.01.2019, 02:16 [ТС]	3
	atanov, большое спасибо за ответ, но к моему сожалению мои знания в js очень и очень. Скрипты могу маленько разобрать и изменить на примерах, а вот в написании пока что не могу разобрать, хотя пытаюсь иногда. Поэтому не совсем понимаю ответ. Конечно хотелось решить эту задачу, т.к. выглядеть будет приличней, но пока что оставил - все разом запускаются -не айс. 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	09.01.2019, 09:14	4
	SD163, давайте Ваш html и css 0

@Ilterego 9 / 6 / 3 Регистрация: 31.08.2017 Сообщений: 22
	16.01.2019, 02:39	8
	https://github.com/michalsnik/aos, https://github.com/matthieua/WOW 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	16.01.2019, 06:33	9
	SD163, естественно не будет работать, мой пример для Вас, чтобы разобраться. Давайте картинки (только в архиве), попробую посмотреть, как они к Вас по размеру в окне выглядят. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	16.01.2019, 11:07 [ТС]	11
	Ilterego, спасибо за ссылки, но чет не хочется много мусора, а так посмотрел https://codepen.io/michalsnik/pen/WxvNvE да что то в этом ключе 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	16.01.2019, 22:43 [ТС]	13
	atanov, спасибо конечно за помощь, но у меня не работает - в хроме и опере все 5 фото стартуют одновременно. Если у Вас 5я стартует после попадания в фокус - в чем может быть причина? 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	17.01.2019, 05:20	14
	SD163, в css 74-76 строки закомментированы? 0

@Ilterego 9 / 6 / 3 Регистрация: 31.08.2017 Сообщений: 22
	17.01.2019, 15:39	15
	SD163, используйте значит, библиотека простенькая совсем. Тем более решения, я предполагаю, в ближайшем будущем не появится. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	18.01.2019, 10:01 [ТС]	16
	atanov, и закоментировал, и не коментировал, и удалял из css, и менял 3s на 8s (и в css и в js) - не работает Добавлено через 3 минуты Ilterego, т.е. на чистом css или js ванильный на пару строк - вообще не реально? 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	18.01.2019, 10:03	17
	SD163, ну не знаю... Выложите код, посмотрю, что Вы там намудрили. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	19.01.2019, 17:50 [ТС]	20
	atanov, огромное спасибо за редакцию. заработало. Добавлено через 1 минуту теперь буду рихтовать по плавности и геометрии 0

Как запустить @keyframes в фокусе?

Решение