CSSとJS。使い勝手の良いグラデーション・マーカー・アニメーション。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

マーカーでWebサイトにアクセントを。

CSS & JSによるマーカー。

サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。

汎用性があるのでスニペットとして使える。

グラデーション付きの、動きのあるマーカー。

ざっくりと、3ステップでOK。

  1. CSSで、マーカーの見た目と動きを作成。(class名「highlight」)
  2. JavaScriptで、スクロールによるマーカーの描画を開始。(class名「marker」)
  3. HTMLに、「highlight」を設定。

複数行にも対応しており、色やスピードなどはお好みでカスタマイズ可能。

下記をコピペするだけで動きます。


CSS

マーカーの見た目と動きを設定。backgroundでマーカーとなるグラデーション、transitionで動きを付ける。

.highlight {
 display: inline;
 position: relative;
 background-image: linear-gradient(90deg, rgba(242, 187, 3, 0.618) /*#f2bb03*/, rgb(241, 93, 0) /*#f15d00*/);
 background-repeat: no-repeat;
 background-position: bottom left;
 background-size: 0 20%;
 transition-property: all;
 transition-duration: 1s;
 transition-delay: 0s;
 transition-timing-function: ease-in-out;
}
.highlight.marker {
 background-size: 100% 20%;
}

ダークモード時にもテキストが読みやすいよう、今回マーカーの太さは控えめに。もし太くしたい場合はbackground-sizeの20%を50%などに上げればOK。

JS

スクロールにより、classの追加・削除を設定。

$(window).scroll(function (){
  $(".highlight").each(function(){
    let hit		= $(this).offset().top;
    let scroll	= $(window).scrollTop();
    let wHeight	= $(window).height();

    if (scroll > hit - wHeight + wHeight/100){
      $(this).addClass("marker");
    } else {
     $(this).removeClass("marker");
    }
   });
});

HTMLのタグにclassを指定。

HTMLタグに「highlight」を指定する。

後は用途に応じたタグでくくって、classを設定するだけ。

HTML文法的には、通常、hタグやpタグなどの中に、フローコンテンツ、インライン要素としてのタグを使用する。

HTML

例)

strongタグでくくりたいとき。

<strong class="highlight">テキストテキストテキスト</strong>

例)

spanタグでくくりたいとき。

<span class="highlight">テキストテキストテキスト</span>

マーカーの実装例。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。複数行にも対応しています。

マーカーでアクセントを。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。