wow.jsの各種特殊効果に対応するクラス名を詳しく解説-jsチュートリアル-php.cn

wow.jsの各種特殊効果に対応するクラス名を詳しく解説

黄舟

リリース： 2017-10-24 09:51:56

オリジナル

1526 人が閲覧しました

wow.js のさまざまな特殊効果に対応するクラス名

1 (ページが下にスクロールすると、一部の要素で小さなアニメーション効果が生成されます。アニメーションは比較的小さいですが、注意を引くことができます。)

wow.js プラグインについて知りました。以前は他の Web サイトにアクセスして、スクロールバーをプルダウンしてさまざまな効果を確認していましたが、今では自分でこの効果を得ることができます。

エフェクトは出てきましたが、ネット上には様々な特殊効果に対応するクラス名が整理されていないので、皆さんの参考と勉強のために分かりやすい（少なくとも私には理解できる）記事を書きました。 (^_^)

二番目に、まずこのプラグインの使い方を説明します:

1. wow.js は animate.css に依存しており、最初に頭の中で animate.css または animate.min.css を参照します。

<link rel="stylesheet" type="text/css" href="css/animate.min.css">

ログイン後にコピー

2. 下部に wow.js または wow.min.js を引用し、その下に JavaScript コードをもう 1 行記述します。 (jQueryを引用する必要はありません)

<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();
</script>

ログイン後にコピー

new WOW().init(); の WOW は大文字にする必要があり、そうでない場合は効果がありません。
2. 下部に wow.js または wow.min.js を引用し、その下に JavaScript コードをもう 1 行記述します。 (jQueryを引用する必要はありません) 3. CSSの下とjsの上にアニメーションが必要な要素を記述します(blockまたはinline blockに設定する必要があります! blockまたはinline blockに設定する必要があります! blockまたはinline blockに設定する必要があります!) )、クラス名を追加します。

<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></p>

ログイン後にコピー

クラス名の前の「wow」はすべてのアニメーション要素に追加する必要があり、slideInLeft はアニメーションスタイルを示します。次の

data-wow-duration (アニメーションの長さ)、

data-wow-lay (アニメーションの遅延時間)、

data-wow-offset (露出後の要素の位置が下から何ピクセルであるか)

data -wow-iteration (アニメーションの実行数)

これら 4 つの属性はオプションです。

4. 記事を書くために、data-wow-offset と data-wow-iteration の 2 つの属性を具体的にテストしました。 data-wow-offset="value" の値は、要素と要素の間の距離です。ブラウザウィンドウの下部からの距離ではなく、アニメーションが完了した後のディスプレイの下部の位置です。

3. さまざまなクラス名のアニメーション効果を順番にテストしてみましょう。 (わかりやすいよう努めます)

下から上にスライドInUp

wow rollIn	左から右に時計回りにスクロールすると、透明度が100%から設定値まで変化します

wow bounceIn	は元の位置から表示され、小さい状態から変化しますから小さい設定値を大きく超え、その後、設定値よりも小さくなり、その後設定値に戻り、透明度が100%から設定値に変化します
wow bounceInUp	、その後、下から上に上に飛び上がると、上にある部分を超えてから跳ね返り、透明度は設定値のままです
すごいbounceInDown	上から下に、下に落ちた後、一部を下に降りてから跳ね返り、透明度が変わります設定値のままです
すごい bounceInLeft	左から右に移動した後、右の部分を超えてから左にバウンスします透明度は設定値のままですバウンスします。透明度は設定値のまま

	してから設定位置に固定すると、透明度は設定値のままになります(上はから)下から上) (要素が下にある場合、ボックスの高さが拡張されます)
すごい slideInDown	上から下へ、上がってきた後、設定された位置に固定され、透明度は変更されません。設定値
すごいSlideInLeft	左から右へ、上に来て設定位置に固定、透明度は設定値のままです(左は左から右)
すごいSlideInRight	右から左へ上がって設定値に固定固定位置と透明度は設定値のままです

wow lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX	原位置后仰前栽、透明度从100%变化至设定值
wow flipInY	原位置左右旋动、透明度从100%变化至设定值
wow bounce	上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake	左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU	原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

　　　测试了这么多终于摸到窍门了，打开引用的animate.css或者animate.min.css，里面@keyframes定义了各种动画，将wow后面的类名替换一下测试效果就可以了。

****************************************************************
            https://daneden.github.io/animate.css/          也可以在这个地方看各种演示
****************************************************************

ログイン後にコピー

四、配合data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可以完成很多效果，主要还是多实践。

五、IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

以上がwow.jsの各種特殊効果に対応するクラス名を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。