デイトラweb制作中級編 DAY24

スクロールに応じて要素を「フワッ」と登場させる

WOWライブラリでアニメーションを作成

無料のMIT版 → https://github.com/graingert/wow

下準備

1. Code から Download ZIP をダウンロードして解凍する

2. animate.csswow.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">3秒かけてアニメーションを実効</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」のほかにも、いろいろなアニメーションがあって楽しかったです。

自分で作ったらとんでもなく時間がかかりそうなので、ライブラリの存在は本当にありがたいなぁと思いました!

コメントを残す

メールアドレスが公開されることはありません。