jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーションを実装しているサイトを見かけることがある。また、ページスクロールし当該テキスト部分が表示された時点でマーカーが引かれるという仕様。調べてみたところjQueryとCSSで実装できた。以下に実装方法をメモ。
サンプル
https://taitan916.info/sample/text_marker/
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>jQueryとCSSで指定したテキストに対してラインマーカーを引くサンプル</title>
<style>
.marker{
display: inline;
position: relative;
background-image: linear-gradient(90deg, #ff6, #ff6);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0 40%;
transition: all 1s ease-in-out;
}
.marker.active{
background-size: 100% 40%;
}
.mb-200{
margin-bottom:200px;
}
</style>
</head>
<body>
<div class="mb-200">
テキスト
</div>
<div class="mb-200">
テキスト
</div>
<div class="mb-200">
テキスト
</div>
<div class="mb-200">
<span class="marker">
マーカーテキストマーカーテキストマーカーテキストマーカーテキストマーカーテキストマーカーテキスト
</span>
</div>
<div class="mb-200">
テキスト
</div>
<div class="mb-200">
<span class="marker">
マーカーテキストマーカーテキストマーカーテキストマーカーテキストマーカーテキストマーカーテキスト
</span>
</div>
<div class="mb-200">
テキスト
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(window).scroll(function (){
$(`.marker`).each(function(){
if( $(window).scrollTop() > $(this).offset().top - $(window).height() ){
$(this).addClass(`active`);
}
});
});
</script>
</body>
</html>
マーカーを引きたいテキストを.markerで囲むこと。
関連記事
-
-
jQselectableでセレクトボックスをリッチにする
入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...
-
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...
-
-
jQueryでループを抜けようと(breakしようと)するとエラーになる際の対応方法
jQueryでループを抜けようと(breakしようと)すると「Uncaught ...
-
-
ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
Flashを用いずJavaScriptでコピー&カット機能を実装する方法
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...