こっそり流行りのアニメーションとグラデーションを取り入れてみた

新しいものは取り入れてみたいと考えているうえの(@uenoyou111)です( ˘ω˘)

最近ヘッダー画像とかタイトルがすぅっ…と上やら下から動いてくるアニメーションのブログ増えましたよね？

しかもグラデーションがすごくきれい( ﾟдﾟ)

今までスルーしてたのですが、ふと思い立って取り入れることにしました！

ついでにフォローボタンもグラデーションで作ってみたので、コードも公開してみようと思います。

すぅっと現れるアニメーション

まずこの舞い降りてくるアニメーション、こちらは記憶を頼りにオークニ(id:a24o92)さんが公開してた記事を参考にしました。

www.okuni.me

こちらの記事から引っ張ってきたのをそのまま使ったのですが、ヘッダーと記事タイトルしか動かない。

ZENO-TEALは全文表示なので多分、命令する場所が違う？

と思い検索し、.page-archiveを.page-index, .page-entryに変更するも今度はヘッダーが動かなくなる。

分からん？(ﾟ∀ﾟ)

ということで、スマホから見れば記事一覧は隠れるしヘッダー周りだけ動かすようにしました。

実際に使ってるのはこちらのコードです。

/**********アニメーション設定**********/
/*右から左*/
@keyframes RightToLeft {
0% {
    opacity: 0;/* 透明 */
    transform: translateX(50px);/* X軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);/* X軸方向に0px */
}
}

/*上から下*/
@keyframes SlideDown {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* Y軸方向に-50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}

/*下から上*/
@keyframes SlideUp {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}
/**********アニメーション設定end**********/

/*ヘッダーを上から下へ*/
#blog-title {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*グローバルナビを上から下へ*/
#top-editarea {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*記事一覧を下から上へ*/
.page-archive .archive-entries .archive-entry {
animation-name: SlideUp;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}

