デザイン ブログ

スクロールで開始！CSSとjqueryで作るマーカー（蛍光ペン）アニメーション

投稿日：

ブログで目立たせたい部分にマーカー（蛍光ペン）をぬったように色をつけるのを、よく見かけますね。
みんながやっているから私も…とマーカーを付けているあなた、何か変化をつけたくないですか？

[sc name="ma"]そのマーカーだけをアニメーションさせる方法をお伝えします。
線を引いているようにアニメーションします。[sc name="ma_close"]


マーカー部分がスクロールして視界に入ったらアニメーションをするやり方です。

あなたのブログに個性が出て、他のブログと差がつけられますよ！
コピペで出来ますので安心してください。

 

これ簡単にできそうと思ったけど、意外と情報が少なくて大変だったのよ…

※追記　はじめは分かってなくてあいまいな文章書いてましたが、2日ぐらい寝たら理解できたので、全面的に書き直しました。
以前のものは忘れてください←

 

スポンサーリンク

WebCamp

 

スクロールして視界に入ったら、マーカー部分をアニメーションさせたい

 

さてこちらのサイトをご覧ください。

スクロールしていくと、黄色いマーカーが引かれていきます。

アフィリエイト進化論

 

とってもすてきですね！

私もパ…真似させていただきたいと思い、やってみました。

 

 

HTMLのhead部分に、スクロール位置を取得するコードを貼り付け（jquery）

 

まずは、[sc name="ma"]下のコードをコピーして、HTMLのhead部分にペーストします。[sc name="ma_close"]

 

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

 

アフィンガーやスティンガーの方は、「AFFINGER管理」の中の、「上級者向け設定 headに出力するコード 」に貼り付けます。
それ以外のテーマの方は、headに出力する部分か、直接テーマヘッダー (header.php) に貼り付けます。
[sc name="ma"]しっかりバックアップを取り、自己責任でお願いします。[sc name="ma_close"]

 

上のコードはこちらのサイトを丸パク…参考にさせていただきました！↓

ウェブラボ クリエイターズメモ

 

これでスクロールして視界に入ると、クラス「active」が与えられるようになりました。

スキルクラウド　無料会員登録

 

CSSにアニメーションを記述する

 

クラス「active」をトリガーとして、CSSにアニメーションを記述します。

下のコードをコピーして、CSSに貼り付けます。

 

/*マーカーアニメーション*/

.marker-animation.active{
    background-position: -100% .5em;
}

.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

 

[sc name="ma"]CSSは、「外観」の「CSS編集」の「追加CSS」にペーストします。[sc name="ma_close"]

※テーマによって少し場所が違うかもしれません。

 

 

 

HTMLに記述する

 

最後に、マーカーを表示したい部分に

<span class="marker-animation">
ここにマーカーをつける文章をいれる
</span>

と記述します。

[sc name="ma"]Wordpressの投稿や固定ページのテキスト部分です。
これでマーカーのアニメーションが完成です。[sc name="ma_close"]

 


[ITCEアカデミー】無料カウンセリング参加

CSSの解説

 

ここは忘備録として書いているので、色を変更したいあなただけ読んでください

 

/*マーカーアニメーション*/

.marker-animation.active{
    background-position: -100% .5em;
}

.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

.marker-animation.active{ background-position: -100% .5em;}

まず一番上のこの記述で、クラス「active」の時のマーカーの表示が書いてあります。

-100%
は、横位置の指定です。

アクティブになったとき、背景（バックグラウンドの位置が-100％）つまり画面外左のマイナス位置に移動するという意味です。

マーカーが表示されていない状態です。

 

.5em
は、縦位置の指定です。

マーカーの上を5インチ分下げて表示するという意味です。

マーカーは文字の下半分に表示していますね。

 

マーカーアニメーションの指定

 
 background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
 background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
 background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
 background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
 background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
 background-repeat: repeat-x;

 

[sc name="ma"]マーカーの色の変更は、ここで指定してください。　rgb(255,250,153)　[sc name="ma_close"]

色を変更する場合、5か所全部を書き換えてね

 

古いバージョンのブラウザに対応するよう、同じ意味のことを5行分書いています。

linear-gradient　とは、線形のグラデーションのことで、左側と右側の色を指定するとグラデーションになります。

ここでは、左から開始する線形グラデーションであり、左端は横半分の位置（50％）で透明、右は半分の位置（50％）で指定の黄色がに表示されることが書いてあります。（と思う。）

 

一番下は、グラデーションがX方向（横方向）だけに繰り返して表示するという指定です。

こうすると、マーカーの位置を変えると、透明と黄色が変化します。

 

 

アニメーションの指定

  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 2s ease;

 

[sc name="ma"]この3行では、アニメーションの指定がしてあります。[sc name="ma_close"]

1行目、マーカーのサイズが200％（つまり黄色部分が全部表示）縦位置は下8インチ表示。

※100％のサイズにすると、半分透明になってしまいます。

 

2行目はマーカーの表示位置が０（つまり左端）縦位置は下5インチ表示。

マーカーが全部見えている時の位置です。

 

3行目のトランジションは、この２つのマーカー位置のインとアウトを2秒かけて滑らかにアニメーションさせるという指定です。

maker-animation

 

 

？？？？？
たぶんこういうことです。この記述でアニメーションします(;'∀')

 

フォントの太さ

 

一番下の

font-weight: bold; で強制的に太字にしています。

ここの設定は好き好きでどうぞ。

 

スポンサーリンク


Kindle Unlimited:読み放題

 

まとめ

 

今回は、思ったよりてこずったマーカーのアニメーションのやり方について見てきました。

少し分かっていない部分もあってあいまいですが、参考にしてみてください。

[sc name="ma"]グラデーションやアニメーションがスクロールで動かせるのって楽しいですね。[sc name="ma_close"]

他にもいろいろ動きがつけられそうです。

 

 

ところで、あなたはこうしたWEBデザイン、コーディング技術を習得したくありませんか？

WebCampで学んでみてはいかがですか？

[sc name="ma"]オンラインで完結するスクールですから、家にいながら1か月で、WEBデザイン、コーディングの技術を習得できますよ。[sc name="ma_close"]

副業としても人気のWEBデザイナーです。

まずは無料説明会を受けてみましょう。

 

1か月でWEBデザイナーになりたいあなたは登録↓

WebCamp

 

-デザイン, ブログ
-

Copyright© ぐりおブログ , 2026 All Rights Reserved Powered by AFFINGER4.