JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener()

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

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

JavaScriptの .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 のプロパティでアニメーションを作るので、発動の時間やタイミング等々いじる場合はこれらのプロパティをいじればカスタマイズすることができます。