私はクライアント用のウェブサイトを構築しており、スクロールで販売されている商品を、アップルのウェブサイト:スクロールアニメーション - 回転するようにスクロールの画像を変更する
は私が回転する製品のすべてのフレームを持つフォルダを持っています。私はこれに取り組むのが最善の方法だろうと思っています。私はすべてのスクロールで推測しています、イメージは次のもののために交換する必要がありますか?説明するのはかなり難しい。
私はクライアント用のウェブサイトを構築しており、スクロールで販売されている商品を、アップルのウェブサイト:スクロールアニメーション - 回転するようにスクロールの画像を変更する
は私が回転する製品のすべてのフレームを持つフォルダを持っています。私はこれに取り組むのが最善の方法だろうと思っています。私はすべてのスクロールで推測しています、イメージは次のもののために交換する必要がありますか?説明するのはかなり難しい。
おそらくすべての画像を1つのスプライトに結合し、background-position
を使用して「フレーム」を変更したいと思うでしょう。
以下は、skrollrを使用してこれを達成するための幾分強要です。私は、CSSをあまり冗長にしないようにするCSSプリプロセッサも使用しています。
サス/ SCSS:
$image-width: 240;
.container {
position: fixed;
top: 0;
[class^="sprite-"], [class*=" sprite-"] {
background-image: url(http://i.imgur.com/vpjGWKb.png);
background-position: 0 0;
background-repeat: no-repeat;
position: absolute;
width: #{$image-width - 2}px;
height: 200px;
display: none;
}
@for $i from 0 through 17 {
.sprite-#{($i + 1)} {
background-position: unquote(-#{($i * $image-width)}px) 0;
}
}
}
.spacer-div {
margin-bottom: 2000px;
}
HTML:
<div class="container">
<div class="sprite-1" data-0p="display:block" data-5p="display:none"></div>
<div class="sprite-2" data-0p="display:none" data-5p="display:block" data-10p="display:none"></div>
<div class="sprite-3" data-0p="display:none" data-10p="display:block" data-15p="display:none"></div>
<div class="sprite-4" data-0p="display:none" data-15p="display:block" data-20p="display:none"></div>
<div class="sprite-5" data-0p="display:none" data-20p="display:block" data-25p="display:none"></div>
<div class="sprite-6" data-0p="display:none" data-25p="display:block" data-30p="display:none"></div>
<div class="sprite-7" data-0p="display:none" data-30p="display:block" data-35p="display:none"></div>
<div class="sprite-8" data-0p="display:none" data-35p="display:block" data-40p="display:none"></div>
<div class="sprite-9" data-0p="display:none" data-40p="display:block" data-45p="display:none"></div>
<div class="sprite-10" data-0p="display:none" data-45p="display:block" data-50p="display:none"></div>
<div class="sprite-11" data-0p="display:none" data-50p="display:block" data-55p="display:none"></div>
<div class="sprite-12" data-0p="display:none" data-55p="display:block" data-60p="display:none"></div>
<div class="sprite-13" data-0p="display:none" data-60p="display:block" data-65p="display:none"></div>
<div class="sprite-14" data-0p="display:none" data-65p="display:block" data-70p="display:none"></div>
<div class="sprite-15" data-0p="display:none" data-70p="display:block" data-75p="display:none"></div>
<div class="sprite-16" data-0p="display:none" data-75p="display:block" data-80p="display:none"></div>
<div class="sprite-17" data-0p="display:none" data-80p="display:block" data-85p="display:none"></div>
<div class="sprite-18" data-0p="display:none" data-85p="display:block" data-90p="display:none"></div>
<div class="sprite-1" data-0p="display:none" data-90p="display:block" data-95p="display:block"></div>
</div>
<div class="spacer-div">
</div>
ページには、アニメーション内のフレームを示す複数のイメージを配置できます。要件ごとにフレーム数を減らすことができます。次に、skrollr,scrollorama、scrollmagicのようなプラグインを使用して、シーケンス内のフレームをフェードイン/アウトするタイミングを設定することができます。
良いアイデア。私はこれがうまくいくと思います。 – Karen
、またはそれらのフレームのビデオアニメーションがある場合は、このプラグインを使用することもできます。https://github.com/develodesign/play-on-scroll –
こんにちは、ありがとう、私が思っていたものです。ちょうどこのフィドルを見つけたhttp://jsfiddle.net/coma/sBTzG/13/ – user3429966
クール。私の方法よりもずっと簡単です。 –