トップへ戻る
BLOGS

JS スクロールしたときにのみ実行される様にクラス付与する

JS スクロールしたときにのみ実行される様にクラス付与する

今回はサイトトップページにアニメーションを追加してほしいとの要望を受けての案件の中で

スクロール中にのみSVGアニメーションを出現させる

という内容があった為これを記録として残しておきます。

SVGアニメーションとは予めイラストレーターなどで作成しておいたSVGの画像に対してCSSとJSでPathをなぞらせることでまるで生きているかのように画像を動かす手法の一つであります。

今回はSVGやそれを動かすJSはまた今度にして

※そもそもイラストレーター持ってない、、

スクロールした際の挙動に焦点を当ててJSを記述していきます。

一応コピペできるようにHTMLから全て貼っていきます。

index.html

<svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 50" enable-background="new 0 0 1000 50" xml:space="preserve">
  <path fill="rgba(0, 125, 150, 0.3)">
    <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="
      M1920.5,28.1c-55.6,14.7-90.5,16.5-144,0c-49.9-15.4-70.8-6.4-121.1,4.7c-52.3,11.6-73.9-24.9-122-31.7
			c-41.2-5.9-69.6,35.3-110.5,35.1c-39.2-0.1-48.4-18.1-99.7-18.1c-60.2,0-89.3,23.5-132.7,10.4c-50.7-15.3-75.5-20.6-124.5-6.3
			c-50.6,14.8-91,5.9-140.1-8c-93.8-26.5-163,15-254.5,16.9C592,32.7,525-7.1,442.9,13.3c-86.5,21.5-151,26.2-239.1,2.4
			C138.3-2,58.7-8.4,0.5,28.1v29h1920V28.1z;
      
      M1920.5,26.1c-55.6,14.7-95.5,18.5-149,2c-49.9-15.4-65.8-6.4-116.1,4.7c-52.3,11.6-85.9-24.9-134-31.7
			c-41.2-5.9-67.6,35.3-108.5,35.1c-39.2-0.1-48.4-19.1-99.7-19.1c-60.2,0-89.3,24.5-132.7,11.4c-50.7-15.3-75.5-20.6-124.5-6.3
			c-50.6,14.8-111,2.9-160.1-11c-93.8-26.5-143,15-234.5,16.9C582,29.7,495-8.1,412.9,12.3c-86.5,21.5-133,35.2-221.1,11.4
			C126.3,6,58.7-10.4,0.5,26.1v29h1920V26.1z;
      
      M1920.5,23.8c-55.6,14.7-115.5,18.5-169,2c-49.9-15.4-65.8-6.4-116.1,4.7c-52.3,11.6-85.9-18.9-134-25.7
			c-41.6-5.9-67.6,27.3-108.5,27.1c-39.2-0.1-51.4-17.1-102.7-17.1c-60.2,0-83.3,27.5-126.7,14.4C1112.8,13.9,1090,1.6,1041,15.9
			c-50.6,14.8-106,6.9-155.1-7c-93.8-26.5-153,18-244.5,19.9C562,30.4,479-7.4,396.9,13c-86.5,21.5-137,29.2-225.1,5.4
			C106.3,0.7,58.7-12.7,0.5,23.8v29h1920V23.8z;
			
      M1920.5,26.1c-55.6,14.7-95.5,18.5-149,2c-49.9-15.4-65.8-6.4-116.1,4.7c-52.3,11.6-85.9-24.9-134-31.7
			c-41.2-5.9-67.6,35.3-108.5,35.1c-39.2-0.1-48.4-19.1-99.7-19.1c-60.2,0-89.3,24.5-132.7,11.4c-50.7-15.3-75.5-20.6-124.5-6.3
			c-50.6,14.8-111,2.9-160.1-11c-93.8-26.5-143,15-234.5,16.9C582,29.7,495-8.1,412.9,12.3c-86.5,21.5-133,35.2-221.1,11.4
			C126.3,6,58.7-10.4,0.5,26.1v29h1920V26.1z;
			
      M1920.5,28.1c-55.6,14.7-90.5,16.5-144,0c-49.9-15.4-70.8-6.4-121.1,4.7c-52.3,11.6-73.9-24.9-122-31.7
			c-41.2-5.9-69.6,35.3-110.5,35.1c-39.2-0.1-48.4-18.1-99.7-18.1c-60.2,0-89.3,23.5-132.7,10.4c-50.7-15.3-75.5-20.6-124.5-6.3
			c-50.6,14.8-91,5.9-140.1-8c-93.8-26.5-163,15-254.5,16.9C592,32.7,525-7.1,442.9,13.3c-86.5,21.5-151,26.2-239.1,2.4
			C138.3-2,58.7-8.4,0.5,28.1v29h1920V28.1z;">
    </animate>
  </path>
  <path fill="rgba(50, 125, 150, 0.2)">
    <animate dur="7s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="
      M1920.5,23.8c-55.6,14.7-115.5,18.5-169,2c-49.9-15.4-65.8-6.4-116.1,4.7c-52.3,11.6-85.9-18.9-134-25.7
			c-41.6-5.9-67.6,27.3-108.5,27.1c-39.2-0.1-51.4-17.1-102.7-17.1c-60.2,0-83.3,27.5-126.7,14.4C1112.8,13.9,1090,1.6,1041,15.9
			c-50.6,14.8-106,6.9-155.1-7c-93.8-26.5-153,18-244.5,19.9C562,30.4,479-7.4,396.9,13c-86.5,21.5-137,29.2-225.1,5.4
			C106.3,0.7,58.7-12.7,0.5,23.8v29h1920V23.8z;
			
      M1920.5,26.1c-55.6,14.7-95.5,18.5-149,2c-49.9-15.4-65.8-6.4-116.1,4.7c-52.3,11.6-85.9-24.9-134-31.7
			c-41.2-5.9-67.6,35.3-108.5,35.1c-39.2-0.1-48.4-19.1-99.7-19.1c-60.2,0-89.3,24.5-132.7,11.4c-50.7-15.3-75.5-20.6-124.5-6.3
			c-50.6,14.8-111,2.9-160.1-11c-93.8-26.5-143,15-234.5,16.9C582,29.7,495-8.1,412.9,12.3c-86.5,21.5-133,35.2-221.1,11.4
			C126.3,6,58.7-10.4,0.5,26.1v29h1920V26.1z;
      
      M1920.5,28.1c-55.6,14.7-90.5,16.5-144,0c-49.9-15.4-70.8-6.4-121.1,4.7c-52.3,11.6-73.9-24.9-122-31.7
			c-41.2-5.9-69.6,35.3-110.5,35.1c-39.2-0.1-48.4-18.1-99.7-18.1c-60.2,0-89.3,23.5-132.7,10.4c-50.7-15.3-75.5-20.6-124.5-6.3
			c-50.6,14.8-91,5.9-140.1-8c-93.8-26.5-163,15-254.5,16.9C592,32.7,525-7.1,442.9,13.3c-86.5,21.5-151,26.2-239.1,2.4
			C138.3-2,58.7-8.4,0.5,28.1v29h1920V28.1z;
      
      M1920.5,26.1c-55.6,14.7-95.5,18.5-149,2c-49.9-15.4-65.8-6.4-116.1,4.7c-52.3,11.6-85.9-24.9-134-31.7
			c-41.2-5.9-67.6,35.3-108.5,35.1c-39.2-0.1-48.4-19.1-99.7-19.1c-60.2,0-89.3,24.5-132.7,11.4c-50.7-15.3-75.5-20.6-124.5-6.3
			c-50.6,14.8-111,2.9-160.1-11c-93.8-26.5-143,15-234.5,16.9C582,29.7,495-8.1,412.9,12.3c-86.5,21.5-133,35.2-221.1,11.4
			C126.3,6,58.7-10.4,0.5,26.1v29h1920V26.1z;
			
      M1920.5,23.8c-55.6,14.7-115.5,18.5-169,2c-49.9-15.4-65.8-6.4-116.1,4.7c-52.3,11.6-85.9-18.9-134-25.7
			c-41.6-5.9-67.6,27.3-108.5,27.1c-39.2-0.1-51.4-17.1-102.7-17.1c-60.2,0-83.3,27.5-126.7,14.4C1112.8,13.9,1090,1.6,1041,15.9
			c-50.6,14.8-106,6.9-155.1-7c-93.8-26.5-153,18-244.5,19.9C562,30.4,479-7.4,396.9,13c-86.5,21.5-137,29.2-225.1,5.4
			C106.3,0.7,58.7-12.7,0.5,23.8v29h1920V23.8z;">
    </animate>
  </path>
