從 RWD 一頁式網頁基礎上,加上插件增加畫面豐富度,最後再延伸瀑布流的分享頁面。
- 將自己想要呈現的畫面,實際執行在網頁上
- 嘗試自己設定 RWD
- jQuery插件的實際運用
- navbar:在設定響應式的效果花比較多的時間研究與測試,以及不使用網頁工具置入 icon,該如何呈現 Hamburger icon 與 Close icon,再使用 JQuery 設定 toggle 效果; 使用插件_OnePageNav製作捲動與選單的互動效果
- jumbotron:使用插件_Vide置入影片
- about:在 Read More 按鈕上也設定效果,點擊後會呈現完整文字,而按鈕也將消失
- menu:以插件_owl-carousel與插件_Fancybox搭配呈現
- reservation:利用插件_Scrollreveal使背景畫面有滾動效果,而問答則是用 JQuery 設定呈現
- contact:嵌入 google map
- footer:以插件_Scrollreveal搭配插件_Parallax呈現
- evaluation 頁面:評價的卡片呈現,則是使用插件_Masonry瀑布流來構成頁面
整體頁面設定:
- 插件_Scrollreveal使畫面滾動後,設定元件的動畫方式
- 插件_Parallax在視差滾動時添加圖片,增加整體網頁趣味性
開發環境: Visual Studio Code