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にて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法
あるサイトのソースコードを拝見しているとjQueryで$.parseHTML() ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...