javascript - Change image on scroll - Stack Overflow

admin管理员组

文章数量:1293787

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;
}

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;
}

• javascript
• jquery
• css
• jquery-events

Share Follow edited Jun 15, 2022 at 16:52 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 7, 2013 at 11:03 pudelhundpudelhund 51222 gold badges44 silver badges1616 bronze badges 1

• 1 Have you looked into JQuery parallax scrollers? You can do a lot with them ianlunn.co.uk/plugins/jquery-parallax stephband.info/jparallax/demos/index.html – Adam Brown Commented Apr 7, 2013 at 12:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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./manual/low/colorful1.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws./manual/low/colorful2.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws./manual/low/colorful3.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws./manual/low/colorful4.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws./manual/low/colorful5.jpg"/>

<!-- Next image is used for first frame, before scroll -->
<img src="http://coverjunction.s3.amazonaws./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./manual/low/colorful1.jpg");
            }
            if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws./manual/low/colorful2.jpg");
            }
            if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws./manual/low/colorful3.jpg");
            }
            if (lineH < lineHpart*2 && lineH > lineHpart*1) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws./manual/low/colorful4.jpg");
            }
            if (lineH < lineHpart) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws./manual/low/colorful5.jpg");
            }
        });
    });

DEMO

本文标签： javascriptChange image on scrollStack Overflow