说起“长图滑动”这类交互形式的H5，相信很多人都会率先想起网易。作为H5刷屏榜上的常胜将军，网易很擅长将横/竖向滑动模式，与视差滚动、一镜到底、画中画等效果进行完美搭配，从而使得整个作品一气呵成。多年来，网易参与制作了各式各样视觉冲击性强、信息量大、体验感好的长图滑动H5，如《英雄》等。

（截图引用网易新闻丨哒哒出品的H5案例《英雄》）

相较于其他形式的H5，长图滑动H5可以更好地让用户在沉浸式阅读体验中，感受时间的长度与空间的广度，非常适合用于展现具有连续性、时间性的新闻事件、人物故事、历史进程等，可读性很强，也因此深受很多新闻媒体单位的青睐。经常关注这一领域的朋友可以发现，很多获得中国新闻奖的H5作品就都采用了“长图滑动”的交互形式。

那么，如此酷炫的“长图滑动”效果是不是很难实现呢？

当然不是！您只要用意派Epub360 H5编辑器的时间轴动画组件就能轻松完成啦！

意派时间轴动画组件

意派Epub360 H5编辑器现已正式上线时间轴动画组件！用户可自由设置元素在页面中出现、消失的位置和状态，并实现视差滚动、一镜到底、画中画、走马灯等交互效果。

该组件适用于长图文滑动场景，支持手势滑动、自动播放和长按控制播放三种交互手势触发，且不局限于横屏或竖屏的方向。它在新闻报道、数据报告、品牌推广等多个领域都有着广泛的应用价值，可为您的H5制作业务提供更大的空间和潜力！

▲「时间轴动画」组件编辑界面

组件优势

• 支持导入文字、图片、序列帧

• 支持自动播放、长按播放、滑动播放等多种播放设置

• 支持横向滑动、滑动反向（滑动速度可控）

• 支持不同元素的多个状态切换（基于关键帧设置的动画制作）

• 支持多种元素下的关联控制，可快速实现滑动视差等视觉效果

• 界面简洁，容易上手，使用流畅

该组件可轻松实现以下效果

一

竖屏常规滑动长图

 （截图引用央视新闻出品的H5案例《十二件文物带你走丝绸之路》）

二

竖屏长按控制画中画播放

 （截图引用网易新闻出品的H5案例《二零一八娱乐圈画传》）

三

竖屏长按控制一镜到底播放

（截图引用解放日报丨上观出品的H5案例《非凡十年·你在其中》）

四

 横屏手势滑动长图

 （截图引用网易新闻出品的H5案例《我在童话里遇到你的时光》）

 五

横屏手势滑动视差长图

 （截图引用央广网出品的H5案例《改革开放40年 车轮滚滚不停歇》）

篇幅有限，更多趣味效果就不一一展示了。

这么强大的组件到底如何使用？跟着教程来，人人都能学得会！

操作教程

见文档

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内容截图仅作效果展示之用，非商业用途。如有侵权，请联系我修改或删除。

Powered by Froala Editor