開発
経緯
まずはスクロールで動かすアニメーションの話
- アニメーションの正逆をコントロール
スクロールに合わせてにアニメーションが動くWEBのスクリプトは結構あります。たとえば、GSAPのスクロールトリガーなどです。ただ、これはモジュールなので60kb以上になります。大規模なアニメーションだとこれでも仕方がないですが、ちょっとしたアクセント程度なら、自前の軽いスクリプトがいいのではと思います。
そこで何か軽いスクロール関連のスクリプトをと開発してみました。
これまでも、スクロールにわせてアニメーションが起動するのはすでに実装してますが、今回はスクロールトリガーの様にマウスホイールを上下に回転させるのに同期してアニメーションも一緒に動くようなものをめざします。ストレッチ中のお姉さんのサンプル
下のストレッチ中のお姉さんですが、お姉さんの上でマウスホイールを上下に回転させると脚を閉じたりします。
現状スマホにはホイールスクロール機能が無いので機能しません。まあ、ピンチとか何かふさわしいアクションもあるかとは思いますが、とりあえず今回はPCのみの開発です。