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で画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...
-
-
amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法
amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...
-
-
jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...
-
-
モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法
モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...
-
-
jQueryでコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...