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で囲むこと。
関連記事
-
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
-
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...