Не начинайте анимацию пока на виду

Мне было интересно, как я мог остановить анимацию, начиная с ее прокрутки до полного просмотра. Я использую плагин, animate.css by Dan Eden, чтобы анимировать мои элементы. Я добавил анимацию, и она работает отлично, но мне нужно знать, как заставить ее запускаться только после ее полного просмотра.Не начинайте анимацию пока на виду

Это код для элемента я анимированный с помощью класса:

<div class="animated fadeInUp" id="enter-title"><img src="/images/welcome-text/enter.png" width="473" height="227"/></div>

Это код анимации:

@-webkit-keyframes fadeInUp { 
0% { 
    opacity: 0; 
    -webkit-transform: translateY(20px); 
} 

100% { 
    opacity: 1; 
    -webkit-transform: translateY(0); 
} 

.animated.fadeInUp { 
-webkit-animation-name: fadeInUp; 
-moz-animation-name: fadeInUp; 
-o-animation-name: fadeInUp; 
animation-name: fadeInUp; 
}

источник

2013-07-31 lc2013

Добро пожаловать в Stack Overflow user2287630! Хотя вы описали свою проблему, вам сложно помочь, не зная, как выглядит ваш код. Посетите [здесь] (http://stackoverflow.com/editing-help) за помощью с кодом форматирования в свой вопрос. Также может быть полезно использовать [jsFiddle] (http://jsfiddle.net), чтобы помочь проиллюстрировать вашу точку зрения. –

в соответствии с вышеизложенным, вам нужно будет показать код, который вы пробовали, но обычно вы можете посмотреть что-то вроде но, пожалуйста, предоставьте код. – Pogrindis

вы обновили html. но что JS вы хотели бы добавить к нему? Каков ваш код анимации? – Pogrindis

Если вы хотите, чтобы сдержать анимацию, пока изображение не прокручивается в поле зрения вы могли бы использовать немного Jquery как так:

Working Example

JQuery

$(window).scroll(function() { 
    var y = $(window).scrollTop(), 
     x = $('.animated').offset().top - 200; 
    if (y > x) { 
     $('.animated').addClass('fadeInUp').removeClass('fadeOutDown'); 
    } else { 
     $('.animated').removeClass('fadeInUp').addClass('fadeOutDown'); 
    } 
});

CSS

.animated { 
    -webkit-animation-fill-mode:both; 
    -moz-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    -o-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    -ms-animation-duration:1s; 
    -o-animation-duration:1s; 
    animation-duration:1s; 
    opacity:0;    /*** Important Bit ***/ 
} 
.animated.hinge { 
    -webkit-animation-duration:2s; 
    -moz-animation-duration:2s; 
    -ms-animation-duration:2s; 
    -o-animation-duration:2s; 
    animation-duration:2s; 
} 
@-webkit-keyframes fadeInUp { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateY(20px); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(0); 
    } 
} 
@-moz-keyframes fadeInUp { 
    0% { 
     opacity: 0; 
     -moz-transform: translateY(20px); 
    } 
    100% { 
     opacity: 1; 
     -moz-transform: translateY(0); 
    } 
} 
@-o-keyframes fadeInUp { 
    0% { 
     opacity: 0; 
     -o-transform: translateY(20px); 
    } 
    100% { 
     opacity: 1; 
     -o-transform: translateY(0); 
    } 
} 
@keyframes fadeInUp { 
    0% { 
     opacity: 0; 
     transform: translateY(20px); 
    } 
    100% { 
     opacity: 1; 
     transform: translateY(0); 
    } 
} 
.fadeInUp { 
    -webkit-animation-name: fadeInUp; 
    -moz-animation-name: fadeInUp; 
    -o-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
} 
@-webkit-keyframes fadeOutDown { 
    0% { 
     opacity: 1; 
     -webkit-transform: translateY(0); 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: translateY(20px); 
    } 
} 
@-moz-keyframes fadeOutDown { 
    0% { 
     opacity: 1; 
     -moz-transform: translateY(0); 
    } 
    100% { 
     opacity: 0; 
     -moz-transform: translateY(20px); 
    } 
} 
@-o-keyframes fadeOutDown { 
    0% { 
     opacity: 1; 
     -o-transform: translateY(0); 
    } 
    100% { 
     opacity: 0; 
     -o-transform: translateY(20px); 
    } 
} 
@keyframes fadeOutDown { 
    0% { 
     opacity: 1; 
     transform: translateY(0); 
    } 
    100% { 
     opacity: 0; 
     transform: translateY(20px); 
    } 
} 
.fadeOutDown { 
    -webkit-animation-name: fadeOutDown; 
    -moz-animation-name: fadeOutDown; 
    -o-animation-name: fadeOutDown; 
    animation-name: fadeOutDown; 
}

Я добавил дополнительную анимацию, чтобы вымыть ima ge back out, когда вы прокручиваете резервную копию, это необязательно, но я думаю, что это дает хороший эффект.

источник

2013-08-01 00:16:18 apaul

Только то, что я искал. Благодарю. – lc2013

Вы должны постоянно проверять, если элемент в поле зрения каждый раз страница прокручивается. Существует этот аккуратный плагин jQuery под названием Bullseye, который может вам помочь.

источник

2013-07-31 23:09:04 Samer

Это не совсем так. Без какой-либо дополнительной информации от ОП это невозможно сказать. Также не о том, прокручивается ли она, об этом не упоминается. На самом деле упоминается только после того, как визуализируется представление. – Pogrindis

Не начинайте анимацию пока на виду

ответ

Смежные вопросы