30DAYSトライアル2nd

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

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

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

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

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

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

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

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

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




wowの使い方

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

  1. https://github.com/graingert/wowからwowをダウンロード
  2. ダウンロードした「css/animate.css」と「dist/wow.min.js」を読み込む
  3. 動きをつけたい要素に「wow 動作」のクラスを指定

これだけ。超簡単です。


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




感想・まとめ

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

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

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す