2020年1月22日30DAYSトライアルの課題で、スクロールに合わせて要素をフワッと表示させるコーディングを実施しました。デイトラの中でおすすめされていたのが「wow」というjavascriptライブラリでした。実際にやってみたらめちゃくちゃ簡単にアニメーションをつけることができました。簡単に設定できて楽しい!これも、jQueryを使わないんですね。動きをつけながら遊んでみます。wow公式サイトびっくりするほど簡単なので、一つずつ解説していきます。GitHubからwow.cssとwow.min.jsをダウンロードまず、wow公式サイトにアクセスしてGitHubをクリックします。GitHubの画面からファイルをダウンロードし、以下のファイルを作業フォルダに移します。wow.csswow.min.jsCSSとjavascript読み込みCSSとjavascriptの読み込みのための記述です。Here</div>動きをつけたい要素にwowのクラス名と、animate.cssで定義されているクラス名をつけるだけ。この、animate.cssで定義されているクラス名をつけることで、様々な動きを簡単につけることができます。こちらのデモサイトを見て、どんな動きをつけたいか調べます。Animate.cssこんな感じで、動きを確認することができます。</div>slideInUpという動きをつけたいのであれば、上記のように記述をすれば、簡単に動きを出すことができます。wowはオプション設定も簡単!オプションというと、javascriptを触らないといけないイメージがありますが、wowはめちゃくちゃ簡単です。代表的なオプションは以下の通りdata-wow-duration:アニメーションの長さを変更するdata-wow-delay:アニメーションを開始するまでの遅延data-wow-offset:アニメーションを開始する距離data-wow-iteration:アニメーションの回数繰り返される例えば、slideInUpの動きを指定していたとします。デフォルトだと、「スクロール→その要素がウィンドウ内に入ったらアニメーション」となるので、場合によっては動き出すのが早すぎてアニメーションが見辛いってことになります。その例がこちら↓http://keibloglife.com/wp-content/uploads/2019/07/画面収録-2019-07-08-22.02.32.mp4ちょっと動き出すのが早すぎて、「ほんまにアニメーションしてる?」って感じがしません?そんな時は、オプションの中から「data-wow-delay:アニメーションを開始するまでの遅延」を使います。先ほど書いたHTMLタグの中に、date属性として記述すればおっけーです。Here</div>これだけで、簡単にオプションが使えます。data-wow-delayを指定した後がこちら↓http://keibloglife.com/wp-content/uploads/2019/07/画面収録-2019-07-08-22.10.39.mp4遅れて見える分、はっきりとアニメーションがわかりますし、よりおしゃれな演出ができますね。高度なオプションもあるみたいですが、これだけでも十分に豊富なアニメーションがつ使えるなーといった印象です!簡単に、僕のようなコーディング初心者でもできましたので、ぜひ試してみてください。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。