CSS3の効果プラグインwow.js

書き込みCSS3のエフェクトを使用している場合、あなたは多くの問題が発生しますCSS3のコードはデバッグの多くを必要としますが、今wow.jsを持っている、特殊効果の多くを書くが容易になります。

公式サイトをwow.js

HTTPS:// www.delac.io/wow/index.html

チュートリアル:

ステップ:wow.jsに依存animate.css、または必要に応じてヘッド内animate.cssのanimate.min.cssを導入します。

<リンクのrel = " スタイルシート"のhref = " CSS / animate.css " >

ステップ2:wow.jsまたはwow.min.jsの導入は、その後のjsファイル内のコードの行を記述します。

< スクリプトSRC = "JS / wow.min.js" > </ スクリプト> 
< スクリプト> 
新しい(WOW)のinit();
</ スクリプト>

第三段階:そして対応するブロック要素は、クラスの適切なクラス名を追加し、アニメーションを実現することができます。

< DIV クラス= "WOW slideInLeft" データWOW-期間= "2S" データWOW-遅延= "5S" データWOWオフセット= "10"   データWOW-反復= "10" > </ DIV >
;:WOW追加する必須である
左側からスライド、アニメーションのスタイルを示す:slideInLeft 
DATA-WOW-DURATION:アニメーション期間; 
DATA-WOW-遅延:アニメーション遅延時間、
データWOWオフセット:要素位置を実行した後に画素数の底面から露出され、
データWOW反復:アニメーション実行頻度; 
=== 4つのオプションの属性はオプションです。

 

すごいローリン 左から右に、設定値を変更するには、100%から時計回りに、透明性をスクロール
   
すごいbounceIn 小から大へ、ホームポジションから表示設定値を超え、設定値に次いで小さな変化し、その後、設定値を変更するために、100%から設定値、透明度に戻します
すごいbounceInUp ボトムアップから、後の部分は、その後上向きに透明変わらず、設定値を超えて跳ね返ります急襲
すごいbounceInDown トップダウンから、将来の落下部分がそれをバウンス、その後を超えてなり、設定値の透明度と同じ
すごいbounceInLeft 左から右へ、未来は弾性部を越えて右に上に移動し、その後、設定透明度値変わらず、それを残します
すごいbounceInRight 右から左に、将来は、右の爆弾についての一部を超えて、その後透明そのままの設定値を左に上に移動してます
   
すごいslideInUp ボトムアップから、後に設定位置が固定された、(アップボトムアップからの)透明度変更の設定値が(下の要素は、ボックスの高さを伸延する場合)
すごいslideInDown 上から下の位置が固定されているセットへの透明性への設定値を変更します
すごいslideInLeft 左から右へ、バックセット位置まで固定され、設定値は、(左から右へ左れる)変わらない透明性があります
すごいslideInRight バックセット位置まで、右から左に、一定の不透明度の設定値を固定されています
   
すごいlightSpeedIn 右から左に、第1ヘッドが右に傾斜し、左に傾斜し、最終的に元の形状に、100%の透明度が設定値を変更します
すごいパルス 本来の透明度値の大きさを減少させるために少し拡大したホームポジションでは(複雑なアニメーション実行優れた効果のプロパティをカウント)定数設定されています
すごいflipInX 植える前にオリジナルリクライニング位置、100%から透明度が設定値を変更するには
すごいflipInY ホームポジションを中心に回転させることで、100%の透明度が設定値を変更するには
すごいバウンス アップシェイクダウン、(アニメーション実行時間とアニメーションプロパティの継続時間も激しく振るか、ゆっくりと揺れ実現することができると)変わらない透明度の値を設定します
すごい振ります ジッタ、透明性setted値(アニメーション実行時間とアニメーションの継続時間とプロパティも激しく振るか、ゆっくりと揺れ達成することができます)について
すごいスイング 右から左へ、第1ヘッドが右に傾いて、そして左に傾いたから、最終的に元の形状に、透明そのまま設定値
すごいbounceInU 元の位置変更せずに、直接ディスプレイに表示されません(無トランジション効果を超えます)
すごいウォブル その頭揺れ、透明そのまま設定値の周りに立っている人に似てそのまま元の位置、

おすすめ

転載: www.cnblogs.com/e0yu/p/11444441.html