ぐりおブログ

デザインについて知りたい人のためのデザイナー歴20年アラフィフママのブログ

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

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

更新日:

この記事は約 8 分で読めます。

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

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


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

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

 

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

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

 

スポンサーリンク

WebCamp

 

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

 

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

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

 

とってもすてきですね!

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

 

 

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

 

まずは、 下のコードをコピーして、HTMLのhead部分にペーストします。

 

 

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

 

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

 

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

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

 

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

 

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

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

 

 

CSSは、「外観」の「CSS編集」の「追加CSS」にペーストします。

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

 

 

 

HTMLに記述する

 

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

と記述します。

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

 


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

CSSの解説

 

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

 

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

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

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

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

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

 

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

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

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

 

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

 

マーカーの色の変更は、ここで指定してください。 rgb(255,250,153) 

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

 

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

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

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

 

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

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

 

 

アニメーションの指定

 

この3行では、アニメーションの指定がしてあります。

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

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

 

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

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

 

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

maker-animation

 

 

そんくん
?????
ぐりお
たぶんこういうことです。この記述でアニメーションします(;'∀')

 

フォントの太さ

 

一番下の

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

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

 

スポンサーリンク


Kindle Unlimited:読み放題

 

まとめ

 

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

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

グラデーションやアニメーションがスクロールで動かせるのって楽しいですね。

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

 

 

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

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

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

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

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

 

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

 

リンク広告01

-デザイン, ブログ
-

Copyright© ぐりおブログ , 2019 All Rights Reserved.