30DAYSトライアル2ndのまとめ【DAY21】

30DAYSトライアル2nd DAY21の課題は「スクロールに応じて要素を「フワッ」と登場させる」になります。

DAY20に引き続きXDデザインカンプから模写コーディングしたサイトに動きをつけていきます。

今回はページをスクロールして要素が初登場した時の動きをつけます。

【wow】スクロールして要素が初登場したときの動きをつけるライブラリ

スライダー（カルーセル）はライブラリが9つ紹介されていたのに対して、今回は「wow」というライブラリ一択です。

しかし、実際に使ってみたら「wow」が要素が初登場したときの動きをつけるライブラリの決定版ということが分かります。

しかも「wow」はMITライセンスのものがGitHubで公開されているので無料で商用利用も可能という素晴らしさです。

＊MITライセンスについては下記サイトの説明が分かりやすいです。
MITライセンスってなに？どうやって使うの？商用でも無料で使えるの？

wowの使い方

これは30DAYSトライアル2nd DAY21の課題記事に掲載されている、はにわまん(@haniwa008)さんのスクロールの登場に合わせてアニメーションさせる決定版！「wow」の紹介を見たら一発です。

これだけ。超簡単です。

#30DAYSトライアル 2nd DAY21完了

というか

❶ライブラリのファイルをダウンロード
❷ダウンロードしたファイルを所定の場所へ配置&記述
❸動きをつけたい要素にクラスを付与

これだけで完了。

ライブラリは便利すぎますね。#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/DrZ3hQwtMF

— じゅに💻脱サラに命かける人 (@Jyu210) January 21, 2020

クラスで指定する動作の内容は「animate.css」に記載されています。

感想・まとめ

ライブラリの便利さを超実感できる「The・ライブラリ」って感じですね。

この便利さはさすがに自作せずにガンガン使っていきいます。