first-launch by 張閔傑
TRANSCRIPT
![Page 1: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/1.jpg)
Front-End Developers Taiwan Party-3
著迷! Parallax Scrolling 視差滾動
2013 年 12 月 5 日 @ MakerBar Taipei
![Page 2: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/2.jpg)
張閔傑
![Page 3: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/3.jpg)
![Page 4: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/4.jpg)
![Page 5: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/5.jpg)
![Page 6: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/6.jpg)
ideas do it complete> >
![Page 7: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/7.jpg)
Single Page 單頁式網站
ideas >
Why
![Page 8: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/8.jpg)
Single Page 單頁式網站
ideas >
Why
酷資訊不常變 可以沒有介面
適合說故事
![Page 9: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/9.jpg)
網站 動畫Website Animation
說故事
ideas >
![Page 10: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/10.jpg)
開門見山法:吸引瀏覽者停留
太空降落:營造故事氛圍
網站 動畫Website Animation
ideas >
![Page 11: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/11.jpg)
吸引注意力:
視差與移動速度
do it >
![Page 12: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/12.jpg)
背景
前景主要資訊
do it >
![Page 13: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/13.jpg)
設計畫面 / 動態畫面
do it >
![Page 14: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/14.jpg)
do it >
![Page 15: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/15.jpg)
do it >
![Page 16: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/16.jpg)
節奏感!
do it >
![Page 17: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/17.jpg)
do it >
![Page 18: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/18.jpg)
選擇與取捨
complete >
![Page 19: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/19.jpg)
支援裝置
螢幕尺寸
complete >
![Page 20: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/20.jpg)
最佳化原始
complete >
![Page 21: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/21.jpg)
![Page 22: First-launch by 張閔傑](https://reader031.vdocuments.mx/reader031/viewer/2022013111/55a2cc7f1a28ab4d2e8b45cf/html5/thumbnails/22.jpg)