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

已于 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...
jquery点击div层图片爆炸碎裂效果
04-08
jquery点击div层图片爆炸碎裂效果，可以添加图片，做成点击碎屏效果
html5图片破碎效果,HTML5 Canvas点击屏幕碎裂交互动画特效
weixin_32459553的博客
06-03 741
JavaScript语言：JaveScriptBabelCoffeeScript确定function Chip(id, x, y) {this.id = id;this.x = x;this.y = y;this.cracks = [];this.cracksLength;this.interCracks = [];this.interCracksLength = Math.floor(Math....
图片破碎 效果
weixin_30555753的博客
05-10 581
图片先显示 而后化为颗粒 、飞出、消失 效果图： 代码： <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> ...
给div添加点击效果
weixin_43409286的博客
10-15 4023
给div添加点击效果 .item { background: #FFF; } .item:active { background: #F0F0F0; }
纯 CSS 图片碎裂动画
yezi153的博客
01-24 1960
效果：鼠标悬停在图片上，图片出现炸裂，包含蒙版和动画渐变两个过程 蒙版 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%（或图像的一半宽度和全部高度）。一个图层蒙版
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图片碎裂效果"是一种独特且有趣的交互方式。这种效果通常在鼠标悬停在图片上时，图片会呈现出碎裂或分裂的动画，为网站增添一...
jquery+css3点击爆炸块效果
06-12
一个代码简洁，效果明显的jquery+css3特效 点击div块状，会自动破碎并散落到网页底部 使用方法： 1、将lanrenzhijia.css文件复制到网页head中 2、将三个js代码也复制到网页head中 3、将html代码复制到你需要的地方即可搞定
CSS3实现任意图片lowpoly动画效果实例
09-27
本篇文章主要介绍了CSS3实现任意图片lowpoly动画效果实例，这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放
照片破碎css,【第1845期】给破碎图片添加样式
weixin_39948277的博客
08-03 259
原标题：【第1845期】给破碎图片添加样式前言文章是16年的，对体验倒是挺好的一个方案。今日早读文章由@zhangbao90s翻译授权分享。@zhangbao，有三年前端开发经验，目前在上海工作。当前着重于对前端基础技术的学习，活跃于掘金(@zhangbao90s)。平时会经常翻看和翻译国外的一些技术文章，希望跟大家一起进步。如果 的 src 属性值是一个无效地址，最终的渲染结果就很丑陋： 我们...
html5 视频 破碎,HTML5 Canvas 破碎重组的视频特效
weixin_35900818的博客
06-17 86
也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域的视频破碎，让后经过一段时间后，破碎的区域又可以重组还原，视觉效果非常棒。HTML代码Clickvideotoblowitup!JavaScript代码varvideo;v...
超厉害的CSS3图片破碎爆炸效果！
weixin_34402408的博客
09-26 2545
Java代码   var fx  = {       buffer : function(obj, cur, target, fnDo, fnEnd, fs){           if(!fs)fs=6;           var now={};           var x=0;           var v=0;                   ...
js 图片打碎_JavaScript+html5 canvas实现图片破碎重组动画特效
weixin_33736210的博客
12-30 490
var TILE_WIDTH = 32;var TILE_HEIGHT = 24;var TILE_CENTER_WIDTH = 16;var TILE_CENTER_HEIGHT = 12;var SOURCERECT = {x:0,y:0,width:0,height:0};var PAINTRECT = {x:0,width:1000,height:600};function init(){...
裂屏撕屏的视频分析
道亦无名
08-25 5527
最近碰到了大的难题，视频播放的时候会有裂屏的现象。具体的效果如下图所示：
“破碎-重组-破碎” CSS3实现Lowpoly风格变形动画终极篇
weixin_34050389的博客
04-10 1228
在受到SVG+CSS3动画仿作草莓音乐节宣传视频的伤害后，一直想找个简单唬人的东西做一做来平复一下悲愤的心情。翻了下收藏夹，找到了一个珍藏了很久的存货，三十种濒危动物的碎片动画效果。有时候，很多创意来自于别人，别不承认，戳戳看，很惊艳 。以前写过CSS3实现lowpoly动画效果的文章，虽然同为lowpoly效果，其实那个的实现难度要比这个高的多，也更加繁复，还用到了CSS的选择器，但是，还是那句...
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...
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、付费专栏及课程。

余额充值