<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »帶你玩轉HTML5動效頁面(二)

        帶你玩轉HTML5動效頁面(二)

        至成科技 2015-05-03 訪問量(2776) 評論(0)
        摘要:

        介紹一個PS插件svgArtisan(目前還未有主頁),這個工具可以直接根據PSD的路徑圖層生成SVG圖形。

        接下來就簡單了,將設計稿上的路徑圖形用插件生成對應的SVG,例如是這樣的:

        (注意,其中的foreignObject標簽內是不支持svg的瀏覽器會看到一張.m3-svg-nosupport標簽下的圖片。)

        玩轉HTML5移動頁面(動效篇)

        再使用CSS3的animation控制stroke-dashoffset:

        玩轉HTML5移動頁面(動效篇)

        效果不難吧!SVG還有各種用途,例如制作ICONFONT等,可以深入挖掘。

        (4) 重力陀螺儀

        想讓頁面更有層次感,不妨讓設計提供一些碎片元素,例如彩花,星星之類,然后把它們單獨切出來放畫面前景,使用陀螺儀伴隨著手機運動碎片也跟著運動,多么好玩!

        這里提供一個工具可以輕松實現陀螺儀重力效果的:parallax.js

        用法簡單,定義一個parallax-obj的父類,把需要動的元素加上layer的類,然后設置動的范圍data-depth:

        玩轉HTML5移動頁面(動效篇)

        (5) 背景音樂&音效

        H5頁面要炫酷,畫面生動還是不夠的,一定要配合生動的音樂。因此可以主動跟設計或產品溝通,讓他們可以提供音樂資源,分分鐘導致UV猛漲有木有!

        當然,有了音樂,前端也不是直接引用的,還是有點要求:

        1.音樂不宜過長,30s為佳,而且音樂要加上漸現漸隱效果,方便循環播放;

        2.音樂體積要小,音質和流量,在手機上還是優先考慮流量吧。

        一般背景音樂體積可以接受的范圍是200K以下,若太大,可以使用格式工廠等軟件,降0它的比特率和聲道來改變體積。

        接著,只需要簡單引用:

        玩轉HTML5移動頁面(動效篇)

        這里有個問題,IOS是不能自動播放音樂的,一定要觸發一個用戶交互事件,例如點擊。

        但是有一種hack的方法可以讓IOS微信側頁面自動播放(SAFARI依舊無效):

        通過new一張圖片,監聽一張圖片的onload事件,結束后回調執行音頻播放audio.play()即可,原理估計是動了dom結構,相當于執行了快速交互。(有人也用過createEvent模擬,原理也是動了dom。)

        因此,記得暴露一個音樂關閉/打開的按鈕,不然肯定被用戶罵死。

        (6)有趣的Loading

        Loading頁還是要有的,萬一用戶網速慢呢?

        以上做了那么多事,如果沒有資源加載都是玩不來的,因此還需要一個loading的支持。一般情況下頁面體積大于3m則要加上loading頁。

        然而loading還是可以做得很有趣的,一般的做法是:

        1.引入品牌,例如APP宣傳頁;
        2.引入有趣動畫,放一個賤賤的人物跳舞給你看;
        3.一切從簡,用CSS3簡單動畫。

        較后總結

        較后,給一個例子結尾吧。

        這是空間5.0預約頁第二版,使用了以上的若干方法論,例如loading動畫,CSS3動畫,SVG星空連線,首屏星球重力感應,音樂(這里使用開啟按鈕后播放)等等。

        (由于活動已結束,很多運營處都被刪掉從簡了,忽略那些細節)

        玩轉HTML5移動頁面(動效篇)

        (查看DEMO)

        當然,真正要做到高效制作動態H5頁面,還是靠積累,因此平時做好的細節動畫自己都積累起來,下次分分鐘就能用得上。

        以上內容由至成科技(西安網站建設,西安網站設計,西安網站制作)為您提供,更多精彩內容:http://www.vxdmg.com/

        關注“至成科技”微信公眾號,快速獲取互聯網較新資訊

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 江苏11选5开奖号码查询结果 天天梭哈下载 体彩十一运夺金开奖时间 辽宁十一选五走势图全 双色球五行走势分布图 ok广东快乐十分走势图 吉林11选5开奖号码 2019年排列三走势图带连线 陕西快乐10分预测 天津福利彩票走势图 排列五走势图南方双彩网2019 西藏生肖时时彩开奖 山西快乐十分走势图前三 七星中国版 网球王子单机游戏