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で囲むこと。
関連記事
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法
jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...
-
-
Lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
-
-
アンカーリンクでURLに「#hoge」のようなパラメータを残さずスクロールさせる方法
アンカータグをクリックしてもブラウザのURL欄に「#hoge」のようなハッシュを ...
-
-
jQueryで新しく追加した要素に対してイベントがきかない場合の対応
jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...