CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。
Contents - 目次
CSS & JSによるマーカー。
サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。
汎用性があるのでスニペットとして使える。
グラデーション付きの、動きのあるマーカー。
ざっくりと、３ステップでOK。
- CSSで、マーカーの見た目と動きを作成。（class名「highlight」）
- JavaScriptで、スクロールによるマーカーの描画を開始。（class名「marker」）
- HTMLに、「highlight」を設定。
複数行にも対応しており、色やスピードなどはお好みでカスタマイズ可能。
下記をコピペするだけで動きます。
CSS
マーカーの見た目と動きを設定。backgroundでマーカーとなるグラデーション、transitionでアニメーションの動きを付ける。
backgroundプロパティやtransitionプロパティは値を一括指定できるが、fontプロパティのように、色々増えると逆にわかりにくくなってしまうことがあるため今回は分割で指定。
（※レンダリングにはほとんど関係しないため、ブラウザの読み込み速度にもまず影響しない。）
.highlight {
display: inline;
position: relative;
background-image: linear-gradient(90deg, rgba(242, 187, 3, 0.618) /*#f2bb03*/, rgb(241, 93, 0) /*#f15d00*/);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0 20%;
transition-property: all;
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: ease-in-out;
}
.highlight.marker {
background-size: 100% 20%;
}
ダークモード時にもテキストが読みやすいよう、今回マーカーの太さは控えめに。もし太くしたい場合はbackground-sizeの20%を50%などに上げればOK。
アニメーションが完了するまでの時間も、transition-durationで調整できる。
JS
スクロールにより、classの追加・削除を設定。
$(window).scroll(function (){
$(".highlight").each(function(){
let hit = $(this).offset().top;
let scroll = $(window).scrollTop();
let wHeight = $(window).height();
if (scroll > hit - wHeight + wHeight/100){
$(this).addClass("marker");
} else {
$(this).removeClass("marker");
}
});
});
HTMLのタグにclassを指定。
HTMLタグに「highlight」を指定する。
後は用途に応じたタグでくくって、classを設定するだけ。
HTML文法的には、通常、hタグやpタグなどの中に、フローコンテンツ、インライン要素としてのタグを使用する。
HTML
例）
strongタグでくくりたいとき。
<strong class="highlight">テキストテキストテキスト</strong>
例）
spanタグでくくりたいとき。
<span class="highlight">テキストテキストテキスト</span>
マーカーの実装例。
複数行にも対応。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
