申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

blog

home blog 蛍光ペンで線を引くようなアニメーション

蛍光ペンで線を引くようなアニメーション

今回は、蛍光ペンで線を引くようなアニメーションを作ります。

目次

  1. 実装目標の確認
  2. HTML & CSS & JavaScript コード例
  3. コード解説
  4. まとめ

実装目標の確認

スクロールするとここにマーカーが入ります

画面をスクロールしていくと、文章の中の指定した部分にだけテキストに色が付きます。

HTML & CSS & JavaScript コード例

<p>スクロールすると<span class="marker">ここにマーカーが入ります</span></p>
.marker {
  background-image: linear-gradient( to right, #F2F013 50%, transparent 50%);
  background-position: 100% 100%;
  background-size: 200% .7em;
  transition: all 1s ease-in-out;
}

.marker.active{
  background-position: 0% 100%;
}
const marker = document.querySelectorAll('.marker');
const markerArray = Array.prototype.slice.call(marker);
const markerPosition = 300;

window.addEventListener('scroll', function() {
  markerArray.forEach(function(value) {
    if(value.getBoundingClientRect().top < window.screen.height - markerPosition) {
      value.classList.add('active');
    }
  });
});

コード解説

// class名がmarkerの要素をすべて取得
const marker = document.querySelectorAll('.marker');

// 上で取得したのはNodelistなので配列に変換(※IE対応)
const markerArray = Array.prototype.slice.call(marker);

// 対象が画面下辺から何px入ったところでアニメーションをスタートするか
const markerPosition = 300;
// スクロールされたときのイベント
window.addEventListener('scroll', function() {
  markerArray.forEach(function(value) {

    // 対象が指定した位置に来たら、activeクラス付与
    if(value.getBoundingClientRect().top < window.screen.height - markerPosition) {
      value.classList.add('active');
    }

  });
});

マーカーの太さを変える場合はbackground-size.7emの部分を変えてください。

数字が大きくなれば幅が太く、小さくなれば幅が細くなります。

またマーカーを引く速度はtransition1sの部分で変えることができます。

※マーカーの太さを .7em と設定しているのですが、最初のデモではなぜか効いていません…

私のPC上では下半分くらいだけに色が付いているのですが、解決できませんでした。

もし原因がわかったら追記します。

まとめ

いかがでしたか?

上手くマーカーアニメーションを取り入れることで、読者の注意を引くことができます。

あまりに使いすぎると画面がごちゃごちゃしてよくありませんが、ここぞ!というところで使ってみてはいかがでしょうか?

最後までご覧いただきありがとうございました。