Анимация путевых точек не работает при прокрутке

Попытка создать анимацию при прокрутке с использованием путевых точек JQuery. В консоли ошибок нет, но при прокрутке эффекта не возникает. Если я открою консоль разработчика, а затем закрою ее, эффект сработает. Это странно, потому что я повторно использую этот код с другого созданного мной веб-сайта, и он отлично работает на этом веб-сайте.

$(document).ready(function() {

$('.js--wp-1').waypoint(function(direction) {
   $('.js--wp-1').addClass('animated fadeIn');
}, {
   offset: '50%'
});

});

Включен скрипт в HTML

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/
jquery.min.js"> 
</script>


<script src="Vendor/JS/jquery.waypoints.min.js"></script>
<script src="Resources/JS/script.js"></script>

CSS

.js--wp-1 {
opacity: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}

.js--wp-1.animated {
opacity: 1;
}
0
0
499
1

Ответы 1

Я нашел проблему, и теперь она решена. Я установил высоту 100% для тела, HTML в моем файле CSS. Если кто-то еще обнаружит, что путевые точки не работают и код правильный, это может быть следующее.

Другие вопросы по теме