今まで様々なブログを見てきて、はてなブログはWordPressのブログに比べてアニメーションを使っているものが少ないなと感じる場面が何度かありました。おそらく、「必要性を感じてないから使ってない」わけではなく、「やり方がわからないから使ってない」ひとがほとんどだと思います。場面によってアニメーションはものすごく重宝されるものであるのに、「知らないから」で済ませてしまうのはすごく勿体なく感じます。
そこで今回は、誰でも簡単に文字や画像にアニメーションをつける方法とアニメーションを使ったはてなブログの応用カスタマイズ例を紹介しようと思います。後者については、実践しているひとを滅多にみないので自分のブログにオリジナル性を出したいという方は是非参考にしてみてください。
そもそもアニメーションとは
これといった説明は得にありません。
すでに導入しているブログもいくつかあると思いますが、見る人によってはとても新鮮なものだと思います。
もちろん、こんな風に画像にもアニメーションをつけることができます。
見ての通り、アニメーションひとつつけるだけでかなりのインパクトを出すことができます。
はてなブログで誰でも簡単にアニメーションをつける方法
普通、文字や画像にこのような動きをつけるには何十行ものコードを書かなければいけませんが、ネット上に公開されている「ライブラリ」を使えば、誰でも簡単に短いコードで実装することができるようになります。
今回使うのは、Animate.cssというアニメーションライブラリとwow.jsというアニメーションに細かい設定をすることができるライブラリ。結構有名なものなので聞いたことがある人もいるかもしれません。
導入方法
その１
設定→詳細設定→headに要素を追加 の欄に下記のコードを追記する。
その２
次に 設定→デザイン→スマホ→ヘッダ→タイトル下 に下記のコードを追記する。
これで導入は完了。
アニメーションをつける方法
下記の基本コードのアニメーションの名前の部分、必要であればオプションの部分を書き換えて記事の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を進んだら動かす
アニメーションを使ってはてなブログをおしゃれにしてみよう
WordPressには、テーマ自体にアニメーションが施されたものがよくあります。有名どころでいえば「ハ〇ングバード」とかとか。カスタマイズに制限があるはてなブログではできないと思われがちですが、実はJQueryを使えば簡単に実装できてしまいます。上手く使えばWordPress顔負けのデザインにすることだって可能になるかもしれませんね。
基本コード
JQueryのaddClass関数を使います。これを使えば動的に要素にクラスを追加することができるようになります。具体的な使い方は以下の通り。
つまり、"追加するクラス" の部分に上で紹介したアニメーションを付加させるためのクラスを記述すればいいのです。ちなみに複数のクラスを追加させたいときは空白置きに記述すればOKです。
アニメーションを使った具体的なカスタマイズ例
多分使いどころとかあまりピンと来なかった方もいると思うので、コピペで実装できる、アニメーションをつかった具体的なカスタマイズ例を紹介していこうと思います。
コピペする場所
設定→デザイン→スマホ→ヘッダ→タイトル下 に以下のコードをコピペ。
コード中の「ここにコードを追加していく」の場所に、これから紹介する中の好みのものを張り付けていくだけOKです。
スクロールと同時に記事をフェードインさせる
スクロールと同時に記事が浮かび上がるようなアニメーション。
プロフィールを左からフェードイン
スクロールがプロフィールに達したらニックネームとはてなIDを左からフェードイン。
記事タイトルにわずかな動きをつける
記事にアクセスするとタイトルが一度だけ鼓動するようなアニメーション。
記事中の画像をスライドダウンさせる
画像までスクロールすると、上から降りてくるようなアニメーション。
まとめ
以上、Animate.cssとwow.jsを用いたはてなブログでのアニメーションの使い方を紹介ました。うまく使えば、読み手により内容を伝えやすいものになったり、ブログそのものをオシャレに仕上げることができるようになるのでぜひ参考にしてみてくださいね！
追記 (2017/4/2 8:28)
wow.jsは商用利用のみ有料となったようですのでその辺は注意が必要になります。