プログラミング

JSで驚くほど簡単にスクロール連動型アニメーションを実装する方法

スクロール連動型アニメーション
ユウマ
こんにちは、ユウマ(@yuuuma_11)です。

 

アニメーションって楽しいですよね!

 

どんなに味気ないサイトでも、少し動きを加えてあげるだけでユーザーに与える印象がかなり変わります。

 

ただ、プログラミングを始めたばかりの人が、1からスクロール連動型のアニメーションを実装しようとすると、JS / jQueryを駆使しなければいけないため、苦戦する可能性があります。

 

そこで「wow.js」というjavascriptのプラグインを使用することで、プログラミング初心者の方でも驚くほど簡単に、スクロール連動型アニメーションを実装することができるんです。

 

wow.jsを使うことで、以下のようなアニメーションが簡単に実装できます。

wowjs_preview

 

この記事では、そんな「wow.js」の実装方法や、使い方について詳しくご紹介していきます。

 

ユウマ
プログラミング初心者でもとても簡単に実装できるので、ぜひトライしてみてください!

 

wow.jsの実装方法

wow.jsを使用するには、まず以下の準備が必要になります。

  • 「wow.js」の導入
  • 「Anmate.css」の導入
ユウマ
どちらも時間を掛けずに簡単に導入することができるので、安心して下さい。

 

wow.jsをダウンロードする

wow.jsを入手するには、まずは以下のURLからGitHubのリポジトリにアクセスし、wow.jsをダウンロードしてきます。

https://github.com/matthieua/WOW

 

ちなみにwow.jsは「dist」フォルダの中に入っています。

※フォルダの中にはwow.jsとwow.min.jsがありますが、導入するのはどちらでも構いません。

wowjsの場所

 

次にダウンロードしたファイルを、導入したいhtmlファイルが入っているフォルダ内に移動させます。

 

Animate.cssをダウンロードする

Animate.cssは以下のURL先からダウンロードすることができます。

https://daneden.github.io/animate.css/

animate_cssの場所

 

wow.jsと同様、ダウンロードしたファイルを、導入したいhtmlファイルが入っているフォルダ内に移動させます。

 

「wow.js」と「Animate.css」をHTMLファイルに読み込ませる

wow.jsとAnimate.cssのダウンロードが終わったら、以下のコードをHTMLファイルに記述して読み込ませます。

※ファイルを置いた場所によって、hrefとsrcのパスを書き換えて下さい。

 

ここまでの作業でファイルを読み込ませることはできましたが、wow.jsを使用するには初期設定が必要で、以下のコードを追加で記述する必要があります。

これでwow.jsを使用する準備は整いました。

 

wow.jsの使い方

wow.jsの使い方はとても簡単で、アニメーションを加えたい要素に「wow」というクラス名と、Animate.cssのページから実装したいアニメーションを選び、そのアニメーションに対応するクラス名をつけるだけです。

アニメーション選択

 

例えば以下のようにクラス名をつけるだけで、、、

 

このようなアニメーションが簡単に実装できます。

fadeInLeft

 

 

wow.jsのオプション

wow.jsにはオプションも用意されていて、オプションを使用することでアニメーションの時間や、アニメーションを繰り返す回数など詳細な設定をすることが可能になります。

 

以下がwow.jsで用意されているオプションになります。

wow.jsのオプション

  • data-wow-duration・・・アニメーションの時間
  • data-wow-delay・・・スクロールが要素に達してからアニメーションがスタートする時間
  • data-wow-offset・・・スクロールが要素に達してからアニメーションがスタートする距離
  • data-wow-iteration・・・ アニメーションの繰り返し回数

 

オプションはクラス名とは別に指定することで反映されます。

※スクロールで端まで見れます。

 

例えば以下のようなオプションを設定すると、、、

 

このように、遅れてアニメーションを起動させることができます。

data-wow-delay

 

最後に

今回紹介したwow.jsのような、簡単実装できるのに見た目に大きく変化があるものは使っていて楽しく、学習のモチベーションも高まると思います。

 

ユウマ
自分の制作するサイトにアニメーションを加えたいとお考えでしたら、ぜひ利用してみて下さい!

-プログラミング

Copyright© ユウマのブログ , 2020 All Rights Reserved.