HTML5でスクロールごとに動くアニメーションを作ろうとしています。このウェブサイトhttp://www.puma.com/mobium/のようなもの。スクロールのみで動きます。
多くのことを読んだ後、スクロールで再生されている .gif である可能性があると考えました。そこで、フレームを制御できるように、キャンバス上にフレームごとに gif フレームを作成しました。ただし、ウィンドウが開いているときに自動的に再生されるようになりました。私が行った調査に基づいて、それらは主にスクロールされたときに .gif を再生することに関するものです。これは私が探しているものではありません。
各スクロールでフレームごとに再生することは可能ですか?
私はhtml5とこれらすべてのパララックスを探求する初心者なので、利用可能な他の方法を自由に提案してください。
アニメーションのほとんどは、TweenLite js という JavaScript ライブラリによって処理されているようです。これは Flash のトゥイーンのように機能します。TweenLite は基本的にオブジェクトをあるオブジェクトから別のオブジェクトに移動します。スクロールは Jquery マウス ホイール プラグインによってキャプチャされます。
puma mobium で表示されるアニメーションの多くは、スプライト イメージからのものです。
背景 :
http://www.puma.com/mobium/images/scene/1024/Background_01.jpg http://www.puma.com/mobium/images/scene/1024/Background_02.jpg http://www.puma. com/mobium/images/scene/1024/Background_04.jpg http://www.puma.com/mobium/images/scene/1024/Background_05.jpg
ランニングガイ：
http://www.puma.com/mobium/images/scene/1024/runner_0_m.png http://www.puma.com/mobium/images/scene/1024/runner_1_m.png http://www.puma. com/mobium/images/scene/1024/runner_2_m.png
連続して再生されるオーディオ
それらのほとんどがスプライトであることがわかるように、アニメーションの css プロパティを制御するための TweenLite の CSSPLugin もあります。
マウスをスクロールするとスプライト内の画像の位置が移動し、目にはアニメーションのように見えます。画像の位置は CSSplugin の background position プロパティによって変更され、マウスのスクロールには mosuewheel jquery js が使用されます。
移動スクロールとは別に。アニメーションも左右の矢印で制御されます。
上記のリンクは、TweenLite Js を使い始めるための基本を明確に説明しています。
スプライト画像は、Chrome デベロッパー ツールの [ネットワーク] タブから見つけることができます。情報がお役に立てば幸いです。
