Sprite Animation

by leethelobster

HTML

<div class="frame-container">
	<div class="show" style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/30.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/29.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/28.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/27.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/26.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/25.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/24.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/23.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/22.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/21.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/20.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/19.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/18.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/17.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/16.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/15.jpg);></div>
	<div style="background-image: url(http://journey.lifeofpimovie.com/images/tiger/virtual/frames/14.jpg);></div>
	<div style="background-image:...

CSS

body {
    height: 600px;
}
.frame-container div {
    width: 1024px;
    height: 574px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-position: center center;
    background-size: cover;
}
.frame-container div.show {
    opacity: 1;
}

JavaScript

$(document).ready(function () {
    var container = $('.frame-container'),
        nImg = 0;    // active picture
        imgNum = $('.frame-container div').length;

    container.mousewheel(function(event, delta, deltaX, deltaY) {
        if(deltaY>0){
             nImg++;   
        }else{
             nImg--;   
        }
        if(nImg>=imgNum){ nImg = 0; }
        if(nImg<0){ nImg = imgNum-1; }

        $(".frame-container div").each(function(){ 
            $(this).removeClass("show");
        });
        $(".frame-container div").eq(nImg).addClass("show");
    });
});