</svg>

呪文のように長く恐ろしいですが全て座標の指示になるので仕方ありません。

そしてJSもまとめて書きます。

index.js

// ウェーブアニメーション関数
const scrollAnimation = (Element) => {
  let timeoutId;
  window.addEventListener('scroll',function() {
    const $wave = document.querySelector(Element);
    $wave.classList.add('action');
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function () {
    $wave.classList.remove("action");
  }, 500);
});
}
scrollAnimation('.wave');

ここからJSの解説します。

let timeoutId;こちらの変数を定義しておきます。

window.addEventListener('scroll',function() {
    const $wave = document.querySelector(Element);
    $wave.classList.add('action');

まずはアドイベントリスナーを仕込んでおき、スクロールしたらセレクターで指定した要素にクラスを付与します。

clearTimeout(timeoutId);は一旦置いておいて

timeoutId = setTimeout(function () {
    $wave.classList.remove("action");
  }, 500);

こちらは先に用意しておいた変数に0.5秒経ったらさっき付与したクラスを削除する関数です。

これでスクロールした後にまた付け外しが可能になる訳ですが、画面スクロールというのは連続でマウス操作したりフリックしたりする訳で、必ず0.5秒後に消えてしまっては困るわけです。

そこでさっきの記述clearTimeout(timeoutId);を入れておくことで先に設定したタイマーをリセットします。

その後はまた同じ処理が走る事でタイマーがセットされスクロールしなくなったらクラスが外れるということです。

後はCSSでこちらのクラスに指定を与えれば完了ですね。

style.css

/* ウェーブアニメーション */
@keyframes scrollWave {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.wave {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  animation-duration: 4s;
  animation-timing-function: ease-out;
  animation-direction: alternate;
  animation-iteration-count:infinite;
}
.wave.action {
  animation-name: scrollWave;
}

今回はここまでにします。

お疲れさまでした。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA