前端——》H5页面开屏分离特效

先看效果，视频演示地址：https://b23.tv/i8njpo，以下为图片效果。

进入页面后会有一个弹窗，用户点击领取按钮（或是不点击按钮，页面3秒钟后也会分离）后，图片会上下分离滑动至屏幕外，领取按钮托马斯全旋360度后原地消失，同时页面蒙版消失，用户可以进行后续操作。

上面的效果其实比较简单，一个弹窗，包含三个图片，点击中间图片（或是不点击过三秒后），上下两个图片垂直滑动至屏幕外。要实现这个效果js是比较简单的，复杂的点在于css。

这里两个需要注意的点是：

1：滑动的css属性为：

transform: translateY(-300%);       //负数代表上滑，上滑三个百分单位//translateY：沿Y轴垂直滑动//translateX：沿X轴水平滑动//rotateY(360edg):    沿Y轴翻转360度,edg是角度单位//还有很多类似的取值，可以参考 CSS3 transform 属性

2：js定时器方法：

//setTimeout ：在3秒后执行一次,执行一次就不再执行了
setTimeout(function () {}, 3000);//setInterval(fn，2500) ：每2.5秒重复执行一次var stopInterval = setInterval(function () {if(true){//clearInterval(obj) ：取消重复循环定时器 clearInterval(stopInterval);}     }, 2500)}

3：active的一个小小的注意点

/*给class添加动态的active样式，在定义样式的时候一定要将active紧跟class名称，不能留空格因为空格后面的就是下层class名称,加上空格后页面会去找寻下层中名叫active的class去了，那肯定是找不 到的
*///举例：错误的写法(2种)
.hoZrDV .modal-packet. active .modal-packet-top {xxx:xxx}
.hoZrDV .modal-packet active .modal-packet-top {xxx:xxx}//举例：正确的写法
.hoZrDV .modal-packet.active .modal-packet-top {xxx:xxx}

以下为主要代码

1：弹窗及蒙版的div。代码中的图片地址为假地址，可以自己换图片，如果需要可以私信我。

<!--有关蒙版+弹窗这块的最外层div--><div class="hoZrDV" id="hoZrDV"><!--这个是蒙版--><div class="rps-mask"  id="rps-mask"></div><!--弹窗--><div class="modal-packet" id="modal-packet"><!--弹窗上半部分的图片--><div class="modal-packet-top" id="modal-packet-top"style="background-image:url(https://xxx.com/activities/images/test/top.png)"></div><!--弹窗下半部分的图片--><div class="modal-packet-bottom" id="modal-packet-bottom"style="background-image:url(https://xxx.com/activities/images/test/bottom.png)"></div><!--弹窗中间部分的图片，就是领取按钮--><img class="modal-packet-btn" id="formButton" src="https://xxx.com/activities/images/test/getnow.png" alt=""/></div></div>

2：弹窗及蒙版的css

