スクロールの動きに合わせてふわっと出てくるようなアニメーション、付けたいですよね？
「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ずつディレイしてます。
雑なまとめで申し訳ないですが、多分これが一番簡単な方法だと思います。
しかし最近は動きのあるサイトが多いので動かないとサイトを見ると物足りなく感じてしまいますね。
ちょっと昔は動き（動画や音楽も含め）があるサイトはうるさいなんて言われてたのになあ（インターネット老人会
ほかにもオプションなど沢山あるので、この内容で物足りない方は公式で…！
コメント
こちらの記事を参考にして、2021年4月頃に当サイトのcocoonでスクロール連動アニメーションが実行できるのを確認していたのですが、先ほどスクロール連動アニメーションがされていないことに気が付きました。nullllさんの参考サイトでもスクロール連動アニメーションがされてないようです。
解決方法がわかれば更新していただけると幸いです。よろしくお願いします。
OWCC様、コメントありがとうございます。
9/15 18:45現在、「http://ep3373.wp.xdomain.jp/」ではAnimate.cssは動いているようです。
Firefox、Chromeで確認しました。
念のためPHP、Wordpress、Cocoonすべてバージョンアップしてみましたが動いています。
キャッシュがいたずらしている可能性もありますので、一度キャッシュのクリアを行ってみるのは如何でしょうか…
返信ありがとうございます。
解決しました。PC設定でwindow内のアニメーションコントロールと要素をオフにしていたのが原因でした。
アニメーションをオフにしてWindows 10の動作をシャキっとさせる
https://kakakumag.com/pc-smartphone/?id=4007
キャッシュを削除したり、複数のブラウザで試しても表示できなかったのですが、nullllさんの方では動いていると回答をいただけたので、もっと別の原因があるのではと考え、最近PC設定を変更したことを思い出せました。ありがとうございます。
次からは別の端末でも動作するか確認します。
OWCC様
解決されたとのことでよかったです…！
デバイス側の制御って気付かなかったりしますよね～～わたしもよくあります！！