蛍光ペンで線を引く

2023年10月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、スクロールに応じて蛍光ペンで線を引くエフェクトをやってみたいと思います。

参考：WebDev Tech｜【CSS＆JS】スクロールに合わせて蛍光ペン風マーカーを引く方法

参考：bbp｜全22色！CSSで蛍光ペンマーカーで線引したような雰囲気を出す。

一度だけ

参考元のサイトがとても分かりやすく説明してくれていましたが、polyfillのintersection-observer.jsというのがよくわからなかったのでそこだけスルーしました。

まずは線を引きたい場所にjs-markerというクラスを付与します。

<span class="js-marker">ここに蛍光ペンで線を引く</span>

以下のCSSを記述します。

.js-marker {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffccff, #ffccff);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 50%;
  transition: all 1s ease-in-out;
}

.js-marker.inview {
  background-size: 100% 50%;
}

色を蛍光ペンのピンク風にして、縦幅を50%にしてみました。

最初は線の横幅は0%で、js-markerにinviewというクラスが追加されたら1秒かけて100%に伸びる、ということみたいです。

document.addEventListener('DOMContentLoaded', function() {
  var markerText = document.querySelectorAll('.js-marker');
  var markerTextArr = Array.prototype.slice.call(markerText);
  var cb = function(entries, observer) {
    entries.forEach((entry) => {
      if(entry.isIntersecting) {
        entry.target.classList.add('inview');
        observer.unobserve(entry.target);
      }
    });
  }
  var options = {
    rootMargin: "-100px 0px"
  }
  var io = new IntersectionObserver(cb, options);
  io.POLL_INTERVAL = 100;
  markerTextArr.forEach(el => {
    io.observe(el);
  });
});

説明を読んでもサッパリわからないィ

コールバック？forEach？何の事です？

何度でも

スクリプトの一部を書き換えると、js-markerが画面外に出たらinviewが外れて線が消えるようにできます。

document.addEventListener('DOMContentLoaded', function() {
  var markerText = document.querySelectorAll('.js-marker');
  var markerTextArr = Array.prototype.slice.call(markerText);
  var cb = function(entries, observer) {
    entries.forEach((entry) => {
      if(entry.isIntersecting) {
        entry.target.classList.add('inview');
      }else {
        entry.target.classList.remove('inview');
      }
    });
  }
  var options = {
    rootMargin: "-100px 0px"
  }
  var io = new IntersectionObserver(cb, options);
  io.POLL_INTERVAL = 100;
  markerTextArr.forEach(el => {
    io.observe(el);
  });
});

まとめ

線が引かれると目を引きますね！

蛍光ペンの色をいろいろ試してみようと思います。