menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/01/22
  • CSS
  • JQuery

「Animate.css」と「wow.js」で動きのあるサイトを作る

「Animate.css」と「wow.js」を組み合わせて使うことで、簡単でシンプルにWebサイトに動きをつけることができます。このふたつを使うことで、ほとんどプログラミングせずに動きのあるサイトが作れます。
animate動きのあるサイト

使用方法

ダウンロード

Animate.css
wow.js

準備するファイル

・jquery.js
・Animate.css
・wow.js

外部ファイルの読み込み

JavaScript

HTML

要素のclassに”wow アニメーション名”を指定することでスクロールが要素に達した時指定したアニメーションが実行されます。

アニメーションの種類を調べるには、Animate.cssのページのプルダウンメニューから確認することができます。
Animate.css

Option

表示させるタイミングをずらしたり、繰り返しアニメーションするオプション設定もありますのでお時間があれば試してみてください。
「data-wow-duration = アニメーション時間」
「data-wow-delay = アニメーションのスタートのタイミング」
「data-wow-offset = アニメーションがスタートする距離」
「data-wow-iteration = アニメーションの繰り返し回数」

オプションもいくつか用意されており、ループや自動再生なんかも簡単に設定できたりしますのでオススメです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11