. CSS JavaScript、スクロールに合わせて要素をふわっと浮かばせる。
CSS JavaScript、スクロールに合わせて要素をふわっと浮かばせる。
CSS JavaScript、スクロールに合わせて要素をふわっと浮かばせる。

CSS+JavaScript、スクロールに合わせて要素をふわっと浮かばせる。

「「３//① 要素を取得」」 const elm1 = document.getElementById("elm1"); 「「３//② 要素の50%が画面に交差したら」」 let options1 = ｛threshold:0.5｝; 「「３//③ インスタンス生成」」 const observer1 = new IntersectionObserver(callback1,options1); 「「３//④ 監視対象を指定」」 observer1.observe(elm1); 「「３//⑤ コールバック関数」」 function callback1(entries) < 「「３//⑥ 画面と交差してるなら」」 if(entries[0].isIntersecting) < 「「３//⑦ 要素にclassを追加」」 elm1.classList.add("huwa"); >>

コピペコード⬇︎。

「「３」」 #elm1 < transform:translateY(50%); opacity:0; >.huwa < animation:huwa 1.5s ease-out forwards; >@keyframes huwa < to < transform:initial; opacity:1; >> const elm1 = document.getElementById("elm1"); let options1 = ｛threshold:0.5｝; const observer1 = new IntersectionObserver(callback1,options1); observer1.observe(elm1); function callback1(entries) < if(entries[0].isIntersecting) < elm1.classList.add("huwa"); >>

コピペ用のコードです。 HTMLの 〜 内にそのまま流し込んで使うことができます。要素は好きなものを入れて、class名を「elm1」としてください。

単一要素（横ver）

「「３//② 要素の100%が画面に交差したら、にする。」」 let options1 = ｛ 「「１threshold:1」」 ｝;

もう１つの変更はJavaScriptのoptions1オブジェクト。 thresholdプロパティで、「要素の0.5(50%)が交差したら発動」にしていました。しかしこのままでは要素が「斜め下からフワッと」浮かんでしまいます。 なるべく真横にスライドさせたいので、「１(100%)が交差したら発動」に変更します。

この⬆︎ようになりました。 スクロールさせると、要素が右側から入ってきます。 複数の要素を左右にずらしておいたりすると、雰囲気あるものが作れそうですね。

コピペコード⬇︎。

「「３」」 #elm1 < transform:translateX(50%); opacity:0; >.huwa < animation:huwa 1.5s ease-out forwards; >@keyframes huwa < to < transform:initial; opacity:1; >> const elm1 = document.getElementById("elm1"); let options1 = ｛threshold:1｝; const observer1 = new IntersectionObserver(callback1,options1); observer1.observe(elm1); function callback1(entries) < if(entries[0].isIntersecting) < elm1.classList.add("huwa"); >>

複数をふわり。

複数要素（縦並び）

■ elm2.svg X3 縦方向に並んだ要素が、順にフワッと浮かんでくるものを作ってみましょう。

「「３//① class要素すべてを取得」」 const elm2 = document.querySelectorAll(".elm2"); 「「３//② optionはデフォルト」」 let options2 = ｛ ｝; const observer2 = new IntersectionObserver(callback2,options2); 「「３//③ 要素すべてを監視対象に」」 elm2.forEach(function(value) ｛ bbobserver2.observe(value); bb｝); function callback2(entries) < 「「３//④ 複数同時の交差にも対応」」 entries.forEach(function(value) ｛ if(value.isIntersecting) < value.target.classList.add("huwa"); >｝); >

① querySelectorAll( )を使って、指定したclassの要素をすべて取得します。 NodeListが返されるので、配列のように扱うことができます。

④ 監視対象が複数なので、同時にobserverが発動する可能性があります。 そのときのためにclassの付与もforEach( )でおこなっています。

ゆっくりと下までスクロールしていくと、３つの要素が徐々に浮かんできます。 項目やボタンに使うと良さそう。 動きが派手過ぎず、なおかつユーザの目に留まるという効果が得られます。

コピペコード⬇︎。

「「３」」 .elm2 < 「「３/*要素間の余白はお好みで。*/」」 margin-bottom:5%; transform:translateY(200%); opacity:0; >.huwa < animation:huwa 1.5s ease-out forwards; >@keyframes huwa < to < transform:initial; opacity:1; >> const elm2 = document.querySelectorAll(".elm2"); let options2 = ｛ ｝; const observer2 = new IntersectionObserver(callback2,options2); elm2.forEach(function(value) ｛ bbobserver2.observe(value); bb｝); function callback2(entries) < entries.forEach(function(value) ｛ if(value.isIntersecting) < value.target.classList.add("huwa"); >｝); >

複数要素（横並び）

let options3 = ｛ bb「「１threshold:0.5」」 bb｝;

コピペコード⬇︎。

「「３」」 .horizon < display:flex; >.elm3 < 「「３/* レイアウトは貼り付けた要素に合わせて調整してください。*/」」 width:40%; padding:5%; transform:translateY(20%); opacity:0; >.huwa < animation:huwa 1.5s ease-out forwards; >@keyframes huwa < to < transform:initial; opacity:1; >> const elm3 = document.querySelectorAll(".elm3"); let options3 = ｛threshold:0.5｝; const observer3 = new IntersectionObserver(callback3,options3); elm3.forEach(function(value) ｛ bbobserver3.observe(value); bb｝); function callback3(entries) < entries.forEach(function(value) ｛ if(value.isIntersecting) < value.target.classList.add("huwa"); >｝); >

時間差でふわっと。

横並び要素を時間差で。 コピペコード⬇︎。

「「３」」 .timelag < display:flex; width:90%; margin:0 auto; >.timelag img < 「「３/* レイアウトは貼り付けた要素に合わせて調整してください。*/」」 display:block; width:30%; padding:initial; margin:2%; opacity:0; transform:translateY(50%); >.huwa < animation:huwa 1.5s ease-out forwards; >@keyframes huwa < to < transform:initial; opacity:1; >> const timelag = document.querySelectorAll(".timelag"); const lagchild = document.querySelectorAll(".lagchild"); for(i = 0; i > let options5 = ｛ ｝; const observer5 = new IntersectionObserver(callback5,options5); lagchild.forEach(function(value) < observer5.observe(value); >); function callback5(entries) < entries.forEach(function(value) ｛ bbif(value.isIntersecting) < value.target.classList.add("huwa"); >｝) >

フルカバーのコード。

  • Vectornator 使い方。2020.01.01 無料の本格ベクターアプリはこちら。
  • CSSアニメーション03、プロパティ概要と一括指定について。2021.03.31 コードの短縮化←注意事項あり。
  • CSSアニメーション08、animation-directionで再生方向を指定。2021.05.05 アニメーションの順/逆再生や往復。

SVGでWeb Animations API。

2020.11.12 〽️ ネイティブJavaScriptでのアニメーション。

📎📎📎📎📎📎📎📎📎📎