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で囲むこと。
関連記事
-
-
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
-
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
-
-
jQueryでimgタグのsrcを変える
やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...
-
-
モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法
モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...