エンジニアブログ

Wow.jsとは？

Wow.jsは、スクロールやページ読み込み時に要素にアニメーションを追加するJavaScriptライブラリです。この記事では、Wow.jsを使用してウェブサイトにアニメーションを導入し、ユーザーエクスペリエンスを向上させる方法を紹介します。

デモ

スクロールすると青背景のボックスがふわっと表示します。

See the Pen wow.js sample by hide (@hide225) on CodePen.

Wow.jsの基本的な使い方

Wow.jsの導入

Wow.jsをダウンロードしてプロジェクトに組み込むか、CDNを使用して読み込みます。
今回はCDNを使用します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

Wow.jsの初期化

Wow.jsを初期化してアニメーションを有効にします。

<script>
 new WOW().init();
</script>

HTML要素へのWow.jsのクラスの追加

アニメーションを適用したいHTML要素に'wow'クラスとアニメーションの種類を指定します。

<div class="wow fadeIn" data-wow-duration="2s" data-wow-delay="0.5s">
 <!-- アニメーションを適用したいコンテンツ -->
</div>

アニメーションのカスタマイズ方法

アニメーションの種類変更

'data-wow-' 属性を使用してアニメーションの種類を変更できます。

<div class="wow zoomIn" data-wow-duration="1s" data-wow-delay="0.3s">
 <!-- アニメーションを適用したいコンテンツ -->
</div>

アニメーションのデュレーション変更

‘data-wow-duration‘ 属性でアニメーションのデュレーションを変更できます。

<div class="wow bounce" data-wow-duration="3s" data-wow-delay="0.5s">
    <!-- アニメーションを適用したいコンテンツ -->
</div>

アニメーションの遅延設定

data-wow-delay 属性でアニメーションの遅延を設定できます。

<div class="wow slideInLeft" data-wow-duration="1s" data-wow-delay="1s">
    <!-- アニメーションを適用したいコンテンツ -->
</div>

まとめ

Wow.jsを使用することで、シンプルな導入でウェブサイトにアニメーションを追加することができます。アニメーションのタイプや速さ、遅延などを調整して、ユーザーにインパクトのある視覚的なエクスペリエンスを提供しましょう。