jquery - 鼠标滚动360°产品旋转效果

Question

有没有插件可以实现这样的效果？

宝丽来旋转

我注意到这是一个巨大的图像，其中有一些照片拼接在一起，我可以创建这种类型的照片，但我想在页面滚动时为它们制作动画！

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

Answer 1

正如@Terry 已经说过的，您需要一些 js 帮助，因为您必须将连续变化（以 px 为单位的滚动位置）转换为离散或步进变化（图像位置）：

http://jsfiddle.net/coma/sBTzG/13/

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');

    });

});