Question

我修改了这个视差网站模板，该模板分为不同的部分和幻灯片。在每张幻灯片上，我想要一个固定定位的图像序列，根据每个幻灯片上的滚动位置进行动画处理。由于每个帧都相对于scrollTop（）值，因此91个图像的动画非常快。因此我希望它为scrollTop（）中的每4或5个像素显示一个帧。我该怎么做？

HTML：

<body>
    <main>
    <!-- SECTIONS -->
        <section id="slide-1" class="homeSlideTall">
            <div class="bcg" data-center="background-position: 50% 0px;" data-bottom-top="background-position: 50% 100px;" data-top-bottom="background-position: 50% -200px;" data-anchor-target="#slide-1">
                <div class="hsContent" data-start="opacity: 1; top: 206px;" data-100-bottom="opacity: 1;top: 206px; left: 0px; width: 100%;" data-top-bottom="opacity: 0; top: -550" data-anchor-target="#slide-1">
                    <div class="boxScroll img" > 
                        <img src="/img/model/0.png" width="960" height="540" />
                    </div>
                    <div class="boxScroll" > 
                        <h2>Carried Away</h2>
                        Product-text
                    </div>

                </div>
            </div>
        </section>

        <section id="slide-3" class="homeSlideTall">
            <div class="bcg" data-center="background-position: 50% 0px;" data-bottom-top="background-position: 50% 10px;" data-top-bottom="background-position: 50% -10px;" data-anchor-target="#slide-3">
                <div class="hsContent" data-bottom-top="opacity: 0; top: 1000px" data-top="opacity: 1;  top: 206px; width: 100%;" data-100-bottom="opacity: 1;  position: fixed; top: 206px; width: 100%;" data-top-bottom="opacity: 0; top: -550"   data-anchor-target="#slide-3">
                    <div class="boxScroll img" > 
                        <img src="/img/model/0.png" width="960" height="540" />
                    </div>
                    <div class="boxScroll" > 
                        <h2>Way</h2>
                        Product-text
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>

JQuery的：

jQuery(window).on("scroll",function() {
    var n = $(window).scrollTop(),
    divOffset = $('#slide-1').offset().top,
    dist = (n - divOffset);
    if (dist <= 0) { var dist = 0; } // Check that value isn't smaller than   0
    if (dist >= 91) { var dist = 91; } // In case there aren't any more frames show the last one in the sequence
    jQuery("#slide-1 .boxScroll img").attr({src:"/img/model/"+dist+".png"});
});

Answer 1

这正是我所寻找的：

http://jsfiddle.net/qJhRz/3/

var newTop = 0, 

// animate every 10 pixels
pixels = 10, 

// starting frame
frame = 0;

$(window).scroll(function(event) {

//position of the window
newTop = $(this).scrollTop();

// working out what frame to be on
frame  = Math.floor(newTop / pixels);

//frame is the number frame you should animate to
});

感谢。

改变不同幻灯片上的图像序列

1 个答案: