【JavaScript】スクロールアニメーションを実装する

2024年2月15日2024年2月23日

自動＆ループするスクロールアニメーションを実装したい！！

というわけで今回は、GSAPで自動＆ループするアニメーションをご紹介します！
疑似要素を動かす実装ですので、色々応用もできる内容となっております。

自動スクロールアニメーションを実装する

今回の実装は、sp表示の時に画面下部に表示させるようなスクロールバーとなってます。
白い縦長のバーに疑似要素で丸を付けて動かすような作りです。

疑似要素をJavaScriptで動かすには？

そもそもJavaScriptはDOM要素の操作が得意です。
DOM要素の説明はこちら

ですが、疑似要素はDOM要素ではありません。
GSAPはJavaScriptのライブラリなので、疑似要素の操作はできません。

ではどうするか？
『カスタムプロパティ』を使用します！！
カスタムプロパティを使用することで疑似要素でも動かすことができるようになります！

コード紹介（CSS）

ではコードを見ていきましょう！！

【CSS】

.scroll_bar {
    margin-top: 10px;
    width: 1px;
    height: 35px;
    background-color: $white;
    position: relative;
    --scroll: 0;
}

.scroll_bar::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    width: 7px;
    height: 7px;
    background-color: $gold;
    border-radius: 50%;
    z-index: 2;
}

.scroll_bar::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;

    width: 25px;
    height: 25px;
    background-color: $hover-gold;
    border-radius: 50%;
    z-index: 1;
    opacity: .15;
}

.scroll_bar::before,
.scroll_bar::after {
    transform: translate(-50%, var(--scroll));
}

「.scroll_bar」は白の縦バーです。
「.scroll_bar::before」は中の濃い丸、「.scroll_bar::after」は外の薄い丸となっております。

まずやりたい動きとしては、二つの丸を下に動かしたい、です。
ここでは、transformを使って丸を下に動かします。

カスタムプロパティ

カスタムプロパティ（CSSの変数）とは、CSSの値の再利用性と冗長性の削減を目的として、CSSドキュメント内で定義される値のことです。

変数の定義の仕方は、先頭にダブルハイフン（–）を付けます。
今回は、「–scroll: 0;」を設定してます。「–scroll」に0を代入しております。

そして、次は疑似要素にtransform: translate(-50%, var(–scroll));とします。
X軸は真ん中で動かさず、Y軸を上下に動かすことでアニメーションを完成させたいんでしたね？
つまり、translateY: ;の値を変更する為に、カスタムプロパティを使用するわけです。

コード紹介（JavaScrpt）

では続いてJavaScrpt側のコードをみていきましょう。

【JavaScript】

document.addEventListener('DOMContentLoaded', function () {

　let menuTL = gsap.timeline({
      repeat: -1,
      repeatDelay:1
  });

  menuTL
    .to('.scroll .scroll_bar',{'--scroll':'28px',delay:1,duration:.8});
  });

GSAPのtimelineに関しては私のブログで紹介しておりますのでご覧ください↓
【GSAPを使って簡単なアニメーションを実装する】

timelineに「repeat: -1」と「repeatDelay:1」を設定してます。

「repeat: -1」･･･　アニメーションを無限にリピートさせる
「repeatDelay: 1」･･･　アニメーション間の時間を設定する。この場合は1秒。

あとはいつものGSAPの書き方でOKです。
「’–scroll’」の値を28pxに変化させる記述ですね！　Y軸0　→　Y軸28px　に変化します。
そして、1秒経ったらまたY軸0に戻ってまた28px･･･とループします。