このブログ、最近流行りのWordPress（わーどぷれす）を使っています。現在ベーステンプレートとして使わせてもらっているテーマTwentyFourteenで、カテゴリーをクリックした時に表示される「カテゴリー別アーカイブ:〜」が野暮ったかったので消してみました。
流行りのスクロール連動型CSSアニメーションをWordPressに実装してみた
Appleのホームページのように、下にスクロールすると画像やテキスト文字が出現と同時に動き出すサイトを最近よく見かけます。
あれ、どやってるんだろう？ と、いろいろ調べてみるとGitHubでオープンソース化されている方がいたので、当ブログに実装してみた。
下にゆっくりスクロールすると指定した出現のタイミングでアニメーションします。
実際の動きはこんな感じ↓
気の利いたオシャレなサンプルが作れなくてごめんなさい(笑)
使用したのは Javascript の wow.jp と CSS3 の animait.css。
WEBサイトへの設置方法はこちらで紹介されています。
アニメーションの動作サンプルはこちらで確認できます
サンプルコードのダウンロードはこちらから。
WOW.jpをWordpressに実装するためにはいくつかの方法が考えられますが、今回は直接テーマフォルダーの中に組み込んでみました。
投稿テキスト編集画面で、適応したいオブジェクトにエフェクト名を直接 CSSでコード指定しないといけないのが面倒ですが、Flashなどのオーサリングソフトを使わず、簡単にアニメーションを加えられるのは便利ですね。
アイデア次第で、色々な使い方ができそうです。
いちいちコード入力が面倒ならプラグインの「AddQuicktag」を使ってボタン入力するという手もあります。
HTMLとCSSが分かる人なら簡単に実装できるので試してみてはいかがでしょう。