スクロールに合わせて要素をアニメーション表示させる
公開日:
最終更新日:
割と言われるスクロールしてたら、出てくるってやつです。
IntersectionObserverでサクッと便利になりましたね
同じアニメーションで表示
Demo
Html
アニメーションさせたい要素に同じクラスを付けていきます。
今回は[iSObserver]というクラスにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<section class="section"> <h2 class="section__title1 iSObserver">Section1 Title</h2> </section> <section class="section"> <h2 class="section__title2 iSObserver">Section2 Title</h2> </section> <section class="section"> <h2 class="section__title3 iSObserver">Section3 Title</h2> </section> <section class="section"> <h2 class="section__title4 iSObserver">Section4 Title</h2> </section> |
css
それぞれのアニメーションしたい要素のデフォルト値を設定しています。
今回は、.section__title1は透明でY軸に-20pxみたいな感じです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.section__title1 { opacity: 0; transform: translateY(-20px); transition-duration: .5s; } .section__title2 { opacity: 0; transform: translateY(20px); transition-duration: .5s; } .section__title3 { opacity: 0; transform: translateX(-20px); transition-duration: .5s; } .section__title4 { opacity: 0; transform: translateX(20px); transition-duration: .5s; } .op { opacity: 1; transform: translate(0, 0); } |
javascript
iSObserversのとこでアニメーションさせたい要素を全て取得しています。
optionには各種設定が入ります(上下左右が交差するポイント)。他にもoptionはあるので、気になる方は、MDN Intersection observer のオプションをご覧ください。
そして、設定領域に入ったらobserveUse関数内でfadeIn関数を入った要素を引数で渡して実行し、
fadeIn関数でその要素にopクラスを付けてアニメーションさせてます。
ですので、target.classList.add('op'); を変更する事で、付けたいクラスやらを変えれます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const iSObservers = document.querySelectorAll('.iSObserver'); const options = { rootMargin: '-30% 0px', }; const fadeIn = (target) => { target.classList.add('op'); }; const observeUse = (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { fadeIn(entry.target); } }); }; const observer = new IntersectionObserver(observeUse, options); iSObservers.forEach(iSObserver => { observer.observe(iSObserver); }); |
違うアニメーションで表示
Demo
html
さっきと同じで大丈夫です。
|
1 2 3 4 5 6 7 8 |
<section class="section"> <h2 class="section__title1 iSObserver">Section1 Title</h2> </section> <section class="section"> <h2 class="section__title2 iSObserver">Section2 Title</h2> </section> |
css
section__title2はさっきと違うアニメーションにするので、transformとかopacityを消してます。
section__title2に付ける用のscaleクラスを定義しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.section__title1 { text-align: center; opacity: 0; transform: translateY(-20px); transition-duration: 1s; } .section__title2 { text-align: center; transition-duration: 1s; } .op { opacity: 1; transform: translate(0, 0); } .scale{ transform: scale(2); } |
javascript
違うのはfadeIn関数の中で、表示領域に入ったものにsection__title1クラスがあれば、opクラスをsection__title2クラスがあれば、scaleクラスを付けるってしてるだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const iSObservers = document.querySelectorAll('.iSObserver'); const options = { rootMargin: "-30% 0px", }; const fadeIn = (target) => { if (target.classList.contains('section__title1')) { target.classList.add('op'); } else if (target.classList.contains('section__title2')) { target.classList.add('scale'); } }; const observeUse = (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { fadeIn(entry.target); } }); }; const observer = new IntersectionObserver(observeUse, options); iSObservers.forEach(iSObserver => { observer.observe(iSObserver); }); |
とりあえず、cssとfadeIn関数の中の付けるクラスを変えると変更できます。
タイミングはrootMarginを変えてもらうと発火ポイントが変わります。
よろしければコメントをどうぞ