CODEWITHSUNDEEP
javascriptjqueryimageanimation
Sven
Sven

Reputation: 13296

jQuery: Animating a sequence images

So for the last few days I am struggling to get this to work. Although some SO members have already helped me a lot, I still feel that I am on the wrong track because I just can't get this to work.

Here is a Fiddle.

Basically, I want to dynamically add/remove the class .show to the images inside .container depending on the scroll position. In the example posted I am just attempting this for a down-scroll.
If you scroll really light and slowly you see that it actually works, but much too fast - that's the problem.
My idea is to define something like a threshold that has to be scrolled before something happens, but somehow I don't get the desired result.

Also, the scroll event seems to be triggered not regular in browser, so I have no idea how to get a smooth movement/transition with it. I already looked at some example code from tutorials and there it always seems to work! Why not with my example? Has it something to do with my CSS?

Please help my, I am really frustrated right now.

For example take that tutorial page and take a look at the source. There is a variable called ScrollCount which is incremented for every time the function ran. When ScrollCount reaches 3, some animation stuff is done and ScrollCount is reset to 1. That way, according to the comments, every third pixel scrolled the bird's wings change.

But according to the observations with my code, this can't be true, because the scroll event which triggers the function seems to fire more or less at random - the faster you scroll the more pixels are "skipped" - at least with my code, so something has to be wrong.

Upvotes: 1

Views: 4371

Answers (2)

Balaji
Balaji

Reputation: 1

Here Is The Working Demo And You Can See The Horse Animation...

onload = function startAnimation() {
  var frames = document.getElementById("animation").children;
  var frameCount = frames.length;
  var i = 0;
  setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
  }, 100);
}
#animation img {
  display: none;
}
#animation img:first-child {
  display: block;
}
<div id="animation">
  <img src="http://s23.postimage.org/t57meexkb/horse_1.png" class="animated" />
  <img src="http://s23.postimage.org/i86apnasr/horse_2.png" class="animated" />
  <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png" class="animated" />
  <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png" class="animated" />
  <img src="http://s23.postimage.org/ddclrdch7/horse_5.png" class="animated" />
  <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png" class="animated" />
  <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png" class="animated" />
  <img src="http://s23.postimage.org/n1un88wob/horse_8.png" class="animated" />
  <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png" class="animated" />
  <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png" class="animated" />
  <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png" class="animated" />
  <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png" class="animated" />
  <img src="http://s23.postimage.org/imc82zka3/horse_13.png" class="animated" />
  <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png" class="animated" />
</div>

http://jsfiddle.net/u20yvyp9/

Upvotes: 0

Snixtor
Snixtor

Reputation: 4307

Tying animation elements to the quantity of scroll events is going to give inconsistent results. On the sample page you linked, the animation is tied to both absolute scroll position and quantity of scroll events, which can give some strange results.

There's so many different ways to scroll a view, and all of them will produce a different numbers of scroll events and scroll distances.

  • Mouse wheel (affected by system mouse settings, resolution of mouse)
  • Keyboard up and down keys (affected by system key repeat rates)
  • Page up and down (possibly affected by some other settings?)
  • Dragging the scroll bar (affected by all sorts of things)

And then all of these may well behave differently based on the browser.

In short? Tying animation to the quantity of scroll events sounds like a bad idea to me. Instead, why not just tie it to the scroll position?

function animateHorse() {
    var currentScrollPosition = window.pageYOffset;
    var imageIndex = Math.round(currentScrollPosition / scrollResolution);

    if (imageIndex >= pictureCount) {
        imageIndex = pictureCount - 1; // Select last image
    }

    $("#container img").hide();
    $("#container img").eq(imageIndex).show();
}

And here's the fiddle.

Upvotes: 4

Related Questions