スクロール量に
応じて変化する
アニメーション
JavaScriptを使って
アニメーションを進めたり戻したりを
スクロールで制御する

image: スクロール量に応じて変化するアニメーション
Toplabo
Control animation with scrolling

スクロール量をアニメーションの動きに変換する

 | 2024/10/15

開発
経緯

まずはスクロールで動かすアニメーションの話
  • アニメーションの正逆をコントロール

    スクロールに合わせてにアニメーションが動くWEBのスクリプトは結構あります。たとえば、GSAPのスクロールトリガーなどです。ただ、これはモジュールなので60kb以上になります。大規模なアニメーションだとこれでも仕方がないですが、ちょっとしたアクセント程度なら、自前の軽いスクリプトがいいのではと思います。
    そこで何か軽いスクロール関連のスクリプトをと開発してみました。
    これまでも、スクロールにわせてアニメーションが起動するのはすでに実装してますが、今回はスクロールトリガーの様にマウスホイールを上下に回転させるのに同期してアニメーションも一緒に動くようなものをめざします。

    ストレッチ中のお姉さんのサンプル

    下のストレッチ中のお姉さんですが、お姉さんの上でマウスホイールを上下に回転させると脚を閉じたりします。
    現状スマホにはホイールスクロール機能が無いので機能しません。まあ、ピンチとか何かふさわしいアクションもあるかとは思いますが、とりあえず今回はPCのみの開発です。








解説

javascriptとCSSを使います。
  • まずはホイールマウスの回転量を取得する方法を考える

    基本の考え方はマウスホイールの回転量を取得し、その量を回転数なり移動量に変換する、ということになります。
    ホイールのイベント処理は、javascriptのaddEventListenerメソッドとwheelイベント。
    サンプルは脚を回転させたいので、css3のtransform: rotate()を使います。

    マウスホイールの回転量の取得

    function scrollAction(e){
    	console.log(`ホイール回転量:${e.deltaY}`); /* e.deltaYがホイール回転量 */
    	e.preventDefault();/* 上下方向のスクロールをキャンセル */
    }
    const bodyitem= document.querySelector( '#bodyitem' );/* エクササイズ中の女性 */
    let rotation = 0;
    bodyitem.addEventListener('wheel', scrollAction,{passive : false});
    
    CSSの transformに変換する

    生の回転量だと数値が大きすぎるので適宜適切な数量になるように定数を掛けます。
    またtransformの上限と下限を設定します。

    rotation += e.deltaY * 0.08; // スクロール量に応じて回転量を調整
    rotation= Math.round(rotation);/* 整数に丸める */
    if(rotation > 68)rotation= 68;/* 使用する範囲を設定 */
    if(rotation <= -12)rotation= -12;
    
    完成品について

    JavaScript自体は簡単でしたが、エクササイズの姉さんを作るのがかなり大変でした。
    特にレスポンシブに設定するのに苦労した。
    photoshopのパペットワープ使うともっといろいろできそうです。

今後の
課題

次は汎用性のあるプログラムを開発
  • 今後の開発予定リスト

    このスクリプトは現状エクササイズのお姉さん専用なので、もっと汎用性のあるスクリプトにしたいですね。
    そこで今後の開発項目のリストです。
    たとえば…、

    1. マウスホイールを上下させると、複数のオブジェクトが一斉に同期して動き出す.
    まあ、GSAPのスクロールトリガーですね。新規で作るならあれよりもっと軽くして新たな機能も追加しないと。

    2. 昔のジョグダイヤル付きLDプレーヤーみたいな、動画をホイールマウスで進めたり戻したりできるようなスクリプトも面白いかな。

    3. このスクリプトは単発のアニメーション専用ですが、これを複数のアニメーションのセット(たとえばアドビアニメーションで作るようなやつ昔のフラッシュ)にも適用させられるともっと面白いですね。

    ということで2番目を開発してみました。

    動画をマウスホールで正逆制御する

    一時停止した動画の上でマウスホイールを上下にスクロールすると動画が進んだり戻ったりします。スマホにはホイールスクロール機能が無いので対応していません。
    そのうち何かするかもしれませんが

『スクロール量に応じて変化するアニメーション』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら