蛍光ペンで線を引くようなアニメーション
今回は、蛍光ペンで線を引くようなアニメーションを作ります。
実装目標の確認
スクロールするとここにマーカーが入ります
画面をスクロールしていくと、文章の中の指定した部分にだけテキストに色が付きます。
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の部分を変えてください。
数字が大きくなれば幅が太く、小さくなれば幅が細くなります。
またマーカーを引く速度はtransitionの1sの部分で変えることができます。
※マーカーの太さを .7em と設定しているのですが、最初のデモではなぜか効いていません…
私のPC上では下半分くらいだけに色が付いているのですが、解決できませんでした。
もし原因がわかったら追記します。
まとめ
いかがでしたか？
上手くマーカーアニメーションを取り入れることで、読者の注意を引くことができます。
あまりに使いすぎると画面がごちゃごちゃしてよくありませんが、ここぞ！というところで使ってみてはいかがでしょうか？
最後までご覧いただきありがとうございました。
