jquery - マウス スクロール時の製品の 360° 回転効果

Question

このような効果を得るためのプラグインはありますか?

ポラロイド回転

いくつかの写真をつなぎ合わせた巨大な画像であることに気付きました。このタイプの写真を作成できますが、ページのスクロール時にそれらをアニメーション化したいと考えています!

CSSだけでこの効果を得ることができますか?

Answer 1

@Terry が既に述べたように、連続的な変化 (px 単位のスクロール位置) を離散的または段階的な変化 (画像の位置) に変換する必要があるため、js のヘルプが必要です。

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

    });

});