Анимация PNG-последовательности с помощью прокрутки

Question

В принципе, я хочу динамически добавлять/удалять класс .show для изображений внутри .container в зависимости от положения прокрутки. Я хочу изменить класс после некоторой позиции.

$(document).ready(function() { 
 
    var container = $('#container'), 
 
    nImg = 0; // active picture 
 
    imgNum = $('#container img').length; 
 
    var topDiv = (container).offset() || { 
 
    "top": NaN 
 
    }).top; 
 

 
$(window).bind('scroll', function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > topDiv) { 
 
    nImg++; 
 
    } else { 
 
    nImg--; 
 
    } 
 
    if (nImg >= imgNum) { 
 
    nImg = 0; 
 
    } 
 
    if (nImg < 0) { 
 
    nImg = imgNum - 1; 
 
    } 
 

 
    $(".animated").each(function() { 
 
    $(this).removeClass("show") 
 
    }); 
 
    $(".animated").eq(nImg).addClass("show"); 
 
}); 
 
});

.animated { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="height:200px"></div> 
 
<div id="container"> 
 
    <img src="http://i.imgur.com/2oVbl7z.png" class="animated show" /> 
 
    <img src="http://i.imgur.com/S5s0Mv1.png" class="animated" /> 
 
    <img src="http://i.imgur.com/0vBEXL7.png" class="animated" /> 
 
    <img src="http://i.imgur.com/ffg7v9n.png" class="animated" /> 
 
    <img src="http://i.imgur.com/9FD5kdE.png" class="animated" /> 
 
</div>

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

Answer 1

См. this jsFiddle для примера того, как ограничить частоту его изменения.

function animationTimer(){ 
    canChange = true; 
} 

$(window).bind('scroll', function() { 
    if(canChange) 
    { 
     canChange = false; 
     setTimeout(animationTimer, 250); 
     // ... 
    } 
}); 

Это позволит изображение менять каждые 250 мс, поэтому изменить 250 на номер, который подходит вам душить скорость которого изменяется.

Answer 2

Вы можете использовать sleep function (setTimeout), чтобы подождать некоторое время между действиями. И чтобы быть уверенным, что это не выполняется более 1 раза, вы можете использовать семафоры до lockкритические регионы.

В приведенном ниже примере я добавляю и удаляю класс (это семафор). И я использую setTimeout, чтобы подождать время для выполнения этого кода.

$(document).ready(function() { 
 
    var container = $('#container'), 
 
    nImg = 0; // active picture 
 
    imgNum = $('#container img').length; 
 
    var topDiv = ((container).offset() || { "top": NaN }).top; 
 

 
$(window).bind('scroll', function() { 
 
    if(!container.hasClass('lock')) { 
 
\t \t container.addClass('lock'); 
 
     setTimeout(function() { 
 
\t \t var y = $(this).scrollTop();   
 
\t \t if(y>topDiv){ 
 
\t \t \t nImg++; 
 
\t \t }else{ 
 
\t \t \t nImg--; 
 
\t \t } 
 
\t \t if(nImg>=imgNum){ nImg = 0; } 
 
\t \t if(nImg<0){ nImg = imgNum-1; } 
 

 
\t \t $(".animated").each(function(){ 
 
\t \t \t $(this).removeClass("show")    
 
\t \t }); 
 
\t \t $(".animated").eq(nImg).addClass("show"); 
 
\t \t 
 
\t \t container.removeClass('lock'); 
 
     },200); 
 
    } 
 
}); 
 
});

.animated { display: none;} 
 
.show { display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="height:200px"></div> 
 
<div id="container"> 
 
    <img src="http://i.imgur.com/2oVbl7z.png" class="animated show" /> 
 
    <img src="http://i.imgur.com/S5s0Mv1.png" class="animated" /> 
 
    <img src="http://i.imgur.com/0vBEXL7.png" class="animated" /> 
 
    <img src="http://i.imgur.com/ffg7v9n.png" class="animated" /> 
 
    <img src="http://i.imgur.com/9FD5kdE.png" class="animated" /> 
 
</div>

Примечание: Вы можете изменить значение setTimeout в соответствии с вашими потребностями скорости.