この記事を読むのに必要な時間は約 10 分です。
ブログで目立たせたい部分にマーカー（蛍光ペン）をぬったように色をつけるのを、よく見かけますね。
みんながやっているから私も…とマーカーを付けているあなた、何か変化をつけたくないですか？
そのマーカーだけをアニメーションさせる方法をお伝えします。
線を引いているようにアニメーションします。
マーカー部分がスクロールして視界に入ったらアニメーションをするやり方です。
あなたのブログに個性が出て、他のブログと差がつけられますよ！
コピペで出来ますので安心してください。
※追記 はじめは分かってなくてあいまいな文章書いてましたが、2日ぐらい寝たら理解できたので、全面的に書き直しました。
以前のものは忘れてください←
スポンサーリンク
WebCamp
スクロールして視界に入ったら、マーカー部分をアニメーションさせたい
さてこちらのサイトをご覧ください。
スクロールしていくと、黄色いマーカーが引かれていきます。
とってもすてきですね！
私もパ…真似させていただきたいと思い、やってみました。
HTMLのhead部分に、スクロール位置を取得するコードを貼り付け（jquery）
まずは、 下のコードをコピーして、HTMLのhead部分にペーストします。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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) に貼り付けます。
しっかりバックアップを取り、自己責任でお願いします。
上のコードはこちらのサイトを丸パク…参考にさせていただきました！↓
これでスクロールして視界に入ると、クラス「active」が与えられるようになりました。
CSSにアニメーションを記述する
クラス「active」をトリガーとして、CSSにアニメーションを記述します。
下のコードをコピーして、CSSに貼り付けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /*マーカーアニメーション*/ .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; } |
CSSは、「外観」の「CSS編集」の「追加CSS」にペーストします。
※テーマによって少し場所が違うかもしれません。
HTMLに記述する
最後に、マーカーを表示したい部分に
1 2 3 | <span class="marker-animation"> ここにマーカーをつける文章をいれる </span> |
と記述します。
Wordpressの投稿や固定ページのテキスト部分です。
これでマーカーのアニメーションが完成です。
CSSの解説
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /*マーカーアニメーション*/ .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インチ分下げて表示するという意味です。
マーカーは文字の下半分に表示していますね。
マーカーアニメーションの指定
1 2 3 4 5 6 | 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; |
マーカーの色の変更は、ここで指定してください。 rgb(255,250,153)
古いバージョンのブラウザに対応するよう、同じ意味のことを5行分書いています。
linear-gradient とは、線形のグラデーションのことで、左側と右側の色を指定するとグラデーションになります。
ここでは、左から開始する線形グラデーションであり、左端は横半分の位置（50％）で透明、右は半分の位置（50％）で指定の黄色がに表示されることが書いてあります。（と思う。）
一番下は、グラデーションがX方向（横方向）だけに繰り返して表示するという指定です。
こうすると、マーカーの位置を変えると、透明と黄色が変化します。
アニメーションの指定
1 2 3 | background-size: 200% .8em; background-position: 0 .5em; transition: all 2s ease; |
この3行では、アニメーションの指定がしてあります。
1行目、マーカーのサイズが200％（つまり黄色部分が全部表示）縦位置は下8インチ表示。
※100％のサイズにすると、半分透明になってしまいます。
2行目はマーカーの表示位置が０（つまり左端）縦位置は下5インチ表示。
マーカーが全部見えている時の位置です。
3行目のトランジションは、この２つのマーカー位置のインとアウトを2秒かけて滑らかにアニメーションさせるという指定です。
フォントの太さ
一番下の
font-weight: bold; で強制的に太字にしています。
ここの設定は好き好きでどうぞ。
スポンサーリンク
Kindle Unlimited:読み放題
まとめ
今回は、思ったよりてこずったマーカーのアニメーションのやり方について見てきました。
少し分かっていない部分もあってあいまいですが、参考にしてみてください。
グラデーションやアニメーションがスクロールで動かせるのって楽しいですね。
他にもいろいろ動きがつけられそうです。
ところで、あなたはこうしたWEBデザイン、コーディング技術を習得したくありませんか？
WebCampで学んでみてはいかがですか？
オンラインで完結するスクールですから、家にいながら1か月で、WEBデザイン、コーディングの技術を習得できますよ。
副業としても人気のWEBデザイナーです。
まずは無料説明会を受けてみましょう。
1か月でWEBデザイナーになりたいあなたは登録↓
WebCamp