好きな事を好きな時に好きなだけする

そんな人生最高じゃないですか。

簡単にアニメーションを追加することができる!!-WOW.js

   

アニメーションを追加したいけどjavascriptとか触れない・・・
そんなあなたに朗報です!ご存知の方も多いかもしれませんが、wow.jsというスクリプトがとても便利なのでご紹介致します。

class指定してあげるだけで上からスライドさせたりタイミングをすらして表示させたりできますよ!!

必要なファイルや設定

まずはダウンロードしないといけないファイルとそれらの設定(読み込み)についてです。

  • animate.css
  • wow.js or wow.min.js

ダウンロードの方法

wowに関するファイルをダウンロードできるmatthieua/WOWで「Download ZIP」をクリックしダウンロードします。

animate.cssは「WOW-master\WOW-master\css\libs」、wow.js or wow.min.jsは「WOW-master\WOW-master\dist」の中に保存されています。
ダウンロードしたものは自分のサーバーにアップロードしておいてください。

ファイル読み込みとスクリプトのセット

ファイルの読み込みは、下記のようにhead要素内で記述します。
※読み込むファイル先は適宜変更してください。

<head>
  ...
  <link rel="stylesheet" href="css/libs/animate.css">
  <script src="dist/wow.js"></script>
</head>

スクリプトのセットは下記になります。

<script>
 new WOW().init();
</script>

WOW.jsの使い方

まずアニメーションを加えたい要素のclass指定に「wow」を加えてください。

<div class="wow">アニメーションテスト</div >

それから実際のエフェクトを追加するためのclass指定をします。

<div class="wow slideInLeft">アニメーションテスト</div >

以上でアニメーションが追加されます。

タイミングや時間、繰り返す数などもdate属性を使うことで設定ができますので、いろいろ試してみてください。
今回ご紹介したWOW.jsはjavascriptがあまり分からない人でも簡単にアニメーションを追加することができるライブラリーになります。活用しない手はないですね!!

参考WOW.js
参考[JS]デモがめちゃ楽しい!jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

 - WordPress

adsensepc

adsensepc

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

サイト修正で使える!メンテナンス中の表示をしてくれるプラグイン”WP Maintenance Mode”

私の毎日の日課はネットサーフィンなんですが(笑)、今日いつものようにネットサーフ …

【永久保存版】Amazonアソシエイトのプラグイン「AmazonJS」導入の忘備録

ブログをやっている人でアマゾンアソシエイトのリンクを貼っている人は多いと思います …

no image
少しだけレンタルサーバーについて話してみる

こんにちは。 今日はサイトの運営で欠かすことのできないレンタルサーバーについて話 …

【忘備録】WordPressで寄稿者でも画像をアップロードできる方法

セキュリティーの面を考慮して寄稿者としてユーザーを追加したのですが、その場合、デ …

記事の目次を自動生成してくれるWordPressプラグイン「Table of Contents Plus」

前回に引き続き、WordPressプラグインに関する記事です! 今回は目次を自動 …

サイトの画面キャプチャを表示させるWordPressプラグイン「Browser Shots」

当サイトはWordPressのテーマとしてStingerを利用させて頂いているの …

よくみかける「この記事を書いた人」を表示させるプラグイン “Fancier Author Box”

最近よくみかける「この記事を書いた人」の表示。 最初はそれほど気にならなかったの …

WordPressの引越しをするなら「Duplicator」しかないでしょ!

WordPressのドメイン・サーバー移行を試みて諦めた人は多いのではないでしょ …

【WordPressカスタマイズ】ブログをプチリニューアルしました

この記事でも紹介しているように、ワードプレスのテーマにSTINGERを使わせて頂 …

【忘備録】wa-track.comが出てきた!!その対処法とは

「運営しているサイトが急に表示されなくなり、wa-track.comが出てきた! …