以下是 html5关闭表单窗口裂开动画特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5关闭表单窗口裂开动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">-->
</head>
<body>
<div class="htmleaf-container">
<svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="close-icon">
<path d="M0.014,1.778L1.79,0.001l30.196,30.221l-1.778,1.777L0.014,1.778z"/>
<path d="M1.79,31.999l-1.776-1.777L30.208,0.001l1.778,1.777L1.79,31.999z"/>
</g>
</svg>
<div id="js-show-modal" class="launch-button">show modal
<div class="launch-button__glare"></div>
</div>
<div id="js-modal-overlay" class="modal-overlay"></div>
<div id="js-modal-holder" class="modal-holder">
<div id="js-hint1" class="hint hint--1">play with the form<br> to be sure it is just<br>a plain HTML</div>
<div id="js-hint2" class="hint hint--2">then hit<br> the close icon</div>
<div id="js-effect" style="outline1: 1px solid red" class="effect">
<div class="effect__burst">
<svg viewBox="0 0 300 300" width="300" height="300" id="js-burst">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)">
<path d="M119.843557,132.665423 L142.438936,241.234321" stroke="#FC46AD" stroke-width="2" transform="translate(131.141247, 186.949872) rotate(9.000000) translate(-131.141247, -186.949872) "></path>
<path d="M120.923275,136.327807 L194.055085,223.544529" stroke="#D0D202" stroke-width="2" transform="translate(157.489180, 179.936168) rotate(9.000000) translate(-157.489180, -179.936168) "></path>
<path d="M110.892215,7.63766131 L143.724586,126.274355" stroke="#FFE217" stroke-width="2" transform="translate(127.308401, 66.956008) rotate(-165.000000) translate(-127.308401, -66.956008) "></path>
<path d="M198.35904,105.458064 L161.773069,223.598866" stroke="#B8E986" stroke-width="3" transform="translate(180.066054, 164.528465) rotate(-74.000000) translate(-180.066054, -164.528465) "> </path>
<path d="M146.454121,53.5458334 L227.175148,153.69563" stroke="#D0D202" stroke-width="2" transform="translate(186.814634, 103.620732) rotate(-74.000000) translate(-186.814634, -103.620732) "> </path>
<path d="M94.4127006,27.0036828 L46.0682754,156.269505" stroke="#51CAD7" stroke-width="3" transform="translate(70.240488, 91.636594) rotate(-257.000000) translate(-70.240488, -91.636594) "> </path>
<path d="M29.3969741,113.63349 L113.205038,207.338224" stroke="#FC3F6B" stroke-width="2" transform="translate(71.301006, 160.485857) rotate(-257.000000) translate(-71.301006, -160.485857) "> </path>
<path d="M125.792,38.3112087 L198.92381,125.527931" stroke="#D0D202" stroke-width="2" transform="translate(162.357905, 81.919570) rotate(-104.000000) translate(-162.357905, -81.919570) "> </path>
<path d="M43.4006609,130.173225 L130.540432,224.973356" stroke="#FC46AD" stroke-width="2" transform="translate(86.970546, 177.573291) rotate(-278.000000) translate(-86.970546, -177.573291) "> </path>
<path d="M157.646537,8.08731537 L121.060566,126.228117" stroke="#B8E986" stroke-width="3" transform="translate(139.353552, 67.157716) rotate(-187.000000) translate(-139.353552, -67.157716) "> </path>
<path d="M139.340711,132.100895 L90.9962855,261.366717" stroke="#51CAD7" stroke-width="3" transform="translate(115.168498, 196.733806) rotate(-10.000000) translate(-115.168498, -196.733806) "> </path>
<path d="M136.22617,122.003677 L220.034234,215.708411" stroke="#FC3F6B" stroke-width="2" transform="translate(178.130202, 168.856044) rotate(-10.000000) translate(-178.130202, -168.856044) "></path>
</g>
</svg>
</div>
<div class="effect__circle">
<svg viewBox="0 0 100 100" width="100" height="100">
<circle cx="50" cy="50" fill="none" id="js-circle"></circle>
</svg>
</div>
<div class="effect__line effect__line--1">
<svg viewBox="0 0 4 900" width="4" height="900">
<defs>
<g id="proto-line" class="js-line">
<line x1="2" x2="2" y1="0" y2="900" stroke="red" stroke-dasharray="900 1800" stroke-dashoffset="900"></line>
<line x1="2" x2="2" y1="0" y2="900" stroke="red" stroke-dasharray="900 1800" stroke-dashoffset="900"></line>
<line x1="2" x2="2" y1="0" y2="900" stroke="red" stroke-dasharray="900 1800" stroke-dashoffset="900"></line>
</g>
</defs>
<use xlink:href="#proto-line" width="4" height="900"></use>
</svg>
</div>
<div class="effect__line effect__line--2">
<svg viewBox="0 0 4 900" width="4" height="900">
<use xlink:href="#proto-line" width="4" height="900"></use>
</svg>
</div>
<div class="effect__line effect__line--3">
<svg viewBox="0 0 4 900" width="4" height="900">
<use xlink:href="#proto-line" width="4" height="900"></use>
</svg>
</div>
<div class="effect__line effect__line--4">
<svg viewBox="0 0 4 900" width="4" height="900">
<use xlink:href="#proto-line" width="4" height="900"></use>
</svg>
</div>
</div>
<form1 action="" id="js-modal" class="modal">
<div id="js-close-button" class="modal__close">
<div id="" title="" class="icon ">
<svg viewBox="0 0 32 32">
<use xlink:href="#close-icon"></use>
</svg>
</div>
</div>
<div class="modal__header">Log In</div>
<div class="modal__description">this is dumb modal window, click × to close it</div>
<div class="modal__section">
<div class="input-with-label">
<input id="name" type="text" class="input-with-label__input">
<label for="name" class="input-with-label__label">username or email
<div class="input-with-label__label__corner"></div>
</label>
</div>
</div>
<div class="modal__section">
<div class="input-with-label">
<input id="password" type="password" class="input-with-label__input">
<label for="password" class="input-with-label__label">password
<div class="input-with-label__label__corner"></div>
</label>
</div>
</div>
<div class="modal__section grid grid--sliced grid--gutter-x2">
<div class="grid-bit grid-bit--14-20">
<button type="submit">log in</button>
</div>
<div class="grid-bit grid-bit--6-20">
<button class="button--grey">cancel</button>
</div>
</div>
</form1>
<svg style="display:none">
<image width="480" height="450" xlink:href="" id="proto-image" class="js-proto-image"></image>
</svg>
<div id="js-break-parts" class="break-parts">
<div id="js-svg-overlay" class="svg-overlay">
<svg viewBox="0 0 480 450" id="js-svg1">
<clipPath id="clip1">
<path d="M0,450.575574 L0,0 L424.903452,0 L452.375,28.5599486 L20.5087638,460.426185 L0,450.575574 Z"></path>
</clipPath>
<use xlink:href="#proto-image" clip-path="url(#clip1)" id="js-image1"></use>
</svg>
</div>
<div class="svg-overlay svg-overlay--2">
<svg viewBox="0 0 480 450" id="js-svg2">
<clipPath id="clip2">
<path d="M452.214614,28.6494713 L424.309513,0 L482.040672,0 L452.214614,28.6494713 Z"></path>
</clipPath>
<use xlink:href="#proto-image" clip-path="url(#clip2)" id="js-image2"></use>
</svg>
</div>
<div class="svg-overlay svg-overlay--3">
<svg viewBox="0 0 480 450" id="js-svg3">
<clipPath id="clip3">
<path d="M452.320312,28.526424 L482,58 L482,0.066291362 L452.320312,28.526424 Z"></path>
</clipPath>
<use xlink:href="#proto-image" clip-path="url(#clip3)" id="js-image3"></use>
</svg>
</div>
<div class="svg-overlay">
<svg viewBox="0 0 480 450" id="js-svg4">
<clipPath id="clip4">
<path d="M452.270844,28.4954427 L482,57.8942871 L482,451 L29.2740886,450.99999 L452.270844,28.4954427 Z"></path>
</clipPath>
<use xlink:href="#proto-image" clip-path="url(#clip4)" id="js-image4"></use>
</svg>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src='js/howler.min.js'></script>
<script type="text/javascript" src='js/tween.min_1.js'></script>
<script type="text/javascript" src='js/html2canvas.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
JS代码(index.js):
(function(){
var Main;
Main = (function(){
function Main(o){
this.o = o != null ? o:{
}
;
this.vars();
this.listeners();
}
Main.prototype.vars = function(){
var crack1,crack3,isOpera,url;
this.$effect = $('#js-effect');
this.$close = $('#js-close-button');
this.$modal = $('#js-modal');
this.$modalHolder = $('#js-modal-holder');
this.$protoImage = $('.js-proto-image');
this.$breakParts = $('#js-break-parts');
this.$modalOverlay = $('#js-modal-overlay');
this.$hint1 = $('#js-hint1');
this.$hint2 = $('#js-hint2');
this.$burst = $('#js-burst');
this.$burstPaths = this.$burst.find('path');
this.$showModal = $('#js-show-modal');
this.$circle = $('#js-circle');
this.$breakParts = $('#js-break-parts');
this.$breakOverlays = this.$breakParts.find('.svg-overlay');
this.$breakPart1 = this.$breakOverlays.eq(0);
this.$breakPart2 = this.$breakOverlays.eq(1);
this.$breakPart3 = this.$breakOverlays.eq(2);
this.$breakPart4 = this.$breakOverlays.eq(3);
this.$svgOverlay = $('.svg-overlay');
this.$lines = $('.js-line').children();
this.loop = this.loop.bind(this);
this.loop();
this.initEffectTweens();
this.showModal(true);
this.showHints(700);
isOpera = navigator.userAgent.match(/Opera|OPR\//);
crack1 = '../media/gun.wav';
crack3 = '../media/gun.mp3';
url = !isOpera ? crack3:crack1;
return this.audio = new Howl({
urls:[url]}
);
}
;
Main.prototype.showHints = function(delay){
var HIDE_DELAY,HINT2_DELAY,it;
it = this;
HIDE_DELAY = 5000;
HINT2_DELAY = 200;
this.hint1T = new TWEEN.Tween({
p:0}
).to({
p:1}
,500).onUpdate(function(){
return it.$hint1.css({
opacity:this.p}
);
}
).delay(delay).start();
this.hint2T = new TWEEN.Tween({
p:0}
).to({
p:1}
,500).onUpdate(function(){
return it.$hint2.css({
opacity:this.p}
);
}
).delay(delay + HINT2_DELAY).start();
return this.hintHideT = new TWEEN.Tween({
p:0}
).to({
p:1}
,500).onUpdate(function(){
it.$hint1.css({
opacity:1 - this.p}
);
return it.$hint2.css({
opacity:1 - this.p}
);
}
).delay(delay + HINT2_DELAY + HIDE_DELAY).start();
}
;
Main.prototype.showModal = function(isFirst){
var tm;
if (isFirst){
tm = setTimeout((function(_this){
return function(){
_this.$modal.find('input').val('');
return clearTimeout(tm);
}
;
}
)(this),10);
}
this.initEffectTweens(isFirst);
return this.showModalT.start();
}
;
Main.prototype.listeners = function(){
var $input;
this.$showModal.on('click',(function(_this){
return function(){
return _this.showModal();
}
;
}
)(this));
this.$modal.on('keyup','input',function(e){
var $it,k,text;
$it = $(e.target);
text = $it.val();
$it.toggleClass('is-fill',!!text);
if ($it.attr('type') === 'text'){
text = text.replace(/\s/g,'');
}
k = e.keyCode;
if ((k > 48 && k < 90) || (k === 48 || k === 45 || k === 32)){
return $it.val(text);
}
}
);
$input = null;
this.$close.on('mouseleave touchstart',function(){
if ($input != null){
$input.removeClass('is-keep-focus');
}
return $input = null;
}
);
this.$close.on('mouseenter touchstart',(function(_this){
return function(){
$input = $('input:focus').addClass('is-keep-focus');
return html2canvas(_this.$modal,{
onrendered:function(canvas){
var dataURL;
dataURL = canvas.toDataURL();
_this.$svgOverlay.css({
display:'block'}
);
return _this.$protoImage.attr('xlink:href',dataURL);
}
}
);
}
;
}
)(this));
return this.$close.on('click',(function(_this){
return function(){
_this.$modal.css({
display:'none'}
);
_this.$breakParts.css({
'z-index':2,opacity:1}
);
_this.$effect.show();
_this.launchEffects();
_this.audio.play();
return true;
}
;
}
)(this));
}
;
Main.prototype.initEffectTweens = function(isFirst){
var colors,i,it,j,len,len1,path,ref,shakeOffset,showLen,showOffset;
it = this;
this.s = 1;
ref = it.$burstPaths;
for (i = j = 0,len1 = ref.length;
j < len1;
i = ++j){
path = ref[i];
len = path.getTotalLength();
showLen = this.rand(0,~~len / 2);
showOffset = this.rand(0,-(~~len));
path.len = len;
path.showLen = showLen;
path.showOffset = showOffset;
path.strokeWidth = this.rand(0,5);
path.setAttribute('stroke-dasharray',showLen + " " + (3 * len));
path.setAttribute('stroke-dashoffset',showLen);
path.setAttribute('stroke-linecap','round');
}
len = 900;
colors = ['hotpink','yellow','cyan'];
this.linesT = new TWEEN.Tween({
p:0}
).to({
p:1}
,900 * this.s).easing(TWEEN.Easing.Exponential.Out).onUpdate(function(){
var l,len2,line,nP,p,progress,ref1;
p = this.p;
nP = 1 - p;
progress = len * nP - len * p;
ref1 = it.$lines;
for (i = l = 0,len2 = ref1.length;
l < len2;
i = ++l){
line = ref1[i];
line.setAttribute('stroke-dashoffset',progress + (i * 500) * nP);
line.setAttribute('stroke',colors[i]);
line.setAttribute('stroke-width',2 * nP);
}
return it.$circle.attr({
r:11 * p,fill:"rgba(" + (~~(0 + 255 * p)) + "," + (~~(255 - 153 * p)) + "," + (~~(255 - 75 * p)) + "," + nP + ")",'stroke-width':7 * nP}
);
}
).onComplete((function(_this){
return function(){
return _this.$effect.css({
display:'none'}
);
}
;
}
)(this));
this.burstT = new TWEEN.Tween({
p:0}
).to({
p:1}
,400 * this.s).onUpdate(function(){
var l,len2,nP,p,ref1,results;
p = this.p;
nP = 1 - p;
ref1 = it.$burstPaths;
results = [];
for (i = l = 0,len2 = ref1.length;
l < len2;
i = ++l){
path = ref1[i];
path.setAttribute('stroke-dashoffset',path.showOffset - (path.len * p));
results.push(path.setAttribute('stroke-width',path.strokeWidth * nP));
}
return results;
}
);
shakeOffset = 50;
this.shakeT = new TWEEN.Tween({
p:0}
).to({
p:1}
,350 * this.s).onUpdate(function(){
var nP,p,shake;
p = this.p;
nP = 1 - p;
shake = shakeOffset * nP;
it.$breakParts.css({
transform:"translate(" + shake + "px," + shake + "px)"}
);
return it.$effect.css({
transform:"translate(" + (-.75 * shake) + "px," + (-.5 * shake) + "px)"}
);
}
).easing(TWEEN.Easing.Elastic.Out);
this.shiftT = new TWEEN.Tween({
p:0}
).to({
p:1}
,1350 * this.s).easing(TWEEN.Easing.Sinusoidal.In).onUpdate(function(){
var nP,p,shift,t1,t4;
p = this.p;
nP = 1 - p;
shift = 900 * p;
t1 = "translate(" + (-shift) + "px," + (1000 * p) + "px) rotate(" + (-50 * p) + "deg)";
t4 = "translate(0," + (1000 * p) + "px) rotate(" + (-15 * p) + "deg)";
it.$breakPart1.css({
transform:t1}
);
it.$breakPart4.css({
transform:t4}
);
return it.$modalOverlay.css({
transform:"translate(0," + (50 * p) + ")",opacity:nP}
);
}
).onComplete((function(_this){
return function(){
_this.$modalOverlay.css({
display:'none'}
);
_this.$breakParts.css({
display:'none'}
);
return _this.$modalHolder.css({
display:'none'}
);
}
;
}
)(this));
this.shiftT2 = new TWEEN.Tween({
p:0}
).to({
p:1}
,1350 * this.s).onUpdate(function(){
var nP,p,shift,t2,t3;
p = this.p;
nP = 1 - p;
shift = 900 * p;
t2 = "translate(" + (-1670 * p) + "px," + (-800 * p) + "px) rotate(" + (905 * p) + "deg)";
t3 = "translate(" + (1000 * p) + "px," + (700 * p) + "px) rotate(" + (-1500 * p) + "deg)";
it.$breakPart2.css({
transform:t2}
);
return it.$breakPart3.css({
transform:t3}
);
}
);
return this.showModalT = new TWEEN.Tween({
p:0}
).to({
p:1}
,800 * this.s).easing(TWEEN.Easing.Exponential.Out).onStart((function(_this){
return function(){
TWEEN.remove(_this.shiftT);
TWEEN.remove(_this.shiftT2);
TWEEN.remove(_this.shakeT);
TWEEN.remove(_this.linesT);
TWEEN.remove(_this.burstT);
_this.$modal.css({
display:'block',opacity:0}
);
_this.$breakParts.css({
display:'block'}
);
_this.$modalHolder.css({
display:'block'}
);
!isFirst && _this.$modalOverlay.css({
display:'block',opacity:0}
);
_this.$breakPart1.css({
transform:'none'}
);
_this.$breakPart2.css({
transform:'none'}
);
_this.$breakPart3.css({
transform:'none'}
);
_this.$breakPart4.css({
transform:'none'}
);
_this.$modal.css({
display:'block'}
);
return _this.$breakParts.css({
'z-index':0,opacity:0}
);
}
;
}
)(this)).onUpdate(function(){
var nP,p;
p = this.p;
nP = 1 - p;
it.$modal.css({
opacity:p,transform:"translateY(" + (15 * nP) + "px)"}
);
return !isFirst && it.$modalOverlay.css({
opacity:p}
);
}
);
}
;
Main.prototype.launchEffects = function(){
this.$hint1.hide();
this.$hint2.hide();
this.burstT.start();
this.linesT.start();
this.shiftT.start();
this.shiftT2.start();
return this.shakeT.start();
}
;
Main.prototype.loop = function(){
requestAnimationFrame(this.loop);
return TWEEN.update();
}
;
Main.prototype.rand = function(min,max){
return Math.floor((Math.random() * ((max + 1) - min)) + min);
}
;
return Main;
}
)();
new Main;
}
).call(this);
CSS代码(demo.css):
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","瀹嬩綋","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;overflow:hidden;}
分享到QQ
分享到微博
微信扫一扫
