Webデザイナーブログから学ぶホームページ制作

ホームページにおいて、ユーザーエクスペリエンスの向上と視覚的な魅力を追求するために、さまざまなアニメーション効果が利用されています。
その中でも、「JavaScript」を設定してアニメーションを実装スクロール時にテキストの背景にマーカー（線）を引くアニメーションは、ユーザーの目を引きつける効果的な手法です。

テキストマーカーアニメーションは、特定のテキスト部分を目立たせるだけでなく、ユーザーにとって情報の重要性や優先順位を視覚的に示す効果もあります。たとえば、重要な見出しやキーワード、特筆すべきポイントなどにマーカーアニメーションを適用することで、ユーザーはスクロールに伴って自然に視線を引き付けられるでしょう。
テキストの背景にマーカー（線）を引くアニメーションは、CSSとJavaScriptで指定することで実装が可能です。

今回は、CSSで画面スクロールしたらテキストの背景にマーカーがひかれるアニメーションの実装方法を解説します。

CSSでテキストにテキストの背景にマーカー（線）を実装する場合は、「background」や「transition」のプロパティを使用して配置します。
テキストの背景にマーカーを実装させるためには、CSSに「background」プロパティを記述します。
追加した「background」プロパティにマーカー（線）をひく要素を記述します。

【テキストマーカー実装方法】
1.「HTML」と「CSS」でテキストの背景にマーカーを配置
2.「JavaScript」を設定してアニメーションを実装

HTMLでテキストを含む要素を作成し、CSSでその要素にマーカーのスタイルを設定します。テキストを含む要素に対して疑似要素を使用し、その疑似要素に背景色や形状を指定することでマーカーを実現します。
テキストマーカーをひく場合は、「background」プロパティに「linear-gradient」の値を指定することで実装ができます。

また、画面をスクロールしてアニメーション表示させる場合は、「JavaScript」を設定する必要があるため、htmlコード内に「scrollmarker」を追記いたします。

<span class="markertest scrollmarker">テキストマーカー</span>

.markertest {
    font-weight:bold;
    background: -webkit-linear-gradient(left, rgb(255,233,50) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255,233,50) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255,233,50) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.markertest.is-active{
    background-position: 0% .5em;
}

画面をスクロールしてアニメーション表示させる場合は、「JavaScript」を追加する必要があります。 「JavaScript」には、画面をスクロールした際に、htmlで指定したテキストにマーカーをひくアニメーションを実装するためのコードを記載します。
作成した「JavaScript」はヘッダー内に記述してアニメーションコードを読み込む設定を行います。

$(window).scroll(function (){
    $(".scrollmarker").each(function(){
      var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
      var scroll = $(window).scrollTop(); //スクロールの位置を取得
      var windowHeight = $(window).height(); //ウインドウの高さを取得
      if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
        $(this).addClass('is-active'); //クラス「active」を与える
      }
    });
});

テキストマーカー

マーカーのスタイルは自由にカスタマイズできます。背景色や形状、サイズを変更することで、魅力的なマーカー効果を実現できます。また、アニメーションを追加することも可能で、スクロールやホバーなどのイベントに反応してマーカーをアニメーションさせることができ、工夫ができるため記事の内容に目を引かせるためには効果的な方法です。

この方法はHTMLとCSSだけで実現でき、JavaScriptなどのプログラミング言語を使用する必要はありません。そのため、ウェブページの読み込み速度やパフォーマンスに影響を与えず、簡単に実装することができます。

具体的な手順とコード例を示し、テキストの背景にマーカーを配置する方法を詳しく解説しました。これを参考にして、魅力的なマーカーアニメーションを作成してください。