概要
よくあるスクロール量にあわせたインタラクション（アニメーション）を、HTMLに記述した数値でタイミングや速度を制御できるようにjQueryで実装。用途
- webサイトのスクロールに合わせてアニメーションを発火させる処理を実装する。
- アニメーションの発火タイミングやスピード、遅延などをHTML側に数値を記載することで制御する。
- HTMLで数値指定するため、直感的にアニメーションの調整がしやすい。
仕様
- HTMLに記述された数値を取得してスクロールアニメーションを描画。
- 標準で制御できるアニメーションは、以下です。
※制御するjs-scroll-interactionのmodifierを追加すればアニメーションさせるプロパティを増やすことが可能。- opacity
- transformY
- transformX
- width
- .js-scroll-interactionを付与した要素にjs-scroll-interactionのmodifierクラス（アニメーションの種類）、data-delayなどのdata属性を付与することで実装と調整が可能。
- scrollイベント使用。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
注意事項
- DEMOでは正常に動作しておりません。ローカル環境に移設して確認してください。
その他
- jQuery v3.6.0使用。
実装方法
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
