.addEventListener()

JavaScriptの.addEventListener()のスクロールで左から右に背景色が伸びてテキスト表示

2022年2月22日2022年3月23日 3分

JavaScriptの .addEventListener() のスクロールで、その要素に到達した時にアニメーションでテキストの上を背景色が覆うスニペットを作りました。

ごくシンプルな動きで、そこまで主張が強くないアニメーションです。

.addEventListener()
テキスト表示のサンプル
サンプルのコード

.addEventListener()

JavaScriptの .addEventListener()は、この記事で使っているスクロールイベントだけではなく、
クリックなどのイベントを設定することができるメソッドです。

.addEventListener('イベント', 処理（関数）, オプション)

上記のようにしてイベントを登録することで、処理を加えることができます。

できることが格段に増えるメソッドなので、ぜひ覚えておきましょう。

かかかず

めちゃ便利なメソッドです。

テキスト表示のサンプル

早速サンプルです。

スクロールしてテキストのエリアに到達すると、テキストを覆うようにして背景色の帯が左から右に移動してテキストが表示されます。

TITLE TEXT

かかかず

もう1回動きを見たい場合は、下方向へテキストが見切れる程スクロールしてから戻ってみてください。また動きます。

サンプルのコード

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは p タグの中に span タグで文字列を入れた簡単な記述です。

<p class="effect">
<span>TITLE TEXT</span>
</p>

p タグにつけたclassの「effect」は、JavaScriptの「target」の関数で使うので、この変えるclass名を場合はJavaScriptの表記も一緒に変えるようにしましょう。

JavaScript

JavaScriptは以下の通りです。ざっくりとした全体感で言うと「対象のclassを指定 → ウィンドウの高さを取得 → 表示域に入ったらclass付与 → 表示域から外れたらclass削除」で、動きます。

const fadeIn = function(){

    const target = document.getElementsByClassName('effect');
    const position = Math.floor(window.innerHeight * .75);

    for (let i = 0; i < target.length; i++) {

        let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
        let offsetBottom = Math.floor(target[i].getBoundingClientRect().bottom);

        if (offsetTop < position) {
            target[i].classList.add('scroll-in');
        }
        
        if(offsetBottom < 0){
            target[i].classList.remove('scroll-in');
        }
    }
}
window.addEventListener('scroll', fadeIn, false);

この全体感の中で、「effect」のclassを持つタグに target[i].classList.add('scroll-in'); で「scroll-in」のclassを付与して、それに連動したCSSとセットでアニメーションをさせます。

かかかず

このように、スクロールでclass名を制御してアニメーションさせているコードです。

CSS

CSSはアニメーション系の記述も含むので、コード量は多少多めです。

p.effect {
    margin: 0;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04rem;
}
p.effect span {
    display: inline-block;
    padding: 4px 20px;
    position: relative;
}
p.effect span,
p.effect span::after {
  animation-delay: var(--animation-delay, 2s); /* アニメーションの開始タイミング */
  animation-iteration-count: var(--iterations, 1); /* 再生される回数 */
  animation-duration: var(--duration, 800ms); /* 完了するまでの所要時間 */
  animation-fill-mode: both; /* 実行の前後 */
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* タイミングの指定 */
}

p.effect.scroll-in span {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
}
p.effect.scroll-in span::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #252525;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

この中の animation と @keyframe のプロパティでアニメーションを作るので、発動の時間やタイミング等々いじる場合はこれらのプロパティをいじればカスタマイズすることができます。