Animate a PNG sequence by scrolling

Question

Basically, I want to dynamically add/remove the class .show to the images inside .container depending on the scroll position. I want to change the class after some position.

$(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>

If you scroll slowly you see that it actually works, but much too fast - that's the problem. I just to move slowly and want to start it from after some position.

Ketan Talaviya · Answer 1 · 2021-02-06T07:26:19.813

See the below example for how to animate sequence image when page scroll.

$(document).ready(function () {
    $('.aniScrollContainer').aniScroll({});
});

.aniScrollContainer {
    height:300px;
    background-color:#a1a1a1;
}

.myAniScrollContainer200 {
    height:200px;
}


#header {
    display: block;
    height: 500px;
    width: 100%;
    background-color:#e0e0e0;
}
.gap {
    display: block;
    height: 100px;
    width: 100%;
    background-color:#e0e0e0;
}
#footer {
    display: block;
    height: 1500px;
    width: 100%;
    background-color:#e0e0e0;
}


.aniScrollContainer {
    position: relative;
    height: 100px;
}

.aniScrollContainer img.animated {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.durley.net/animate-on-scroll/js/aniscroll.js"></script>

<div id="header"></div>
<div class="aniScrollContainer myAniScrollContainer">
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-01.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-02.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-03.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-04.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-05.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-06.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-07.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-08.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-09.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-10.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-11.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-12.jpg"/>
</div>
<div id="footer"></div>

score 0 · Answer 2 · answered May 04 '15 at 10:36

See this jsFiddle for an example for how to limit how often it can change.

function animationTimer(){
    canChange = true;
}

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

This will allow the image to change every 250 ms, so change the 250 to a number which suits you to throttle the speed of which it changes.

score 0 · Answer 3 · edited May 23 '17 at 12:14

You can use a sleep function (setTimeout) to wait some time between actions. And to be sure that isn't executet more than 1 time, you can use semaphores to lock critical regions.

In the example below I add and remove a class (this is the semaphore). And I make use of setTimeout to wait a time to execute that code.

$(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')) {
  container.addClass('lock');
        setTimeout(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");
  
  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>

Note: You can change the value of setTimeout to match your speed needs.

Animate a PNG sequence by scrolling

3 Answers3