Home > Javascript > スクロールに合わせて要素をアニメーション表示させる

スクロールに合わせて要素をアニメーション表示させる

公開日:

最終更新日:

scroll animation

割と言われるスクロールしてたら、出てくるってやつです。
IntersectionObserverでサクッと便利になりましたね

同じアニメーションで表示

Demo

デモはこちら

Html

アニメーションさせたい要素に同じクラスを付けていきます。
今回は[iSObserver]というクラスにしています。

css

それぞれのアニメーションしたい要素のデフォルト値を設定しています。
今回は、.section__title1は透明でY軸に-20pxみたいな感じです

javascript

iSObserversのとこでアニメーションさせたい要素を全て取得しています。
optionには各種設定が入ります(上下左右が交差するポイント)。他にもoptionはあるので、気になる方は、MDN Intersection observer のオプションをご覧ください。
そして、設定領域に入ったらobserveUse関数内でfadeIn関数を入った要素を引数で渡して実行し、
fadeIn関数でその要素にopクラスを付けてアニメーションさせてます。
ですので、target.classList.add('op'); を変更する事で、付けたいクラスやらを変えれます

違うアニメーションで表示

Demo

デモはこちら

html

さっきと同じで大丈夫です。

css

section__title2はさっきと違うアニメーションにするので、transformとかopacityを消してます。
section__title2に付ける用のscaleクラスを定義しました。

javascript

違うのはfadeIn関数の中で、表示領域に入ったものにsection__title1クラスがあれば、opクラスをsection__title2クラスがあれば、scaleクラスを付けるってしてるだけです。

とりあえず、cssとfadeIn関数の中の付けるクラスを変えると変更できます。
タイミングはrootMarginを変えてもらうと発火ポイントが変わります。

Comment

よろしければコメントをどうぞ