はじめに
以前、Intersection Observerを使った処理について学んだので、
せっかくなら、これを使って既存のサイトのアニメーションを再現してみようと思います。
お手本とするのは、こちらのサイトです。
IN SOMEWHERE NIGHTS - Charlotte is Mine
様々なモーションが施されている本サイトですが、
今回は中でも黒いラベルがスライドしていくアニメーションを模倣したいと思います。
実装するにあたって、参考サイトのソースコードは見ていません。
自分でロジックを考え、実装する力を鍛える事が目的です。
コード
See the Pen ラベルアニメーション by sasha (@sasha_pen) on CodePen.
*qiita上で見ると画像が表示されていませんが、 Codepenに飛んで頂くと、正常に画像も表示されると思います。処理の流れ
js側でやることはシンプルで、intersection observerを使い、対象要素にクラスを付与しているだけです。
ロジックとしては、表示領域に入ったら、まずlabelにクラスを付与して、スライドするアニメーションを起こし、次にテキストや画像などのコンテンツをsetTimeoutで時間差で発火させています。
初めはsetTimeOutとtransitionだけでアニメーションを作っていたのですが、滑らかに行かなかったので、代わりにanimtationを使用しました。
画像のサイズがMBを超えるような重いものだと、表示にラグがあったので、使用する画像のサイズには注意が必要です。
##最後に
世にある既存のサイトのアニメーションを自分で実装してみるというのは、力試しになりますね。
##参考