這些手機銷售前端頁面用了哪些技術？

01-21

作為一個後端，一個普通用戶，在看到一些驚艷的前端效果的時候有的時候會很好奇，例如像這些手機銷售的頁面，感覺真的很炫，圖片的fullwidth，下滑slider，在某個silder中可能又會有左右滑動的silder，以及一些動畫效果，在膜拜前端的同時陷入了深深的思考，這些手機銷售前端頁面用了哪些技術？
一加 http://www.oneplus.cn/yijiashouji
鎚子 http://www.smartisan.com/#/overview

小米4 http://www.mi.com/mi4
魅族 http://www.meizu.com/products/mx4fun.html

主要是fullPage

jQuery全屏滾動插件fullPage.js演示_dowebok

補充兩個沒用過的

jQuery單頁/全屏滾動插件onepage-scroll演示_dowebok

jQuery全屏滾動插件Scrollify演示_dowebok

看界面代碼：主要有：

jquery.fullPage.js 全屏滾動插件

bxSlider 響應式輪播插件

jquery/jquery-mousewheel · GitHub 滑鼠滾輪滾動監聽插件

另外大部分使用視差滾動效果

可以總結出來的一些 keywords：單頁（非單頁應用 SPA）、視差滾動、動畫。

單頁：整個頁面只有一個 HTML，但通過 CSS/JS 劃分成多個部分（畫面），然後通過滑鼠/鍵盤來觸發切換動作（類似 PPT）。

視差滾動：畫面中的一個部分/多個部分之間的動畫效果，一般是通過畫面進入/離開/滾動動作觸發。

動畫：可能是 CSS/JS 做成的動畫。

其中涉及的一些技術難點：

單頁布局：將一個頁面劃分為多個畫面，既要保證每部分的內容完整的顯示在一屏中，又要保證內容合理布局，填充整個瀏覽器的內容區域（viewport）。需要對內容進行合理的排版，同時考慮不同解析度的適配。

頁面切換：類似 PPT 的切換播放，單頁網頁的畫面切換以及畫面內動畫的播放也需要通過一些事件/條件觸發。處理得好，能有平滑的操作和瀏覽體驗。如果處理失誤，可能會產生破壞效果。（比如許多單頁網站只能通過滑鼠滾動甚至點擊來切換畫面，無法通過觸摸、滑動或者鍵盤來切換）

單頁是一種調整網頁內容、布局及操作方式的處理方法。它可以有效增強頁面的視覺效果和操作體驗，但也可能破壞掉頁面的操作體驗，需要在設計和編碼時多加考慮。

（可能會有一些詞語或描述不太恰當，歡迎指正）

..不用感覺很炫，基本上每一個職業前端都能做得出來。。用的技術也無非就是html5，js，css。。。

而且還很可能用了前端框架。。前端自己需要開發的部分並不多。說不準這些前端還捉摸著哇靠後端那些人居然能支持10W人同時訪問頁面，這麼猛？