更改滚动图像

Question

在我的网站上是一个固定的图像。这个图像应该是“动画”，这意味着动画的单帧应该被迭代。所以这个想法是有一个图像数组，每当用户滚动时，数组迭代和显示的图像改变，从而创建一个动画。 我不习惯使用JS，因此我不知道从哪里开始。 我的唯一的事情是CSS：

#animation { 
background-repeat: no-repeat; 
position : fixed; 
width: 980px; 
margin: 0 auto; 
} 

Answer 1

好吧，我创建例如用于固定数量将在“电影/动画”中使用的图像。在这种情况下，数字是5.脚本将获得网站高度的图像，并且整个动画（5帧）将具有网站长度的长度。我预先加载并隐藏了将在动画中使用的图像，以确保动画顺利运行。

HTML

<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/> 
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/> 
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/> 
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/> 
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/> 

<!-- Next image is used for first frame, before scroll --> 
<img src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" id="animation" /> 

<div id="bottommark"></div> 

CSS

.hidden { 
    position: absolute; 
    top: -9999999px; 
} 

#bottommark { 
    position: absolute; 
    bottom: 0; 
} 

#animation { 
    background-repeat: no-repeat; 
    position : fixed; 
    top: 0; 
    width: 980px; 
    margin: 0 auto; 
} 

body, html { 
    height: 1000px; /* just for DEMO */ 
    margin: 0; 
} 

jQuery的

$(document).ready(function(){ 
    var offset2 = $(document).height(); 
    var lineHF = offset2 - $("#bottommark").position().top; 
    $(window).scroll(function(){ 
     var offset1 = $(document).height(); 
     var offset = $(window).scrollTop(); 
     var lineH = offset1 - $("#bottommark").position().top - offset; 
     var lineHpart = lineHF/5; //just in case animation have 5 frames/images 

     //below is code in case that animation have 5 frames. 
     //If number of frames is different, edit code (add/remove if loops) 

     $("span").html(lineH); 
      if (lineH > lineHpart*4) { 
       $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"); 
      } 
      if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) { 
       $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"); 
      } 
      if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) { 
       $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"); 
      } 
      if (lineH < lineHpart*2 && lineH > lineHpart*1) { 
       $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"); 
      } 
      if (lineH < lineHpart) { 
       $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"); 
      } 
     }); 
    }); 

DEMO