Webアプリ開発コース初級編
WEBサイトとミニアプリを作れるようになろう
JavaScript・jQuery学習編
- DAY 24【調べながら実装しよう】jQuery実践課題①
DAY 24
【調べながら実装しよう】jQuery実践課題①
jQueryの基本まで学んできたので、今日・明日は課題に沿ってjQueryのアニメーションを実装してみましょう!
初級編でコーディングしたスイーツサイトをベースに、これから指示するアニメーションを実装してみてください。
なお、これから出題するアニメーション課題は、様々なサイトで実装されているメジャーなものばかり。調べれば必ずサンプルコードが見つかるものばかりです。
この2日間は「解決する力」を養うために、自分で調べて、学んだ知識を駆使して、考えながら実装してみましょう!そのためのヒントは残しておきます。
それでも実装の糸口さえ掴めない時は、質問部屋で聞いてください。まずは「自分で調べて実装する」にチャレンジしてみましょう。
※なお、今回はjQuery以外のライブラリは利用せずに、自分でjQueryのコードを書いて自作してください。
TIPS
01.課題①:ドロワーメニューの実装
まずはドロワーメニューの実装です!
実装条件
- Menuをクリックすると
- 新発売・おすすめ・期間限定のメニューを表示
- 開閉時間の指定は不要
ヒント:開閉ボタンなどのように、表示・非表示や再生・停止を操作するボタンのことをtoggleと呼びます。
02.課題②:ページトップへ戻るボタンを付ける
続いて基本中の基本、「ページトップに戻る」ボタンの実装です!
実装条件
- トップから80pxスクロールしたら
- 300ms(0.3秒)かけて
- フェードイン・フェードアウトで表示・非表示
- 表示してる間はボタンはページ右下に固定
- ボタンを押したら500ms(0.5秒)かけてページトップへ戻る