エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

【DAY20,21】スクロールのアニメーションとドロワーメニュー【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

デイトラ課題

デイトラDAY20の課題は「jQueryのライブラリを使いスクロールに応じたアニメーションを設定する」です。

 

DAY20もDAY21も語ることがないので、まとめて記事にしますw

 

【DAY20】アニメーション用のライブラリWow

DAY20の課題は、スクロールに応じて要素を「フワッ」と登場させる、というもの。

 

アニメーション用のライブラリWowを使うと、かなり簡単に「フワッ」と表示できました。

  1. GitHubからダウンロード
  2. ライブラリ読込
  3. Wowの設定をする
  4. Wowを実行する記述を書く(Init)

という方法でOKでした。

ライブラリの使い方に慣れたら簡単に出来ると思います。

 

アニメーションについては、色々な種類があるので、ホームページを見てみるのがオススメ↓

www.delac.io

 

【DAY21】ドロワーメニュー作成

DAY21の課題は、スマホ時のドロワーメニューを作る、というもの。

ライブラリの使い方などは、はにわまんさんの記事を見れば出来るはずなので、割愛。

 

そもそもドロワーメニューとは?

そもそもドロワーメニューとはなにか?

ページ端っこにある「3本線(2本線)のアイコン」を押すと、ぬるっと出てくるメニューのことです。

 

英単語の「ドロワー(drawer)」とは「引き出し」という意味。

※名前の由来は「引き出しのように出し入れできる」ことっぽい

 

【余談】ハンバーガーメニュー、ハンバーガーボタン

ちなみに、3本線のアイコンは「ハンバーガーボタン(アイコン)」「ハンバーガーメニュー」と呼ばれることも多いようです。

  1. バンズ(パン)
  2. ハンバーグ
  3. バンズ(パン)

の3層構造から来ているっぽい?

 

ボタンだと気づかない人も多そうなので、私はあまり好きではないですけど…

gigazine.net

 

以上、DAY20とDAY21の解説でした。

今回は、語るところが無い…(灬╹ω╹灬)

 

他の日の記事はこちらにまとめています↓

www.engineer-step.com