css3 点击爆炸下落

一个代码简洁，效果明显的jquery+css3特效
点击div块状，会自动破碎并散落到网页底部
效果预览：http://www.huiyi8.com/css3/

$(document).ready(function() {

// Generate the clips. In this case I'm using 5 (or 25 pieces)

(genClips = function() {

// For easy use

$t = $('.clipped-box');

// Like I said, we're using 5!

var amount = 5;

// Get the width of each clipped rectangle.

var width = $t.width() / amount;

var height = $t.height() / amount;

// The total is the square of the amount

var totalSquares = Math.pow(amount, 2);

// The HTML of the content

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;

}

})();

// A quick random function for selecting random numbers

function rand(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

// A variable check for when the animation is mostly over

var first = false,

clicked = false;

// On click

$('.clipped-box div').on('click', function() {

if(clicked === false) {

clicked = true;

$('.clipped-box .content').css({'display' : 'none'});

// Apply to each clipped-box div.

$('.clipped-box div:not(.content)').each(function() {

// So the speed is a random speed between 90m/s and 120m/s. I know that seems like a lot

// But otherwise it seems too slow. That's due to how I handled the timeout.

var v = rand(120, 90),

angle = rand(80, 89), // The angle (the angle of projection) is a random number between 80 and 89 degrees.

theta = (angle * Math.PI) / 180, // Theta is the angle in radians

g = -9.8; // And gravity is -9.8. If you live on another planet feel free to change

// $(this) as self

var self = $(this);

// time is initially zero, also set some random variables. It's higher than the total time for the projectile motion

// because we want the squares to go off screen.

var t = 0,

z, r, nx, ny,

totalt = 15;

// The direction can either be left (1), right (-1) or center (0). This is the horizontal direction.

var negate = [1, -1, 0],

direction = negate[ Math.floor(Math.random() * negate.length) ];

// Some random numbers for altering the shapes position

var randDeg = rand(-5, 10),

randScale = rand(0.9, 1.1),

randDeg2 = rand(30, 5);

// Because box shadows are a bit laggy (by a bit I mean 'box shadows will not work on individual clipped divs at all')

// we're altering the background colour slightly manually, in order to give the divs differentiation when they are

// hovering around in the air.

var color = $(this).css('backgroundColor').split('rgb(')[1].split(')')[0].split(', '),

colorR = rand(-20, 20), // You might want to alter these manually if you change the color

colorGB = rand(-20, 20), // To get the right consistency.

newColor = 'rgb('+(parseFloat(color[0])+colorR)+', '+(parseFloat(color[1])+colorGB)+', '+(parseFloat(color[2])+colorGB)+')';

// And apply those

$(this).css({

'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)',

'background' : newColor

});

// Set an interval

z = setInterval(function() {

// Horizontal speed is constant (no wind resistance on the internet)

var ux = ( Math.cos(theta) * v ) * direction;

// Vertical speed decreases as time increases before reaching 0 at its peak

var uy = ( Math.sin(theta) * v ) - ( (-g) * t);

// The horizontal position

nx = (ux * t);

// s = ut + 0.5at^2

ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));

// Apply the positions

$(self).css({'bottom' : (ny)+'px', 'left' : (nx)+'px'});

// Increase the time by 0.10

t = t + 0.10;

// If the time is greater than the total time clear the interval

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'});

// Finally clear the interval

clearInterval(z);

}

}, 10); // Run this interval every 10ms. Changing this will change the pace of the animation

});

}

});

r = setInterval(function() {

// This is a bit rough but it does the job

if(first === true) {

// I've just put this in so the deleted box will come down again after its been clicked.

// That way you can keep pressing delete.

$('.clipped-box').css({'top' : '0', 'transition' : ''});

$('.clipped-box div').css({'opacity' : '1', 'transition' : '', 'background-color' : ''});

$('.content').css({'display' : 'block'});

first = false;

}

}, 300);

});

转载于:https://www.cnblogs.com/lhrs/p/4121124.html

css3 点击爆炸下落相关推荐

HTML5 canvas点击爆炸网页特效代码
简介: HTML5 canvas点击爆炸网页特效代码, 直接写在想要出现特效的页面,如果是cms则放在所用的模板文件下foot.php文件里. 网盘下载地址: http://kekewl.net/3D ...
html圆圈中打钩代码,CSS3点击按钮圆形进度打钩效果的实现代码
文章目录八.CSS3点击按钮圆形进度打钩效果8.1 图片预览8.2 index.html代码8.3 style.css代码八.CSS3点击按钮圆形进度打钩效果 8.1 图片预览 8.2 index ...
超厉害的CSS3图片破碎爆炸效果！
Java代码 var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; ...
按钮背景过渡css3,使用CSS3点击按钮实现背景渐变动画的效果
这篇文章给大家介绍的是,利用CSS3实现当点击按钮的时候,按钮的背景是渐变动画的效果,实现后的效果非常好,开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受,感兴趣的朋友们下面来一起看看吧. 效果 ...
css3点击会移动到点,CSS3过渡点击事件
根据CSS3过渡: div { transition-property: width; transition-duration: 1s; transition-timing-function: lin ...
hexo添加点击爆炸效果 duang duang duang
首先在themes/next/source/js/src里面建一个叫fireworks.js的文件,代码如下: "use strict";function updateCoords ...
html网站点击特效,HTML5 svg和CSS3炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
html5按钮自动特效,HTML5 svg和CSS3 22种炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
css3轮播不用jpuery_15款效果很酷的最新jQuery/CSS3特效
很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

css3 点击爆炸下落

css3 点击爆炸下落相关推荐

最新文章

热门文章