スクロールの動きに合わせてふわっと出てくるようなアニメーション、付けたいですよね？
「wow.js」「animate.css」を組み合わせると簡単にできます。
「animate.css」が去年新しくなり、それまで使ってた書き方で動かなくなったので自分のためにメモしておきます。
一応20201年1月最新版と言って大丈夫かと。
サンプルはこちら。
ちょっとうるさいですが、ふわっと下から出てきたりパタパタ動いたりしてますよね。
これですこれ。
Cocoonで使ってみました。
①ヘッダに「wow.js」「animate.css」を読み込むコードを書く
ソースはダウンロードして使う方法とCDNを使う方法があります。
詳しくは公式（英語）をどうぞ…
wow.js
animate.css
今回はCDN。
<head>～</head>にこちらを記述するのですが、Cocoonだと…うーん、とりあえず「Cocoon設定」の「アクセス解析・認証」の「ヘッド用コード」に書いても動きます。
推奨された方法ではないでしょうけども…
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
②実行用スクリプトを書く
Cocoonの公式子テーマを使用している場合は「javascript.js」にこれを書くだけ！
new WOW().init();
Cocoonの公式子テーマを使用していない場合は<head>～</head>の間にでもこれを。
<script> new WOW().init(); </script>
③動かしたいところにclassをつける
例えば下からふわっと出てくる動きなら、要素に「class=”wow animate__animated animate__fadeInUp”」をつけます。
「animate__fadeInUp」の部分が動きによって変わってきます。
animate.cssの右側に一覧が並んでるので、動きなどは見てみてください。
アニメーション名クリックするとメインコンテンツの「Animate.css」が動きます。
この画面からコードのコピーもできます。（アニメーション名にホバーすると右側に「□」が出るのでクリック。）
ちょっと遅らせる場合は「data-wow-delay=”0.3s”」とかつけちゃうとよいですね。
数字が大きくなるほど遅くなるよ。
サンプルサイトでは上部の3カラム部分（明朗会計で安心・なんたらかんたら・なんたらかんたらのところ）で0.3sずつディレイしてます。
雑なまとめで申し訳ないですが、多分これが一番簡単な方法だと思います。
しかし最近は動きのあるサイトが多いので動かないとサイトを見ると物足りなく感じてしまいますね。
ちょっと昔は動き（動画や音楽も含め）があるサイトはうるさいなんて言われてたのになあ（インターネット老人会
ほかにもオプションなど沢山あるので、この内容で物足りない方は公式で…！
コメント