デイトラweb制作中級編 DAY24
nakano
スクロールに応じて要素を「フワッ」と登場させる
WOWライブラリでアニメーションを作成
無料のMIT版 → https://github.com/graingert/wow
下準備
1. Code から Download ZIP をダウンロードして解凍する
2. animate.css と wow.min.js を自分のフォルダに入れる
animate.css に依存しているため導入
①JavaScript
new WOW().init();②HTML
<head>
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
・
・
・
<script src="js/wow.min.js"></script>
</body><section class="card section">
<div class="card__inner inner">
<h2 class="card__head section-title">Card</h2>
<div class="card__items">
<!-- ここから -->
<div class="card__item wow fadeInUp">
<div class="card__img"><img src="./img/card-img.png" alt=""></div>
<div class="card__title">タイトルタイトル</div>
<div class="card__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<!-- ここまで6セット -->
</div>
</div>
</section>アニメーションの種類
class="wow 好きなアニメーション"
※アニメーションは Animate.css からコピー
→ 今回は<div class="card__item wow fadeInUp">
データ属性
wow.jsのデータ属性
①data-wow-duration
→ アニメーションにかける時間を指定
②data-wow-delay
→ 可視範囲にはいってから発動するまでの時間を指定
③data-wow-offset
→ 可視範囲に入って何pxスクロールされたら発動するかを指定
④data-wow-iteration
→ アニメーションの繰り返し回数を指定
使用例
<h2 class="wow animate__animated animate__zoomIn" data-wow-duration="3s">３秒かけてアニメーションを実効</h2>
<h2 class="wow animate__animated animate__zoomIn" data-wow-delay=".5s">可視範囲に入って0.5秒後にアニメーションを開始</h2>
<h2 class="wow animate__animated animate__zoomIn" data-wow-offset="100">可視範囲に入ってさらに100pxスクロールされたらアニメーションを開始</h2>
<h2 class="wow animate__animated animate__zoomIn" data-wow-iteration="3">アニメーションを3回繰り返す</h2>※このままではアニメーションが指定されていないため、「fadeIn」のような好きなアニメーションをclassに追加
まとめ
今回はWOWライブラリを使って新しいアニメーションを実装しました。
cardクラスに使った「fadeInUp」のほかにも、いろいろなアニメーションがあって楽しかったです。
自分で作ったらとんでもなく時間がかかりそうなので、ライブラリの存在は本当にありがたいなぁと思いました！