/*記事タイトルを右から左へ*/
.page-entry .entry-title {
animation-name: RightToLeft;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */

こちらをデザインCSSに貼り付けるだけでヘッダー周りと記事タイトルがスゥッと動きます。

アニメーション設定endより下にあるアニメーション名を変えると、各項目でお好みの動きになります。

例）

animation-name: SlideDown

↓

animation-name: RightToLeft

に変えると、上から下へ動いたアニメーションが右から左になります。

ページ速度について

アニメーションを追加したらどれぐらいページの表示速度に影響が出るか？という部分で調べてみました。

まずは有名どころのPageSpeed Insights。こちらはGoogleから提供されているツールで、詳細なスピードは出ませんが100点満点でどれぐらいか評価してくれます。

スマホはいいのですが、そもそもパソコンだと重いですね～。これ、アニメーション抜いても点数が変わらなかったです。

てことは、SEO上はそんなに影響なし？詳細な表示時間をチェックすべきと思い、お次はこちら。

testmysite.withgoogle.com

これもGoogleから提供されているツールで、2017年から提供開始しているそうです。

まずアニメーションなしだと…

6秒。お次はアニメーション加えてみると…

7秒！推定離脱率が2％影響出てますね、これを大きいと見るか小さいと見るか…。

個人的には読み込み速度1秒の差であれば、アニメーション表示の方がなめらかに表示されていて1秒以上の快適さがあるように思えますね～。

読み込み速度と視覚的な快適さは別だと思います、読み込み時間が長くてもNow Loadingの表示があると待てるみたいなアレに近いかと。

グラデーションについて

これさっぱりだったんですけど、色を指定できる命令があるんだからそこにグラデーションのコードを突っ込めば変わるんじゃない？

と安易に思い、まずはグラデーションのコード探しの旅に。

すると以前ボタン関係で大変参考にさせていただいたサルワカ(@saruwakakun)さんの記事を発見。

saruwakakun.com

うーん？(ﾟ∀ﾟ)

一通り読んで名前が一緒のとこにこれ入れたらグラデるんじゃないか？と思い、試しに同じ指定のコードを参考に。

 background: -moz-linear-gradient(left, #FFC778 50%, #FFF);
 background: -webkit-linear-gradient(left, #FFC778 50%, #FFF);
 background: linear-gradient(to right, #FFC778 50%, #FFF);

で、グローバルメニューの色指定に突っ込んでみると…。

変わった！これだ！

ということで明るすぎますので、後は色コードを替えて左から右に明るくなるようにしつつ斜めに指定して。

こんな感じに変更。全体統一して右側が明るい…みたいな感じにグラデ。大変満足なのでもう終わりにしたい。

デザインCSSで、変更したいバックグラウンドカラー指定のとこにこれ突っ込めばイケるっぽい？です。

  background: -moz-linear-gradient(65deg, #ef2b00, #FFC778); 
  background: -webkit-linear-gradient(65deg, #ef2b00, #FFC778); 
  background: linear-gradient(65deg, #ef2b00, #FFC778);

ここの65degは角度指定で、0から180まで指定できます。

CSSのグラデーション（linear-gradient）の使い方を総まとめ！

他にも開始位置、終了位置が決められるみたいです。詳細は上記リンクよりご確認を。

あと三色も組み込めますが、まずはこれでいいかなって思ったのでこんな感じです。

フォローボタンについて

以前、このフォローボタンもいくつかのコードを組み合わせてそれっぽく作ったものです。

試しにTwitterのフォローボタンだけ公開です。動作保証はできませぬ。

Twitterのフォローボタン

こんなボタンが出来上がります。画像なのでポチッと出来ません。

上から下に明るくなるようにしてます。コードは以下になります。

 /* twitterボタン */
.fl_tw2{/*ボタンの背景*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  display: inline-block;
  height: 45px;/*高さ*/
  width: 210px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  vertical-align: middle;/*垂直中央寄せ*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
  background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 100%);
    background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #5e7fca;
  }
}

.fl_tw2 .fa-twitter {
    text-shadow: 2px 2px 0px #4287d6;
    font-size: 30px;
}

.fl_tw2 span {/*テキスト*/
  display:inline-block;
  transition: .5s}

.fl_tw2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

こちらをコピーしてデザインCSSに貼り付けです。

ちなみにカスタマイズをされたい方は横に書いてあるので、幅やら高さを変えられるようになっています。

下線は消す、の下にあるbackground-image以降はグラデーションになるので、カラーコードを開始位置→終了位置の順で変更して下さい。

border-bottomが影になる線になりますので、こちらも色に合わせて暗めの色を指定して下さい。

グラデーションを作成できるサイトとかもありましたが、いまいち使い勝手が悪かったのでカラーピッカーで探しながら作ってます(´・ω・`)

araishi.com

アニメーションは一周回転になってますが、ホバーで一周回転より下のコードを変更すると動きが変わります。

.fl_tw2:hover span{/*ホバーで一周回転*/
padding-left: 0.7em;
    padding-right: 0.3em;
    }

例えばこれに置き換えると、タッチorマウス乗せで横にスーッ…と動くようになります。

これはこれでいいかも。

HTMLを準備

CSSで形を作ったので、次に表示させる為のHTMLを準備します。

<a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fhttp://自分のブログドメイン/%2F&ref_src=twsrc%5Etfw&region=follow_link&screen_name=自分のTwitterアカウントの@を抜いた部分&tw_p=followbutton" class="fl_tw2">
  <i class="fa fa-twitter"></i> <span>Follow Me</span>
</a>

自分のブログドメインと自分のTwitterアカウントの@を抜いた部分を変更していきます。

自分のブログドメインは、まず自分のブログのトップページを開きましょう。

この赤枠内の文字をコピーし、自分のブログドメインと記載している箇所に貼り付け。

残りはTwitterアカウントのアットマークを抜いて入力でござます。

サイドバーに貼り付け

次に設定画面を開き、サイドバーを選択。

一番下のモジュールを追加を選択し、下の方にHTMLという欄があるのでそちらをクリック。

そこにこんな感じで打ち込みます。

<center>＼気軽にフォローお待ちしてます！／<br>
<a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fwww.uenoyou.net%2F&ref_src=twsrc%5Etfw&region=follow_link&screen_name=uenoyou111&tw_p=followbutton" class="fl_tw2">
  <i class="fa fa-twitter"></i> <span>Follow Me</span>
</a>
</center>

するとこんな感じに。

目立ちますねぇ～Twitterだけでもこのボタンがあると押したくなっちゃうかも(*´∀｀)

あ、気軽にフォローお待ちしてますの文言は自由に変更可能です。

ちなみに全体的に右側が明るくなるようなグラデですが、ボタンだけはくっきり影を付けて明暗を逆にしています。その方が逆に目立つでしょ？(安直な考え

まとめ

CSSの知識ないままに試行錯誤でやってみたものばかりなので、お使いのテーマや環境によっては再現できない可能性もございます。

もし参考にしてくださる方がいましたら、あくまで自己責任というところでコードのバックアップは必ず取りながら変更して頂けると嬉しいです。

また、なにかご指摘あれば教えて頂けると幸いですm(_ _)m

…しかし楽しい！半年前の、シェアボタンを導入するだけで一日以上かかってたあの頃が懐かしい。

毎回カスタマイズする度にちゃんと勉強しなきゃなぁ～って思いつつしてないので、こちらも徐々に考えて行こうと思う次第です。

グラデーションとかアニメーションもほんのちょこっと取り入れてる、というだけなので劇的な変化はありません。

しかし、ちょっと小洒落た感じが出るのでお気に入りです。

快適なカスタマイズライフを！

ではでは(｀･ω･´)ゞ