ひつじの雑記帳

身近な豆知識ネタからちょっとギークなプログラミングネタまで

コピペで簡単!アニメーションを使ってはてなブログを超おしゃれにするカスタマイズ術

f:id:codomisu:20170330112917p:plain

今まで様々なブログを見てきて、はてなブログはWordPressのブログに比べてアニメーションを使っているものが少ないなと感じる場面が何度かありました。おそらく、「必要性を感じてないから使ってない」わけではなく、「やり方がわからないから使ってない」ひとがほとんどだと思います。場面によってアニメーションはものすごく重宝されるものであるのに、「知らないから」で済ませてしまうのはすごく勿体なく感じます。

そこで今回は、誰でも簡単に文字や画像にアニメーションをつける方法アニメーションを使ったはてなブログの応用カスタマイズ例を紹介しようと思います。後者については、実践しているひとを滅多にみないので自分のブログにオリジナル性を出したいという方は是非参考にしてみてください。

スポンサードリンク

 

そもそもアニメーションとは

これといった説明は得にありません。

 

これがアニメーションです。

 

すでに導入しているブログもいくつかあると思いますが、見る人によってはとても新鮮なものだと思います。
もちろん、こんな風に画像にもアニメーションをつけることができます。

f:id:codomisu:20170329025550p:plain

見ての通り、アニメーションひとつつけるだけでかなりのインパクトを出すことができます。

はてなブログで誰でも簡単にアニメーションをつける方法

普通、文字や画像にこのような動きをつけるには何十行ものコードを書かなければいけませんが、ネット上に公開されている「ライブラリ」を使えば、誰でも簡単に短いコードで実装することができるようになります。

今回使うのは、Animate.cssというアニメーションライブラリとwow.jsというアニメーションに細かい設定をすることができるライブラリ。結構有名なものなので聞いたことがある人もいるかもしれません。

導入方法

その1

設定→詳細設定→headに要素を追加 の欄に下記のコードを追記する。

その2

f:id:codomisu:20170330123314p:plain

次に 設定→デザイン→スマホ→ヘッダ→タイトル下 に下記のコードを追記する。

これで導入は完了。

アニメーションをつける方法

下記の基本コードのアニメーションの名前の部分、必要であればオプションの部分を書き換えて記事のHTML編集の任意の場所に張り付けるだけでOKです。

アニメーション名一覧はAnimate.cssから、オプション一覧はwow.jsから確認できますが、所々見にくかったりするため下に見やすくまとめてみました。

アニメーション一覧

アニメーションに関しては種類が多すぎるため代表的なもののみ挙げています。

アニメーション名 動き
bounce
テストモーション
flash
テストモーション
pulse
テストモーション
rubberBand
テストモーション
shake
テストモーション
swing
テストモーション
tada
テストモーション
wobble
テストモーション
jello
テストモーション
bounceIn
テストモーション
bounceOut
テストモーション
fadeIn
テストモーション
fadeOut
テストモーション
flip
テストモーション
slideInUp
テストモーション
slideOutUp
テストモーション
zoomIn
テストモーション
zoomOut
テストモーション
hinge
テストモーション
rollIn
テストモーション
rollOut
テストモーション
オプション一覧
オプション 意味 記述例
data-wow-duration 動かす時間 data-wow-duration="2s"
data-wow-iteration 繰り返し回数 data-wow-iteration="10"
data-wow-delay スクロールが要素に達してから動くまでの時間 data-wow-delay="5s"
data-wow-offset スクロールが要素に達してから動くまでの距離 data-wow-offset="10"

複数のオプションを組み合わせて使いたいときは空白置きに記述すればOKです。

記述例

・スクロールが要素に達したら2秒後に5回動かす

HTML初心者さんのためにコピペで使えるサンプルコードもまとめてみました。

サンプルコード一覧

・ページ更新時に一回だけ動かす

・何度も繰り返し動かす

・ページ更新時に3秒かけて動かす

・動きを3回だけループさせる

・スクロールが要素に達してから3秒後に動かす

・スクロールが要素に達してから距離3を進んだら動かす

スポンサードリンク

 

アニメーションを使ってはてなブログをおしゃれにしてみよう

f:id:codomisu:20170330103933p:plain

WordPressには、テーマ自体にアニメーションが施されたものがよくあります。有名どころでいえば「ハ〇ングバード」とかとか。カスタマイズに制限があるはてなブログではできないと思われがちですが、実はJQueryを使えば簡単に実装できてしまいます。上手く使えばWordPress顔負けのデザインにすることだって可能になるかもしれませんね。

基本コード

JQueryのaddClass関数を使います。これを使えば動的に要素にクラスを追加することができるようになります。具体的な使い方は以下の通り。

つまり、"追加するクラス" の部分に上で紹介したアニメーションを付加させるためのクラスを記述すればいいのです。ちなみに複数のクラスを追加させたいときは空白置きに記述すればOKです。

アニメーションを使った具体的なカスタマイズ例

多分使いどころとかあまりピンと来なかった方もいると思うので、コピペで実装できる、アニメーションをつかった具体的なカスタマイズ例を紹介していこうと思います。

コピペする場所

設定→デザイン→スマホ→ヘッダ→タイトル下 に以下のコードをコピペ。

f:id:codomisu:20170330123314p:plain

コード中の「ここにコードを追加していく」の場所に、これから紹介する中の好みのものを張り付けていくだけOKです。

 

スクロールと同時に記事をフェードインさせる

f:id:codomisu:20170330133200g:plain

スクロールと同時に記事が浮かび上がるようなアニメーション。

 

プロフィールを左からフェードイン

f:id:codomisu:20170330134533g:plain

スクロールがプロフィールに達したらニックネームとはてなIDを左からフェードイン。

 

 記事タイトルにわずかな動きをつける

f:id:codomisu:20170330120110g:plain

記事にアクセスするとタイトルが一度だけ鼓動するようなアニメーション。

 

記事中の画像をスライドダウンさせる

f:id:codomisu:20170330140611g:plain

画像までスクロールすると、上から降りてくるようなアニメーション。

まとめ

以上、Animate.cssとwow.jsを用いたはてなブログでのアニメーションの使い方を紹介ました。うまく使えば、読み手により内容を伝えやすいものになったり、ブログそのものをオシャレに仕上げることができるようになるのでぜひ参考にしてみてくださいね!

 

追記 (2017/4/2 8:28)
wow.jsは商用利用のみ有料となったようですのでその辺は注意が必要になります。

関連記事

hitsuzi.hatenablog.com