在滚动上更改图像 [英] change image on scroll

问题描述

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

On my website is a fixed image. This image should be "animated", meaning that the single frames of the animation should be iterated. So the idea is to have an array of images and that every time the user scrolls, the array is iterated and the displayed image changes, thus creating an animation. I'm not that accustomed to using JS, thus I don't really know where to start. The only thing I have is the CSS:

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

推荐答案

例如固定数量的将在电影/动画中使用的图像。在这种情况下，数字是5.脚本将获得网站的高度的图像，整个动画（5帧）将有长度的站点的长度。

Ok, I've created example for fixed number of images that will be used in "movie/animation". In this case, the number is 5. Script will get image of site's height and whole animation (5 frames) will have lenght of site's lenght. I've preloaded and hide images that will be used in animation just to make sure that animation will work smooth.

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

DEMO

这篇关于在滚动上更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！