読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【63:WOW.js+Animate.css】WOW.js+Animate.cssで簡単にアニメーションを実装

f:id:seintoseiya:20160427170107g:plain
プロジェクトNo.63: WOW.js+Animate.css - DEMO

画面表示されてら(スクロールで表示領域に入ったら)アニメーションが実行されるというライブラリです。
容量も軽量なので、ある程度決まった動きで実装を簡略化したい時とかに使えそうですね。

実装方法

まずはjsとcssを読み込みます。

HTML

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

WOW.jsを初期化(使える状態に)する

Javascript

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

アニメーションを適用したい要素にclass要素で「wow」を付加する

HTML

<img src="./images/bird.jpg" class="wow">

これで画面表示されたタイミングでアニメーションを実行するというトリガーが有効になります。

アニメーションの種類をanimation.cssから選ぶ

公式サイトにアニメーションのデモがあるので、好きなもの選んでclassに追加してください。
Animate.css

HTML

<img src="./images/bird.jpg" class="wow fadeIn">

オプション属性を付ける

以下の属性を付加して、細かい動きを調整します。

  • data-wow-duration

アニメーションの持続時間(例:1.5s)

  • data-wow-delay

アニメーションをスタートする時の遅延時間(例:1s)

  • data-wow-offset

アニメーションをスタートする距離(ブラウザの下から)(例:20)

  • data-wow-iteration

アニメーションが繰り返される数(例:3 または infinite)

<img src="./images/bird.jpg" class="wow bounce" data-wow-duration="2s" data-wow-iteration="infinite" data-wow-delay="300ms">

全ソースはこちら

github.com

関連アプリ・書籍

スラスラわかるCSSデザインのきほん

スラスラわかるCSSデザインのきほん

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで