First look at the effect, the video demo address: https://b23.tv/i8njpo , the following is the picture effect.
After entering the page, there will be a pop-up window. After the user clicks the claim button (or does not click the button, the page will be separated after 3 seconds), the picture will be separated up and down and slide out of the screen. Disappear, and the page mask disappears at the same time, the user can perform subsequent operations.
The above effect is actually relatively simple. A pop-up window contains three pictures. Click the middle picture (or after three seconds without clicking), the upper and lower pictures slide vertically to the outside of the screen. To achieve this effect js is relatively simple, and the more complicated point lies in css.
The two points to note here are:
1: The sliding css attributes are:
transform: translateY(-300%); //负数代表上滑，上滑三个百分单位
//translateY：沿Y轴垂直滑动
//translateX：沿X轴水平滑动
//rotateY(360edg): 沿Y轴翻转360度,edg是角度单位
//还有很多类似的取值，可以参考 CSS3 transform 属性2: js timer method:
//setTimeout ：在3秒后执行一次,执行一次就不再执行了
setTimeout(function () {
}, 3000);
//setInterval(fn，2500) ：每2.5秒重复执行一次
var stopInterval = setInterval(function () {
if(true){
//clearInterval(obj) ：取消重复循环定时器
clearInterval(stopInterval);
}
}, 2500)
}3: A little attention to 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
}
The following is the main code
1: Pop-up window and masked div. The picture address in the code is a fake address, you can change the picture yourself, and you can send me a private message if necessary.
<!--有关蒙版+弹窗这块的最外层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 for pop-up window and mask
.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: Pop-up and masked 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)
}