.hoZrDV .rps-mask {-webkit-transition: opacity 0.3s ease;transition: opacity 0.3s ease;position: fixed;z-index: 1000;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: #000;opacity: 0.7}.hoZrDV .modal-packet{position: fixed;z-index: 1001;top: 50%;left: 50%;width: 345px;height: 380px;max-width: 100vw;max-height: 100vh;transform: translate(-50%, -50%)}.hoZrDV .modal-packet-top {position: absolute;width: 100%;height: 83%;left: 0;top: 0;background-image: url(https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/test/top2.png);background-size: 100%;background-repeat: no-repeat;background-position: center top;-webkit-transition: -webkit-transform 0.8s ease 0.5s;-webkit-transition: transform 0.8s ease 0.5s;transition: transform 0.8s ease 0.5s;z-index: 2;}.hoZrDV .modal-packet-bottom {height: 44.5%;position: absolute;width: 100%;left: 0;bottom: 0;background-image: url(https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/test/bottom2.png);background-size: 100%;background-repeat: no-repeat;background-position: center bottom;-webkit-transition: -webkit-transform 0.8s ease 0.5s;-webkit-transition: transform 0.8s ease 0.5s;transition: transform 0.8s ease 0.5s;}.hoZrDV .modal-packet-btn {position: absolute;width: 100px;height: 100px;left: 50%;bottom: 30px;-webkit-transition: -webkit-transform 0.5s ease;-webkit-transition: transform 0.5s ease;transition: transform 0.5s ease;z-index: 2;bottom: 32px;width: 100px;height: 100px;margin-left: -50px}/*---------------以上为页面刚加载完的未分离时的样式--------------------*//*---------------以下为点击领取后触发的分离特效的样式--------------------*//*隐藏蒙版*/.hoZrDV .rps-mask.active {opacity: 0.5;}/*隐藏弹窗*/.hoZrDV .modal-packet .hide {display: none;}/*上半部图片上滑出屏幕特效*/.hoZrDV .modal-packet.active .modal-packet-top {-webkit-transform: translateY(-300%);-ms-transform: translateY(-300%);transform: translateY(-300%);}/*下半部图片下滑出屏幕特效*/.hoZrDV .modal-packet.active .modal-packet-bottom {-webkit-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}/*领取按钮翻转360度特效*/.hoZrDV .modal-packet-btn.active {-webkit-transform: rotateY(360deg);-ms-transform: rotateY(360deg);transform: rotateY(360deg);}

3：弹窗及蒙版的jquery

/*setTimeout 在页面加载完3秒后执行一次（旨在即使用户不点击，时间一到也会分离），增加分离特效样式，此样式会将蒙版的透明度由0.7改为0.5*/function splitSetTimeout() {setTimeout(function () {$("#modal-packet").addClass("active");$("#formButton").addClass("active");$("#rps-mask").addClass("active");}, 3000);}/*弹窗领取按钮被点击的方法* 点击后给蒙版rps-mask添加上active样式，增加分离特效样式，此样式会将蒙版的透明度由0.7改为0.5*/function splitFormButtonClike() {$("#formButton").click(function (){$("#modal-packet").addClass("active");$("#formButton").addClass("active");$("#rps-mask").addClass("active");});}/*每2.5秒重复执行一次*/function splitStopInterval() {var stopInterval = setInterval(function () {/*检测蒙版的透明度是否为0.5，为0.5即表示用户点击了领取按钮 或是 页面加载了3秒钟，此时将一系列的弹窗样式清楚或是不展示，并取消重复执行*/if ($('#rps-mask').css('opacity') == '0.5') {$("#hoZrDV").removeClass();$("#hoZrDV").css("display", "none");$("#modal-packet").css("display", "none");$("#formButton").css("display", "none");$("#rps-mask").css("opacity", "0");$("#rps-mask").css("display", "none");/*取消重复执行*/clearInterval(stopInterval);}}, 2500)}

前端——》H5页面开屏分离特效相关推荐

h5 默认为移动端页面_20条移动前端H5页面开发规范，h5开发必看文档
这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
转载https://cloud.tencent.com/developer/article/1609256 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar ...
前端 H5 页面地图展示,只需要传入经纬度就可展示地图及周边生活娱乐
在闲暇时间自己整理了一下之前写过的H5地图,只需要传入经纬度就可以展示地图,及周边娱乐,交通等信息. 我直接贴上代码,你可以复制或者直接下载我上传的资源文件>>下载地址,希望对你有帮助! ...
asp.net core + 前端H5 页面视频站制作尝试
.net core 2.1出来一段时间了,一直关注,前周花了半天时间学习了一下,特制作了一个视频小站(欢迎扫码体验): 页面首页效果如下: 播放页面效果如下: 部分代码: using ENT.IBLL ...
threejs模型可视化编辑器_加油！所见即所得的H5页面可视化编辑器H5-Dooring
最近总结一下笔者目前开发的h5在线编辑器H5-Dooring. 目前已经在github上开源免费使用. 目前市面上也有很多优秀的H5在线编辑器, 也很强大, 笔者将从几个维度来介绍H5-Dooring ...
沪江前端由H5页面引起的一场前端数据结构讨论
作者:周周(沪江资深Web前端开发工程师) 本文为原创文章,转载请注明作者及出处前言近期在小D十周年活动之际,又看到了一个自家H5专题梦工厂生成的页面. 我与小D十年回忆 >> 回想起 ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
微信 H5 页面前端开发，大多数人都会遇到的几个兼容性坑
关注上方"前端开发博客",选择"设为星标" 回复"2"加入前端群最近给公司写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑, ...
前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...

前端——》H5页面开屏分离特效

前端——》H5页面开屏分离特效相关推荐

最新文章

热门文章