h5页面笔按下默认是拖动_屡屡刷屏的长页面H5原来是这样诞生的
昨天整理资料的时候,突然翻到了很早之前做的一个H5。看着那久远的日期,我不禁沉醉在假想的美好回忆中并沾沾自喜。然而,当我打开这个作品的时候……这是什么东西?!这是想气死谁?!不说那五颜六色的标题、时大时小的配图,就说那N个冗杂的页面,真是看得人头都大了!
分页展示是很多H5惯用的布局方式,但当我们需要呈现一些篇幅较长且关联性很强的内容时,大量的分页很可能会造成理解障碍或阅读疲劳,进而影响用户体验。因此,在面对这种情况时,大家千万不要像我一样,硬着头皮叠加页面,而是运用意派Epub360的长页面功能进行线性排布,在精简内容的同时配合一些独特的交互方式,以便为用户提供更流畅的阅读体验,并有效降低流失率。
一、如何使用意派Epub360制作长页面H5?
使用意派Epub360制作长页面H5的方式主要有两种,第一种是使用layer容器,第二种是改变页面属性。在此,我们主要介绍第二种相对简单一点的方法(第一种方法虽然相对复杂一点,但制作功能也要更为强大,可制作横长图并配合一些特殊的动效等,如果感兴趣的话,可以在意派Epub360官网教程中心搜索关键词,以查看相关教程进行学习)。
1、登录意派Epub360并创建一个H5作品,在右侧属性面板的页面信息下勾选“启用长页面”。勾选后,画布的底部会出现一个可以拖动的灰色小长条,如下图:
2、向下拖动小长条后,画布会相应地纵向延长,与此同时,画布上会留下一条更为细长的灰色线条,这个线条就是正常画布的出血线,可以方便H5设计师观察长页面中一屏的位置,如下图:
3、除了向下拖动小长条外,我们还可以通过直接输入具体的数值来延长画布,如下图:
二、如何让你的长页面H5更加深入人心?
细节成就品质,纵然长页面H5有诸多优势,但若不好好用心设计,仍旧和一张普通长图无异,很难在用户心中留下任何记忆点,当然,这也并不等于我们可以毫无逻辑地将各种不同种类的元素塞入其中,以提升整体的丰富度。相较于这种令页面混乱、臃肿的错误做法,合理运用各式各样的动效并为用户提供酷炫有趣的互动体验更值得提倡。
1、长页面+视差滚动
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,进而营造出立体的动感效果。长页面+视差滚动这个组合比较适合用来描绘一些细腻又丰富的场景,可以使得作品变得更加鲜活。在具体制作时,我们需要用到Layer图层、联动组件等,如果感兴趣的话,可以在意派Epub360官网教程中心搜索关键词,以查看相关教程进行学习。
案例:《想象之上,让价值超越价格》
2、长页面+位置触发
位置触发是指将页面滑动到指定位置时,即可触发相应的效果。长页面+位置触发这个组合可在展示大量内容的同时有效提升作品整体的趣味性。在具体制作时,我们需要用到锚点组件等,如果感兴趣的话,可以在意派Epub360官网教程中心搜索关键词,以查看相关教程进行学习。
案例:《“菜霸”受审记》
3、长页面+飞过花开(直线+曲线运动)
飞过花开(直线+曲线运动)是指某一元素在进行曲线移动时,可促使H5页面不断位移并触发相应的动画。长页面+飞过花开(直线+曲线运动)这个组合可以说是线路图设计的经典组合,可大大提升视觉体验并吸引更多用户。在具体制作时,我们需要用到直线/曲线运动组件等,如果感兴趣的话,可以在意派Epub360官网教程中心搜索关键词,以查看相关教程进行学习。
案例:《彼得罗夫·玫瑰之旅邀请函》
4、长页面+SVG路径动画
SVG路径动画是意派Epub360的特色功能之一,主要是指让SVG的描边沿轨迹路径运动的动画效果,整体看起来像是有人在绘制一样。长页面+SVG路径动画这个组合可实现动态加载轨迹,有效提升作品的精致感。在具体制作时,我们需要用到SVG路径组件等,如果感兴趣的话,可以在意派Epub360官网教程中心搜索关键词,以查看相关教程进行学习。
案例:《金融碰撞互联网,传统银行受到10000点伤害?》
以上4种组合方式均可有效提升长页面H5的传播效果,至于要选择何种搭配,则主要取决于大家对H5整体的策划构思。此外,由于要将所有要素都集中在同一个页面上进行展示,因此,如何在统一调控H5整体风格的基础上,让用户又快又准地捕捉到重点信息,也非常值得大家思考。
h5页面笔按下默认是拖动_屡屡刷屏的长页面H5原来是这样诞生的相关推荐
- h5页面笔按下默认是拖动,H5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter...
实例 在拖动的元素进入到放置目标时执行 JavaScript : 定义和用法 ondragenter 事件在拖动的元素或选择的文本进入到有效的放置目标时触发. ondragenter 和 ondrag ...
- html5页面 学生作品,最完整长页面H5制作教程来啦!
当我们制作宣传页的时候,往往一页是不够用的,通常都需要添加好几个页面,但是在画面以及内容的表现上总是会出现细微的断层,这个时候总是会想:要是能够一个页面一直制作下去就好了,长页面H5就可以做到! 在众 ...
- h5 uniapp history模式下刷新页面404
h5 uniapp history模式下刷新页面404 问题:uniapp 的history 把#去掉了,但是当刷新页面的时候出现404 解决方案 需要服务端支持 如果 URL 匹配不到任何静态资源, ...
- h5、select下拉框右边加图标,深度美化页面增进用户体验
h5.select下拉框右边加图标,深度美化页面增进用户体验 1.那么我们先来看一下效果吧! 2.再看看h5的结构: <div id="login-div"><d ...
- h5物体拖动_【点我解锁】11种网易爆款H5交互手势及案例
本文3078字在早些年,H5其实更像是手机上的PPT,只支持点击.滑动这些基础手势操作.以内容展示为主,交互形式为辅.但到了今天,H5的玩法已经有了质的突破.不仅交互形式超多,形式与内容也能紧密结合, ...
- android 挖孔屏适配_使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
- HTML5响应式手机模板:H5网站设计——政府街道社区wap微信官网模板(11个页面) HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板...
HTML5响应式手机模板:H5网站设计--政府街道社区wap微信官网模板(11个页面) HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 H5手机网站模板 响应式 ...
- jQuery eq()方法 =》加载页面时单选框默认选中
*加载页面时单选框默认选中(此方法适用于循环输出的单选钮的默认选中问题) <body> <input type="radio" name="jing&q ...
- uniapp H5+锁定和解除锁定屏幕方向及关闭应用启动界面及页面刷新
锁定屏幕方向 plus.screen.lockOrientation( String orientation ); 说明: 锁定屏幕方向后屏幕只能按锁定的屏幕方向显示,关闭当前页面后仍然有效. 可再次 ...
最新文章
- 李宏毅线性代数笔记6:矩阵的计算
- Kafka 消费者组 Rebalance 详解
- c语言未初始化的指针下标访问是0,C语言的二数组的指针访问.doc
- 数据结构和算法详解(二)——线性表(数组、链表、栈、队列)
- Mobile First! Wijmo 5 之 架构
- c++几个类互相包含
- VAX 过期重新安装办法。
- FPGA课程设计——数字频率计
- Pycharm进入debug模式后一直显示collecting data解决方法
- 面试官问:“在项目中用过多线程吗?”你就把这个案例讲给他听!
- 北京服务器托管的必要性浅析
- Echarts图例位置 - legend属性
- SLT学习(一)——STL组成介绍
- 纪中暑假培训 :Date:7 终章-剑之魂
- python实操实例100例_趣学Python算法100例
- 什么猫猫最受欢迎?Python采集猫咪交易数据
- 加州欧文计算机工程专业,加州大学欧文分校计算机工程专业本科直录申请条件...
- 二进制空间权重矩阵_白话空间统计之二十五:空间权重矩阵(三)解构空间权重矩阵...
- 是什么引起数据库响应超时?
- 小程序开发--页面添加水印MGWatermark