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

已于 2022-04-11 11:38:34 修改
阅读量1.5k 收藏 1
点赞数
文章标签： javascript css jquery css3
于 2022-04-08 18:17:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53718249/article/details/124047968
版权

最近要做产品要做一个屏幕碎裂效果，产品要那种点击碎屏进入首页的效果，由于做的是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#

猪油仔丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html文字破碎特效,CSS3黑镜破裂文本效果
weixin_42134143的博客
06-09 387
CSS语言：CSSSCSS确定body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #000;overflow: hidden;}h1 {position: relative;font-family: 'Montserrat', Arial, sans-seri...
CSS3点击按钮爆炸动画特效
06-24
CSS3点击按钮爆炸动画特效是一款基于HTML5+CSS3实现的粉碎爆炸动画特效。
“破碎-重组-破碎” CSS3实现Lowpoly风格变形动画终极篇
weixin_34050389的博客
04-10 1234
在受到SVG+CSS3动画仿作草莓音乐节宣传视频的伤害后，一直想找个简单唬人的东西做一做来平复一下悲愤的心情。翻了下收藏夹，找到了一个珍藏了很久的存货，三十种濒危动物的碎片动画效果。有时候，很多创意来自于别人，别不承认，戳戳看，很惊艳 。以前写过CSS3实现lowpoly动画效果的文章，虽然同为lowpoly效果，其实那个的实现难度要比这个高的多，也更加繁复，还用到了CSS的选择器，但是，还是那句...
纯 CSS 图片碎裂动画
yezi153的博客
01-24 1968
效果：鼠标悬停在图片上，图片出现炸裂，包含蒙版和动画渐变两个过程 蒙版 img { mask: linear-gradient(rgba(0,0,0,0.8) 0 0) left, /* 1 */ linear-gradient(rgba(0,0,0,0.5) 0 0) right; /* 2 */ mask-size: 50% 100%; mask-repeat: no-repeat; } 每个图层蒙版尺寸为50% 100%（或图像的一半宽度和全部高度）。一个图层蒙版
css代码文字破碎js特效
ICode联盟
08-22 519
css代码文字破碎特效，通过伪元素和CSS3帧动画来实现文字震动之后，碎裂开来的效果。
CSS3图片破碎爆炸效果
xf326521的专栏
07-11 2322
[code="java"]var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; var v=0; if(!obj.__last_timer)obj.__last_timer=0; var t=new Dat...
jquery点击div层图片爆炸碎裂效果
04-08
标题中的“jquery点击div层图片爆炸碎裂效果”是指一种基于jQuery实现的前端交互特效，当用户点击一个div元素（通常包含图片）时，图片会模拟出爆炸并碎裂的效果，给用户带来视觉冲击和互动体验。这个效果常用于游戏...
swift和oc图片破碎效果
08-15
在iOS应用开发中，我们经常会遇到需要为用户提供各种视觉效果以增强用户体验，其中之一就是“图片破碎”或“图片爆炸”效果。Swift作为苹果公司的主要编程语言之一，为开发者提供了丰富的功能来实现这样的特效。本篇...
2DDestrucion轻松实现任意2D图片的破碎碎裂效果，同时碎片碎了还能碎
12-29
该工程Unity版本是2020.1.0f1，要加到自己的项目中只需要复制其中的2D_Destruction文件夹到Assets文件夹目录下，真的超级好用，之前自己为了实现这个效果自己实现了三天才搞定，后来发现有这个插件。
基于TweenMax的图片碎裂切换动画
10-31
一个基于TweenMax动画库的图片碎裂切换动画，当我们点击图片时，图片就会像玻璃那样碎裂成许多块，然后渐渐地消失，直到下一张图片显示为止。这款图片碎裂动画也可以应用在焦点图的切换动画中，效果非常不错。
hover图片碎裂效果代码
04-08
在网页设计中，为了增强用户体验和视觉吸引力，开发者经常运用各种动态效果，其中"hover图片碎裂效果"是一种独特且有趣的交互方式。这种效果通常在鼠标悬停在图片上时，图片会呈现出碎裂或分裂的动画，为网站增添一...
超厉害的CSS3图片破碎爆炸效果！
weixin_34402408的博客
09-26 2551
Java代码   var fx  = {       buffer : function(obj, cur, target, fnDo, fnEnd, fs){           if(!fs)fs=6;           var now={};           var x=0;           var v=0;                   ...
用css3实现一个带缺口的圆圈（图）
weixin_34268169的博客
11-25 5706
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ margin:300px; p...
纯CSS打气球爆炸js特效
ICode联盟
07-11 381
下载地址纯CSS打气球爆炸特效，没有使用任何JavaScript代码，可以打破气球的网页特效。dd:
让对方网站爆炸的php代码,分享一个css3 点击爆炸下落的特效代码
weixin_39605894的博客
03-20 180
一个代码简洁，效果明显的jquery+css3特效 点击div块状，会自动破碎并散落到网页底部[图片][代码]$(document).ready(function() {// Generate the clips. In this case I'm using 5 (or 25 pieces)(genClips = function() {// For easy use$t = $('.clipp...
照片破碎css,【第1845期】给破碎图片添加样式
weixin_39948277的博客
08-03 259
原标题：【第1845期】给破碎图片添加样式前言文章是16年的，对体验倒是挺好的一个方案。今日早读文章由@zhangbao90s翻译授权分享。@zhangbao，有三年前端开发经验，目前在上海工作。当前着重于对前端基础技术的学习，活跃于掘金(@zhangbao90s)。平时会经常翻看和翻译国外的一些技术文章，希望跟大家一起进步。如果 的 src 属性值是一个无效地址，最终的渲染结果就很丑陋： 我们...
css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果
蒲公英芽的博客
05-20 5561
一、业务背景： 最近接了一个“扎水球”的小程序项目，用户使用“金针”扎破水球，可以扎到奖励，或者扎到炸弹，其实也可以看作是一次抽奖，扎破水球后，显示对应的奖励。关于页面样式及扎水球后的结果，UI同学给了下面两张图： 经过我的一番“添油加醋”后，做出的效果是下面这样的，感谢UI同学，给了我自由发挥的空间，让我又提起“笔”，写了这篇博客。 css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果
css如何做玻璃效果_用PS如何做出玻璃碎片效果？
weixin_35338559的博客
12-26 487
玻璃碎片效果还是有点难度的哦，开始前先看一下步骤吧！【！！！福利预警！！！】文末小天为大家准备了一份PS必备福利大礼包！看完之后，PS就再也不是一件难事了！！！小伙伴们一定要记得PICK一下哦！"伤过的心，就像玻璃碎片..."你看着玻璃碎片效果像不像你那被伤过的心...大哥，别打头别打头！好嘛好嘛，大不了不说了，开始做我们的玻璃碎片效果。1.首先还是载入预设，点进编辑-预设-预设管理器；将预设类型...
html 鼠标火花效果,css简单实现火焰效果
weixin_34923040的博客
06-04 570
/*清除边距*/body, div {margin: 0;padding: 0;}/*设置背景色*/body {background: #000;}.flame {width: 300px;height: 300px;margin: 200px auto;/*background: #FFFFFF;*/position: relative;}/*火焰效果，用简单div实现*/.flame div:...
python opencv 检测屏幕碎裂
最新发布
06-10
要检测屏幕碎裂，可以使用 OpenCV 中的图像处理技术。具体步骤如下： 1. 读取屏幕截图：使用 Python 中的 PIL 库或者 PyAutoGUI 库可以实现屏幕截图功能。 2. 转换为灰度图像：将彩色图像转换为灰度图像，可以使用 OpenCV 中的 cvtColor() 函数。 3. 检测边缘：使用 Canny 算法检测图像中的边缘，可以使用 OpenCV 中的 Canny() 函数。 4. 检测轮廓：使用 findContours() 函数检测图像中的轮廓。 5. 判断是否存在碎裂：可以根据轮廓数量或者轮廓面积来判断是否存在碎裂。 6. 显示结果：使用 OpenCV 中的 drawContours() 函数将检测结果显示在屏幕上。 需要注意的是，图像处理涉及到很多细节，具体的实现需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值