Question

是否有任何插件可以获得像这样的效果？

我注意到这是一张巨大的图片，一些照片缝合在一起，我可以创建这种类型的照片，但我想在页面滚动时为它们设置动画！

我可以仅使用CSS获得此效果吗？

Answer 1

正如@Terry已经说过的那样，你需要一些js帮助，因为你必须将连续变化（px中的滚动位置）转换为离散或阶梯式变化（图像位置）：

<强> HTML

<div id="rotator"></div>

<强> CSS

body {
    height: 2000px;
}

#rotator {
    font-size: 416px;
    width: 1em;
    height: 1em;
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    background: transparent url(http://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0;
}

<强> JS

$(function() {

    var rotator = $('#rotator');
    var container = $(document);
    var viewport = $(window);

    var images = 72;
    var imageHeight = 30000 / images;
    var scrollHeight = container.height() - viewport.height() + imageHeight;
    var step = images / scrollHeight;

    viewport.scroll(function(event) {

        var x = -Math.floor(step * viewport.scrollTop()) * imageHeight;
        rotator.css('background-position', x + 'px 0');

    });

});

360°产品旋转对鼠标滚动的影响

1 个答案: