デイトラのロゴ

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

JavaScript・jQuery学習編
DAY 24
【調べながら実装しよう】jQuery実践課題①

jQueryの基本まで学んできたので、今日・明日は課題に沿ってjQueryのアニメーションを実装してみましょう!

初級編でコーディングしたスイーツサイトをベースに、これから指示するアニメーションを実装してみてください。

なお、これから出題するアニメーション課題は、様々なサイトで実装されているメジャーなものばかり。調べれば必ずサンプルコードが見つかるものばかりです。

この2日間は「解決する力」を養うために、自分で調べて、学んだ知識を駆使して、考えながら実装してみましょう!そのためのヒントは残しておきます。

それでも実装の糸口さえ掴めない時は、質問部屋で聞いてください。まずは「自分で調べて実装する」にチャレンジしてみましょう。

※なお、今回はjQuery以外のライブラリは利用せずに、自分でjQueryのコードを書いて自作してください。


TIPS

01.課題①:ドロワーメニューの実装

まずはドロワーメニューの実装です!

実装条件
  1. Menuをクリックすると
  2. 新発売・おすすめ・期間限定のメニューを表示
  3. 開閉時間の指定は不要

ヒント:開閉ボタンなどのように、表示・非表示や再生・停止を操作するボタンのことをtoggleと呼びます。

02.課題②:ページトップへ戻るボタンを付ける

続いて基本中の基本、「ページトップに戻る」ボタンの実装です!

実装条件
  1. トップから80pxスクロールしたら
  2. 300ms(0.3秒)かけて
  3. フェードイン・フェードアウトで表示・非表示
  4. 表示してる間はボタンはページ右下に固定
  5. ボタンを押したら500ms(0.5秒)かけてページトップへ戻る

03.困ったらまずは「よくある質問」をご覧ください!