ブログの記事内で、強調をしたい箇所によく使われる「蛍光マーカー風の下線」を、スクロールして表示領域に入ったら表示されるスニペットをネイティブなJavaScriptで作ってみました。
色の変更や、カスタマイズも比較的簡単なので参考にしてみてください。
.getBoundingClientRect()
JavaScriptの .getBoundingClientRect() は、要素のサイズと位置を取得するメソッドです。
詳細はかなり難しく、事細かになってしまうので詳細はわかりやすい解説をしてくれている「MDN」さんの解説記事をご覧ください。
ブラウザの表示領域を取得するので、便利なメソッドです。
蛍光マーカー風の下線を引いたサンプル
早速サンプルです。
スクロールして表示領域に要素が入った時、指定した箇所に蛍光ペン風の下線が引かれる形です。
下線を引く要素
下線を引く要素2。ここは青いマーカーです。
下線を引く要素3。ここは緑色のマーカーです。下線を引く要素3。ここは緑色のマーカーです。下線を引く要素3。ここは緑色のマーカーです。
文章の間で黄色いラインマーカーを引くにはこのようにします。
下線の色は黄色・青・緑の「3色」で、これらはCSSで色を指定しています。
表示領域に入る度に動くコードなので、見切れた後にまたスクロールしても下線が表示されます。
下線サンプルのコード
HTMLは簡単で、下線を引きたい箇所に span タグで「lineMarker」のclassをつけてあげるだけです。
サンプルでは、以下のように p タグの中に下線を引きたい箇所に span タグでつけています。
<p><span class="lineMarker">下線を引く要素</span></p>
<p><span class="lineMarker lineBlue">下線を引く要素2。ここは青いマーカーです。</span></p>
<p><span class="lineMarker lineGreen">下線を引く要素3。ここは緑色のマーカーです。下線を引く要素3。ここは緑色のマーカーです。下線を引く要素3。ここは緑色のマーカーです。</span></p>
<p>文章の間で<span class="lineMarker">黄色いラインマーカー</span>を引くにはこのようにします。</p>続いてJavaScriptのコードですが、まずはじめに .getElementsByClassName でclassを追加する要素を取得します。ここでは、「lineMarker」のclassがこれに当たります。
そして、.getBoundingClientRect() で要素の位置を取得して、ループの中にその位置を通過した場合の処理内容を記述しています。このスニペットでは、「scroll-in」と言うclassを付与します。
const scrollIn = function(){
const target = document.getElementsByClassName('lineMarker');
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', scrollIn, false);CSS
CSSの蛍光ペンにあたる部分は、background-imageのプロパティにlinear-gradient を使うので、FireFoxとwebkitブラウザ向けにベンダープレフィックス付きのものを合わせて指定します。
/* ラインマーカー */
.lineMarker.scroll-in{
background-position: -100% 0.7rem;
}
.lineMarker {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-repeat: repeat-x;
background-size: 200% .7em;
background-position: 0 .8em;
transition: all 1.2s ease;
font-weight: bold;
}
.lineBlue {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(154,218,255) 10%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(154,218,255) 10%);
background-image: linear-gradient(left, transparent 50%, rgb(154,218,255) 10%);
}
.lineGreen {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(152,255,155) 10%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(152,255,155) 10%);
background-image: linear-gradient(left, transparent 50%, rgb(152,255,155) 10%);
}上記のように色味を追加する場合は、任意の名前でclass名を作り、HTMLへのspanタグへそのclassを追加してあげればOKです。
