点击图片碎裂碎屏破碎爆炸效果

100 阅读 0 评论 66 点赞

我是靠谱客的博主坚定冬天，最近开发中收集的这篇文章主要介绍点击图片碎裂碎屏破碎爆炸效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近要做产品要做一个屏幕碎裂效果，产品要那种点击碎屏进入首页的效果，由于做的是h5页面，这种闪屏效果需要考虑不同分辨率的手机和样式，还有可能是pc访问或者手机访问，于是这里花了一天时间做出了这个效果，这里分享下

html的部分：

<body>

<div class="main-box">

//container是碎屏后跳转的页面

<div class="container">

</div>

//container-one是首页碎屏部分

<div class="container-one">

<div class="clipped-box">

<div class="content">

</div>

</div>

<section class="hand-btn scale" v-cloak>

</section>

<section class="hand" v-cloak>

</section>

</div>

</div>

</body>

css部分：

body {
.main-box {
height: auto;
}
.common-swiper {
display: none;
bottom: 2.9rem;
}
}
.container-one {
width: 15rem;
position: relative;
margin: 0px auto;
}
.clipped-box {
cursor: pointer;
-webkit-transition: top 1.2s linear;
transition: top 1.2s linear;
}
.clipped-box div {
z-index: 9999;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.clipped-box, .clipped-box div {
width: 100%;
height: 100%;
position: relative;
}
.clipped-box div {
position: absolute;
top: auto;
left: 0;
// -webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;
// transition: transform 1.4s ease-in, background 0.3s ease-in;
}
.hand-btn {
width: 7.9rem;
height: 2.1rem;
background: url(https://s6.51cto.com/images/202204/08/19d4a76b7e2c08002655dd139717f826.png) no-repeat center center;
background-size: 100% auto;
position: absolute;
z-index: 10000;
cursor: pointer;
}
.hand {
width: 1.8rem;
height: 1.8rem;
background: url(https://s2.51cto.com/images/202204/08/c7c3bfda3cf0ce9873da463386abd335.png) no-repeat center center;
background-size: 100% auto;
position: absolute;
z-index: 10001;
animation: position 1.5s infinite;
@keyframes position {
0% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(1rem,.5rem,0);
}
100% {
transform: translate3d(0,0,0);
}
}
}

js部分：

$(document).ready(function() {
(genClips = function() {
$t = $('.clipped-box');
var amount = 5;
var width = $t.width() / amount;
var height = $t.height() / amount;
// var totalSquares = Math.pow(amount, 2);
var html = $t.find('.content').html();
var y = 0;
for(var z = 0; z <= (amount*width); z = z+width) {
$('<div class="clipped" style="clip: rect('+y+'px, '+(z+width)+'px, '+(y+height)+'px, '+z+'px)">'+html+'</div>').appendTo($t);
if(z === (amount*width)-width) {
y = y + height;
z = -width;
};
if(y === (amount*height)) {
z = 9999999;
}
}
})();
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var first = false,
clicked = false;
$('.clipped-box div').each(function(){
var self = $(this);
//获取屏幕分辨率的高
var ScreenHeight = window.screen.height;
var ScreenWidth =
window.screen.width;
var scaling
= parseInt((ScreenHeight/ScreenWidth)*100)
if(scaling == 150){
$('.clipped-box').css({
'background' : 'url(https://s2.51cto.com/images/202204/08/39d2f8b4de60285aa938d099e4c6b3a5.jpg) no-repeat center center',
'background-size' : '100% auto',
});
$(this).css({
'background' : 'url(https://s3.51cto.com/images/202204/08/44db2204e8b5ea0cc0569e8847e9caa4.png) no-repeat center center',
'background-size' : '80% auto',
});
$('.hand-btn').css({
'bottom' : '1.04rem',
'left' : '3.2rem',
});
$('.hand').css({
'bottom' : '1.04rem',
'right' : '3.2rem',
});
}else if(scaling == 177){
$('.clipped-box').css({
'background' : 'url(https://s2.51cto.com/images/202204/08/cb1a4875a997be8e1f93d0e547524c3e.jpg) no-repeat center center',
'background-size' : '100% auto',
});
$(this).css({
'background' : 'url(https://s2.51cto.com/images/202204/08/b0162cce01237134e7b9605e3394b301.png) no-repeat center center',
'background-size' : '80% auto',
});
$('.hand-btn').css({
'bottom' : '2rem',
'left' : '3.68rem',
});
$('.hand').css({
'bottom' : '1.4rem',
'right' : '3.2rem',
});
}
else if(scaling == 216){
$('.clipped-box').css({
'background' : 'url(https://s7.51cto.com/images/202204/08/7a91c5de7d8886d844bd69170fb4f76a.jpg) no-repeat center center',
'background-size' : '100% auto',
});
$(this).css({
'background' : 'url(https://s8.51cto.com/images/202204/08/c21d5b7549d34c2c915303246997ed1b.png) no-repeat center center',
'background-size' : '80% auto',
});
$('.hand-btn').css({
'bottom' : '3.8rem',
'left' : '3.6rem',
});
$('.hand').css({
'bottom' : '3.4rem',
'right' : '3.2rem',
});
}else if (scaling < 150){
$('.clipped-box').css({
'background' : 'url(https://s7.51cto.com/images/202204/08/7a91c5de7d8886d844bd69170fb4f76a.jpg) no-repeat center center',
'background-size' : '100% auto',
});
$(this).css({
'background' : 'url(https://s8.51cto.com/images/202204/08/c21d5b7549d34c2c915303246997ed1b.png) no-repeat center center',
'background-size' : '80% auto',
});
$('.hand-btn').css({
'bottom' : '1.4rem',
'left' : '3.6rem',
});
$('.hand').css({
'bottom' : '1.04rem',
'right' : '3.6rem',
});
}else {
$('.clipped-box').css({
'background' : 'url(https://s7.51cto.com/images/202204/08/7a91c5de7d8886d844bd69170fb4f76a.jpg) no-repeat center center',
'background-size' : '100% auto',
});
$(this).css({
'background' : 'url(https://s8.51cto.com/images/202204/08/c21d5b7549d34c2c915303246997ed1b.png) no-repeat center center',
'background-size' : '80% auto',
});
$('.hand-btn').css({
'bottom' : '3.8rem',
'left' : '3.6rem',
});
$('.hand').css({
'bottom' : '3.4rem',
'right' : '3.6rem',
});
}
})
// On click
$('.clipped-box div, .hand-btn, .hand').on('click', function() {
$('.hand-btn').css({'display' : 'none'});
$('.hand').css({'display' : 'none'});
//获取屏幕分辨率的高
var ScreenHeight = window.screen.height;
var ScreenWidth =
window.screen.width;
var scaling
= parseInt((ScreenHeight/ScreenWidth)*100)
if(clicked === false) {
clicked = true;
$('.clipped-box .content').css({'display' : 'none'});
$('.clipped-box div:not(.content)').each(function() {
var v = rand(130, 80),
angle = rand(70, 89),
theta = (angle * Math.PI) / 180,
g = -9.8;
var self = $(this);
var t = 0,
z, r, nx, ny,
totalt =
100;
var negate = [1, -1, 0],
direction = negate[ Math.floor(Math.random() * negate.length) ];
var randDeg = rand(-20, 20),
randScale = rand(0.7, 0.7),
randDeg2 = rand(-20, 20);
if(scaling == 150){
$(this).css({
'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)',
'background' : 'url(https://s2.51cto.com/images/202204/07/1e00c604088364ba3380a400310770a4.jpg) no-repeat center center',
});
}else if(scaling == 177){
$(this).css({
'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)',
'background' : 'url(https://s3.51cto.com/images/202204/07/538e6c09116c096b2d8d703fc08ee028.jpg) no-repeat center center',
});
}
else if(scaling == 216){
$(this).css({
'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)',
'background' : 'url(https://s4.51cto.com/images/202204/07/bf8529c0cbc4c30ee94a2dc4e98bd83f.jpg) no-repeat center center',
});
}else {
$(this).css({
'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)',
'background' : 'url(https://s4.51cto.com/images/202204/07/88cb8024eeec0285f824d4fd9e264d71.jpg) no-repeat center top',
});
}
z = setInterval(function() {
var ux = ( Math.cos(theta) * v ) * direction;
var uy = ( Math.sin(theta) * v ) - ( (-g) * t);
nx = (ux * t);
ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));
$(self).css({'bottom' : (ny)+'px', 'left' : (nx)+'px'});
t = t + 0.10;
if(t > totalt) {
clicked = false;
first = true;
$('.clipped-box').css({'top' : '-1000px', 'transition' : 'none'});
$(self).css({'left' : '0', 'bottom' : '0', 'opacity' : '1', 'transition' : 'none', 'transform' : 'none'});
clearInterval(z);
}
}, 12);
});
};
f= setTimeout(() => {
$('.container').fadeIn(200);
$('.container-one').css({'display' : 'none'});
$('#bottomWrap').fadeIn(200);
$('.common-swiper').fadeIn(200)
}, 2000);
});
});

使用的时候直接复制就能看到效果。这里附上线上链接哈为了方便各位实体效果：

https://e.51cto.com/ncamp/preview?camp_id=132&view_id=0#