恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
长图滑动H5制作神器,新手用「时间轴」也能出爆款!
0.9°
2024-05-09 原创文章 行业资讯 举报 201 0 0 0


说起“长图滑动”这类交互形式的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

更新:2024-05-09

收藏

0人已收藏

牙牙乐

牙牙乐

  • 31

    作品

  • 1

    粉丝

  • 5

    关注

  • 大胆预测,今年最流行的端午节小游戏H5玩法可能是这些
  • 开往“儿童节”的列车即将进站,请带好H5案例及模板准备乘车~
  • 文旅地图H5:重塑旅游互动,解锁全新体验
  • 519中国旅游日丨文旅类H5的不同创意和视角
相关标签

    猜你喜欢

      2024-05-09 原创文章 行业资讯 举报 201 0 0 0

      长图滑动H5制作神器,新手用「时间轴」也能出爆款!

      0.9°

      你确定要举报长图滑动H5制作神器,新手用「时间轴」也能出爆款!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2024年05月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      0
      0
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录