うわー.js
1 はじめに
一部のページを下にスクロールすると、一部の要素で小さなアニメーション効果が生成されます。例えば、スクロールバーをある位置までスライドさせるとアニメーションを表示させることができる。wow.js はanimate.cssに依存している ため、animate.css で 60 種類以上のアニメーション効果をサポートしており、さまざまなニーズを満たすことができます。
IE6、IE7 およびその他の古いブラウザは CSS3 アニメーションをサポートしていないため、効果がありません。また、wow.js も querySelectorAll メソッドを使用しているため、IE の以前のバージョンではエラーが報告されます。より良い互換性を実現するには、ブラウザとバージョン判定を追加するのが最善です。
wow.js は、Web ページ スクロール アニメーション用の JS フレームワークで、animate.css と併用して、 Web ページ スクロール中にanimate.css アニメーション効果を解放できます。
公式ウェブサイトのアドレス: mynameismatthieu.com - ドメイン所有者との連絡先 | Epik.com >
ソースコードのダウンロードアドレス: https://github.com/matthieua/WOW
互換性: animate.css と同じ
ドキュメント:スクロール時にアニメーションを表示 — WOW.js
2. 使用手順
使用手順:
1 animate.css ファイルと wow.js ファイルをインポートします
(animate.css の特殊効果については、 Animate.css へのリダイレクトを参照してください )。
2 HTML構造を書く
スクロールする要素に2つのクラス名を追加します
<div class="wow slideInLeft"
data-wow-duration="2s" //动画持续时间
data-wow-offset="10" //动画延迟时间
data-wow-iteration="10">//动画执行次数
</div>すごい (混合アニメーションを使用して要素を宣言)
アニメーション名（スクロール解放用アニメーション名）
3 wow を初期化します: new WOW().init()
次の表は、対応するクラス名の一部とその効果を示しています。
| クラス名 | アニメーション効果 |
|---|---|
| すごいスライドインアップ | 下から上へ、上に上がった後は設定位置に固定、透明度は設定値と同じ（上は下から上）（要素が下にある場合はボックスの高さが拡張されます） |
| すごい、SlideInDown | 上から下へ、上昇後は設定位置に固定、透明度は設定値と同じ |
| すごい、左にスライド | 左から右へ、上がってきたら設定位置に固定、透明度は設定値のまま（左は左から右へ） |
| うわー、右にスライド | 右から左へ、上がってから設定位置に固定、透明度は設定値のまま |
| すごいロールイン | 左から右へ、時計回りにスクロールすると、透明度が 100% から設定値まで変化します |
| すごいバウンスイン | 元の位置から出現し、設定値を超えて小から大に変化し、その後設定値より小さくなり、その後設定値に戻り、透明度が100%から設定値に変化します |
| すごいバウンスインアップ | 下から上へ、上にジャンプした後、一部上昇し、その後跳ね返ります。透明度は設定値と同じです。 |
| すごいバウンスインダウン | 下から上へ、上にジャンプした後、一部上昇し、その後跳ね返ります。透明度は設定値と同じです。 |
| うわー、左にバウンス | 左から右に移動後、右の一部を超えてから左にフリックすると透明度は設定値と同じになります |
| うわー、右にバウンス | 右から左へ移動後、左の部分を超えてから右にフリックすると透明度は設定値と同じになります |
| すごい光スピードイン | 右から左へ、最初に頭が右に傾き、次に左に傾き、最後に元の形状に変化し、透明度が 100% から設定値まで変化します |
| すごいパルス | 元の位置を少し拡大してから元のサイズに縮小し、透明度は設定値のままになります（アニメーション実行回数属性と連携すると良いでしょう） |
| すごい、flipInX | 元の位置を後ろに傾けて前に植え、透明度が100%から設定値に変化します |
| すごい、flipInY | 元の位置を左右に回すと、透明度が100%から設定値に変わります |
| うわー跳ねる | 上下に振ると、透明度は設定値のまま変化しません（アニメーションの実行時間とアニメーションの継続時間属性と連携して、激しいまたはゆっくりとした揺れを実現します） |
| うわー揺れる | 左右に振ると透明度は設定値のままです（アニメーションの実行時間やアニメーションの継続時間属性と連携して、激しい揺れやゆっくりとした揺れを実現します） |
| すごいスイング | 右から左へ、頭は最初に右に傾き、次に左に傾き、最後に元の形状に変わり、透明度は設定値と同じになります。 |
| すごいバウンスInU | 元の位置は変更されず、非表示から直接表示に変わります (トランジション効果なし)。 |
| うわーぐらつく | 人がそこに立って首を左右に振っているように、元の位置は変化せず、透明度も設定値のままです。 |
コードデモ:
<!DOCTYPE html>
<html>
<head>
<title>wow演示</title>
<meta charset="utf-8">
<!-- 1.引入wow依赖的animate.css -->
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!-- 2.引入wow.js 文件 -->
<script type="text/javascript" src="js/wow.js"></script>
<!-- 3.now 对象 -->
<script type="text/javascript">
new WOW().init();
// 可选的参数
// wow = new WOW({
// boxClass: 'wow', //WOW.js需要执行动画的元素的class
// animateClass: 'animated', //animation.css 动画的 class
// offset: 0, //距离可视区域多少开始执行动画
// mobile: true, //是否在移动设备上执行动画
// live: true //异步加载的内容是否有效
// })
// wow.init();
</script>
</head>
<body>
<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s" data-wow-offset="1000" data-wow-iteration="1" style="width: 500px;height: 2000px;background-color: #ccc;position: absolute;left: 50%;margin-top: 0px;margin-left: -250px;margin-bottom: 50px">
wow 动画演示
</div>
<!-- slideInLeft 动画样式 -->
<!-- data-wow-duration 动画持续时间 -->
<!-- data-wow-delay 动画延迟时间 -->
<!-- data-wow-offset 元素的位置（左上角的位置）露出后距离底部多少像素时执行 -->
<!-- data-wow-iteration 动画执行次数 -->
</body>
</html>補足:
data-wow-duration (アニメーション継続時間) 単位: 秒/秒
data-wow-lay (アニメーション遅延時間) 単位: 秒/秒
data-wow-offset (要素の位置が露出されてから下から何ピクセルか) ) 要素の上部から表示領域 (コンテナ) の下部アニメーションまでの距離 (ページ上のアニメーションの出現位置を設定するために使用)
data-wow-iteration (アニメーションの実行時間) の値は純粋な値です。数値、無限はループ再生を意味します
3. 注意を払う
WOW.JS アニメーション効果は繰り返すことができず、一度しか表示できません
スクロールリビール.js
scrollReveal.jsWOW.jsと同様に、scrollReveal.jsページ上でスクロールやアニメーションを表示するプラグインでもありJavaScript、ページをより面白くし、ユーザーの注目を集めることができます。違いはWOW.js、 のアニメーションは 1 回のみ再生されるのscrollReveal.jsに対しのアニメーションは 1 回または無限に再生できることです。アニメーションは他のファイルではなく にWOW.js依存します。に依存していませんが、アニメーションも で作成されてため、以下のブラウザには対応していません。animate.cssscrollReveal.jsscrollReveal.jsanimate.cssCSS3IE10
公式サイトアドレス： https: //scrollrevealjs.org/
GitHub： https: //github.com/scrollreveal/scrollreveal
1.電話する
すべてのオブジェクトの効果を設定できます。つまり、scrollReveal オブジェクトを構成します。
<script>
var config ={
reset: true, //是否重新执行动画
，默认不重复（一次性动画）
enter: "left" , //动画开始的方向
move: '200px', //移动多少像素
over: "0.5s", //动画持续时间
after: "0s", //延迟
opacity: 0, //初始透明度
};
var sr = new scrollReveal(config);
</script
オブジェクトの効果を個別に設定することもできます
<style>
ul{
padding: 0;
list-style: none;
}
.box{
width: 500px;
/*background: pink;*/
margin: 0 auto;
/*overflow: hidden;*/
}
li{
width: 200px;
height: 200px;
background-color: #ccc;
margin-bottom: 30px;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
<script src="js/sr/scrollReveal.js"></script>
/*要引入包*/
<ul class="box">
<li data-scroll-reveal class="left"></li>
<li data-scroll-reveal class="right"></li>
<li data-scroll-reveal class="left"></li>
<li data-scroll-reveal class="right"></li>
<li data-scroll-reveal class="left"></li>
<li class="right" data-scroll-reveal="enter right move 100px over .5s after 1s">添加</li>
<li data-scroll-reveal class="left"></li>
<li data-scroll-reveal class="right"></li>
<li data-scroll-reveal class="left"></li>
<li data-scroll-reveal class="right"></li>
</ul>
<script>
var config ={
reset: true, //是否重新执行动画
enter: "left" , //动画开始的方向
move: '200px', //移动多少像素
over: "0.5s", //动画持续时间
after: "0s", //延迟
opacity: 0, //初始透明度
};
var sr = new scrollReveal(config);
</script>
</body>要約:
wow.jsとscrollreveal.jsの比較
1はjqueryに依存しません。2 WOW.js のアニメーションは 1 回のみ再生されますが、scrollReveal.js のアニメーションは1 回または無限に再生できます。
3 WOW.js は animate.css に依存しますが、scrollReveal.js は他のファイルに依存しません。
4 WOW.js は animate.css に依存しており、より多くのアニメーション効果が得られます