F2E 2022 Sean Week1

網站連結

專案說明：

• html(pug)分為導覽列、主選單、主要內容、頁尾

• css(sass)除上方結構各自CSS檔案，另有mixin, reset, variable(變數及共用元件), font

• JS 使用jQuery、原生JS，分為動畫專用 gsap.js /其他元件 app.js

• 請使用1920x1080解析度預覽，RWD實在沒時間做

互動說明

入口頁面

• loading完，選單進場
• 六角學院/UI DESIGN/FRONTEND 可自由切換（無功能）
• 導覽列可點擊右側出現已登入畫面
• 點擊左上角logo重新載入，關卡資訊、求職專區、Q&A 無綁定連結(javascript:;)
• 點擊滑鼠可下滑至下個頁面

對戰畫面

• 採用滾動式差進場
• 選項可點擊切換箭頭
• 出現活動說明，再次點擊'等不及了'
• 點擊week1/week2/week3圖片，出現地圖
• 不需等待文字跑完，可點擊寶箱，寶箱動畫跑完自動下滑

區區修煉...

• 因為是文字區塊，提供使用者閱讀，待閱讀完畢後，滾輪下滑即可自動下滑至下個畫面
• 文字打字機特效、金塊流動特效

頁尾區塊

• 於該區塊內滾輪上滑出現大神(預設)
• 於該區塊內滾輪下滑出現贊助商