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

Question

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

Polaroid rotation

我注意到，与缝合在一起了一些照片，我可以创建此类型照片的巨大图像，但我想它们的动画在页面滚动！

我可以只使用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'); 

    }); 

});