意派丨【活動】長圖滑動H5制作神器，新手用「時間軸」也能出爆款
說起“長圖滑動”這類交互形式的H5，相信很多人都會率先想起網易。作為H5刷屏榜上的常勝將軍，網易很擅長將橫/豎向滑動模式，與視差滾動、一鏡到底、畫中畫等效果進行完美搭配，從而使得整個作品一氣呵成。多年來，網易參與制作了各式各樣視覺沖擊性強、信息量大、體驗感好的長圖滑動H5，如《英雄》等。
（截圖引用網易新聞丨噠噠出品的H5案例《英雄》）
相較于其他形式的H5，長圖滑動H5可以更好地讓用戶在沉浸式閱讀體驗中，感受時間的長度與空間的廣度，非常適合用于展現具有連續性、時間性的新聞事件、人物故事、歷史進程等，可讀性很強，也因此深受很多新聞媒體單位的青睞。經常關注這一領域的朋友可以發現，很多獲得中國新聞獎的H5作品就都采用了“長圖滑動”的交互形式，如：
那么，如此酷炫的“長圖滑動”效果是不是很難實現呢？
當然不是！您只要用意派Epub360 H5編輯器的時間軸動畫組件就能輕松完成啦！
意派時間軸動畫組件
意派Epub360 H5編輯器現已正式上線時間軸動畫組件！用戶可自由設置元素在頁面中出現、消失的位置和狀態，并實現視差滾動、一鏡到底、畫中畫、走馬燈等交互效果。
該組件適用于長圖文滑動場景，支持手勢滑動、自動播放和長按控制播放三種交互手勢觸發，且不局限于橫屏或豎屏的方向。它在新聞報道、數據報告、品牌推廣等多個領域都有著廣泛的應用價值，可為您的H5制作業務提供更大的空間和潛力！
▲「時間軸動畫」組件編輯界面
組件優勢
支持導入文字、圖片、序列幀
支持自動播放、長按播放、滑動播放等多種播放設置
支持橫向滑動、滑動反向（滑動速度可控）
支持不同元素的多個狀態切換（基于關鍵幀設置的動畫制作）
支持多種元素下的關聯控制，可快速實現滑動視差等視覺效果
界面簡潔，容易上手，使用流暢
該組件可輕松實現以下效果
一
豎屏常規滑動長圖
（截圖引用央視新聞出品的H5案例《十二件文物帶你走絲綢之路》）
二
豎屏長按控制畫中畫播放
（截圖引用網易新聞出品的H5案例《二零一八娛樂圈畫傳》）
三
豎屏長按控制一鏡到底播放
（截圖引用解放日報丨上觀出品的H5案例《非凡十年·你在其中》）
四
橫屏手勢滑動長圖
（截圖引用網易新聞出品的H5案例《我在童話里遇到你的時光》）
五
橫屏手勢滑動視差長圖
（截圖引用央廣網出品的H5案例《改革開放40年 車輪滾滾不停歇》）
篇幅有限，更多趣味效果就不一一展示了。
這么強大的組件到底如何使用？跟著教程來，人人都能學得會！
操作教程
見文檔：
http://support.epub360.com/hc/kb/article/1645679/
1、如果您是專業版及以上版本的用戶
您可在進入H5編輯界面后，先點擊幻燈-時間軸動畫組件，再按教程進行相關操作。
2、如果您是其他版本的用戶，并想編輯體驗時間軸動畫組件
您可在進入H5編輯界面后，先點擊幻燈-時間軸動畫組件，再通過免費插入「樣例」的方式進行編輯體驗。
3、如果您是其他版本的用戶，并想單次使用時間軸功能
您可先購買時間軸單次應用H5模板，再進行編輯使用。什么是單次應用？戳鏈接查看詳情→《無需升級會員，單次應用來襲！》
單次應用模板
目前，意派Epub360官網的單次應用板塊已更新上架了三個時間軸H5模板，可助力廣大用戶快速搭建長圖滑動H5場景。
《【時間軸】上海文旅地圖長圖滑動》
點擊標題體驗
識別二維碼體驗
《【時間軸】新聞媒體融合長圖滑動交互》
點擊標題體驗
識別二維碼體驗
《時間軸單次應用模板》
點擊標題體驗
識別二維碼體驗
“我是學生，預算有限~”我們已經無數次在小紅書、抖音、公眾號后臺……聽到大學生用戶朋友們的“吶喊”了！福利這不就來了嘛~
學生專屬優惠活動
學生黨注意啦?。?！即日起，凡通過身份驗證的在校大學生，都可 5折 購買時間軸單次應用H5模板啦！此外，我們還為您準備了雙重額外驚喜：
驚喜一：若您制作的時間軸H5作品成功入選意派精選案例，即可聯系小派返還模板費用，也就相當于，0元 就能購買單次應用模板+使用時間軸功能啦！
驚喜二：我們將不定期在所有優秀學生群體中評選出一位“時間軸案例之星”，并贈送 3個月意派H5專業版 賬號權限！
參與方式：添加小派企業微信，出示本人有效學生證，成功完成大學生身份驗證后，即可享受上述專屬優惠。如對活動有任何疑問，歡迎積極與小派溝通哦~
小派企業微信
如此劃算的活動怎能錯過？！快快轉發給小伙伴，一起參與吧~
活動最終解釋權歸上海意派信息科技有限公司所有
項目定制
如果您想找我們定制一款個性化的長圖滑動H5，歡迎聯系我們的項目專屬顧問，并一對一溝通您的需求，我們可按需為您提供創意策劃+視覺設計+交互設計+接口開發對接服務~
項目專屬顧問企業微信
本文轉載自：https://www.epub360.com/blogs/article/6638780ab4a9932a0d69751e/
本文中的H5案例均來源于平臺用戶或第三方，版權歸版權所有人所有。文中H5內容截圖僅作效果展示之用，非商業用途。如有侵權，請聯系我修改或刪除。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）