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

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

デイトラ2期(#30DAYSトライアル2nd)「DAY20,21 スクロールのアニメーションとドロワーメニュー」について解説します。

デイトラ課題(DAY20&DAY21)

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

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

 

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

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

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

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

という方法でOKでした。

 

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

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

 

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

ハンバーガーアイコンはダメなのか?

 

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