騰訊互娛新官網(wǎng)品牌站-復雜而強大的重構技術

2014年4月16日，由中國領先的互聯(lián)網(wǎng)綜合服務商騰訊公司舉辦的“UP2014騰訊互動娛樂年度發(fā)布會”在北京國家會議中心舉行，互娛官網(wǎng)的品牌站 http://ieg.tencent.com/ 也同一時間發(fā)布。TGideas 對這一次的官方網(wǎng)改版進行了包裝，在本次改版中，頁面重構上（小李刀刀 & 索尼克）運用了不少嘗試，整合了不少團隊先前積累的知識，今天給大家做一下分享。

技術點：

【頁面元素響應式+3D視差效果】

功能背景：近兩年來，隨著移動端流量的提升，高端瀏覽器逐步普及，IE6的占有率逐漸萎縮，我們可以對以前用Flash做視差效果做法進行大膽的改進嘗試，通過JS操作DOM節(jié)點并配合CSS3來實現(xiàn)視差效果。

實現(xiàn)方法：為每一屏的包裹層div綁定一個mouseMove事件，鼠標移動時，對頁面上需要移動的元素進行CSS3的translate位移處理。位移的幅度根據(jù)元素標簽上聲明的 data-z 屬性值來控制，上層元素位移幅度大，下層元素位移幅度小，從而形成一種視差的感覺。

【CSS3動畫】

功能背景：游戲官網(wǎng)在CSS3動畫方面已有非常多的案例及實踐，CSS3動畫能讓單調(diào)的頁面增加動感，提升用戶體驗，做好CSS3動畫，個人覺得兩個關鍵點：

實現(xiàn)方法：增加 css3-amination.css CSS文件 將所有CSS3動畫樣式寫于此文件，方便后面的動畫調(diào)節(jié)。

【SVG】

實現(xiàn)方法：簡單的元素直接新建.svg文件，在文本編輯器里手寫代碼，復雜的元素通過AI導出SVG文件。

【IconFont】

功能背景：主要用在頁面右側懸浮導航上面的ICON，由于右側導航顏色要適應頁面所在屏的顏色，總共有6組顏色導航，對應6組ICON，如果用傳統(tǒng)的Css Spriter雖然也能做，但手工拼圖過程繁瑣，且1張雪碧圖大小相比3種字體還要大20K. 用IconFont還是比較有意義的。

實現(xiàn)方法：PS 復制icon => AI貼入 => SVG 導出 =>icomoon生成字段庫及代碼

【jQuery 翻頁/滾動 插件】

【圖文列表寬度自適應】

功能背景：由于于設計師出稿是1920PX寬度的Demo。在1920px以下的寬度，頁面需要有良好的自適應，保證在不同PC分辯率下，每行的顯示的圖片數(shù)量都一致

實現(xiàn)方法：列寬度用百分比，圖片寬度100%，圖片高度自適應

【Grunt自動化構建】

功能背景：圖片壓縮，頁面CSS、JS文件合并壓縮，構建項目打包文件，這些繁瑣的手工操作全部交由Grunt自動化來完成，讓重構能更專注代碼的編寫，頁面交互功能的實現(xiàn)，前期花點時間配置一下，后續(xù)還是節(jié)省了大量不必要的重復工作。

實現(xiàn)方法：Node.js + Grunt  + Grunt插件

參考文章

• Javascript的3D視覺
• 非Flash動畫的簡單嘗試
• W3school SVG
• 字體圖標的制作方式
• Turn.js: The page flip effect in HTML5
• jquery.scrollTo
• Grunt打造前端自動化工作流

項目結語

      品牌站的建設前期講究視覺包裝，設計師可以在項目設計中有較大的發(fā)揮空間，頁面運用視差及動畫效果可以把設計風格更有力度地進行傳達，重構在前期需要跟設計師深入溝通，了解設計需要傳達的氛圍，盡量通過各種技術手段還原創(chuàng)意。項目上線以后，還需要跟進優(yōu)化，如SEO優(yōu)化引流，增加移動版頁面，定期關注數(shù)據(jù)反饋頁面點擊情況及流量，適當時間反饋給項目人員，讓大家了解項目效果，為以后的改進沉淀數(shù)據(jù)。