勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

  jQuery JavaScript CSS

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーションを実装しているサイトを見かけることがある。また、ページスクロールし当該テキスト部分が表示された時点でマーカーが引かれるという仕様。調べてみたところjQueryとCSSで実装できた。以下に実装方法をメモ。

 

サンプル

https://taitan916.info/sample/text_marker/

 

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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 JavaScript CSS

  関連記事

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...

jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...

jQueryからAjax経由でPHPにリクエストしCookieを操作する方法

先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...

S