株式会社エキスパートソフトウェア

ページを読みこみ中・・・

 CSS3とJavaScriptでできたスクロールアニメーションプラグイン「Animate It」 
モバイル開発Webブラウザツール

  - CSS3 Animate It - ホームページ

- CSS3 Animate It - ホームページ


  概要

CSS3 Animate Itは、プラグインでファイルに組み込むことで簡単にスクロールアニメーションが使えます。 jQueryを使用、jQuery doTimeout(*1)を使用。

(*1)doTimeOutは、JavaScriptのsetTimeout、setIntervalを含めた処理ができる、よりシンプルでフレキシブルなjQueryプラグインです。つまり、一定時間後に特定の処理をおこなう(繰り返さずに一度だけ)、一定時間ごとに特定の処理を繰り返すことができます。制作者は「setTimeoutよりいいよ!」と言っています。下記に詳細な情報のリンクあり。



  実装方法

1.ファイルをDL(ホームページから)

2.必要なファイルをプロジェクトフォルダにコピーする

 ・css/animations.css

 ・js/css3-animate-it.js

3.CSS Animationを使うHTMLファイルに以下を記述する

 ・<head>内に書く

  <link rel="stylesheet" href="[ファイルパス]css/animations.css" type="text/css">

 ・一番下に書く

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script src="[ファイルパス]js/css3-animate-it.js"></script>



  使い方

使い方

1.親ボックスにanimatedParentクラスを指定、子ボックスにanimatedとアニメーションネームbounceInDownを入れる。

アニメーションの種類は33種類。(2019/05/14現在) http://jackonthe.net/css3animateit/examples/ こちらでアニメーションを確認できる。

2.コンテンツが表示領域に入ったら、指定のアニメーションが実行される。

3.オプションもあり(下記より)



  オプション:Sequencing

オプション:Sequencing

順番にアニメーションが実行される。



  オプション:Offset

オプション:Offset

表示領域に入る前か後か、どのタイミングで実行されるか設定できる。(スクロール量で設定)

例えば、表示領域に入って300pxスクロールしたところでアニメーションさせたかったらこの値を-300とする。



  オプション:Animate Once

オプション:Animate Once

アニメーションは一度だけ実行。

アニメーションが実行されて、表示領域から出てもう一度入ってもアニメーションは実行されない。



  オプション:Animation Speed

オプション:Animation Speed

アニメーションの速さ(default, slow, slower, slowest)※animation.cssに設定値ある



  オプション:Delay

オプション:Delay

アニメーション個別のディレイを設定(delay-250~delay-3500まで)※animation.cssに設定値ある



  オプション:On Click Toggle

オプション:On Click Toggle

クリックで発生する。

クリックボタンに「data-target」を指定。その値のクラス名を持つ要素がアニメーションする。

親ボックスに「animatedParent」クラスを忘れないで!



  オプション:On Click With Sequencing

オプション:On Click With Sequencing

クリックアニメーションが順番に実行される。Sequencingのクリックボタンバージョン。

親ボックスに「animatedParent」クラスを忘れないで!



  オプション:IE Fix

オプション:IE Fix

IE9以下にはアニメーションが適用できないので、以下のファイルを設置する。設置場所は<head>内。animations.cssの下とか。

IE9以下はCSS3に対応していない。もしくは一部適用できないので、これはIEハック用のファイルです。




 CSS3 Animate It -- チュートリアル

 CSS3 Animate It -- Example

 開発したのこの人

 似たようなもの(Animate.css)

※こっちのほうがシェアは高そう。ただしこちらは純粋なCSSプラグインなので、動的にしたい場合は、jQueryで設定する必要がある。

 サンプルファイル(これで動作テストできます)


Facebookも情報発信中!
広告