Cash.animate, card animation
How do I make an cash.animate, card animation?
Cash.animate beta, Card animation. What is a cash.animate, card animation? How do you make a cash.animate, card animation? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.
Cash.animate, card animation Previews
Cash.animate, card animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cash.animate, card animation</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/qnryjr.css'>
<link rel='stylesheet prefetch' href='css/https___cdn_rawgit_com_to.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ // default vars
@spacing: 20px;
@spacing-base: @spacing;
@spacing-half: @spacing/2;
@spacing-double: @spacing*2;
@border-radius: 5px;
@color-primary: @light-blue-300;
@color-secondary: @pink-300;
@color-text: #444;
@color-light: #888;
@color-lighter: #aaa;
@color-divider: #ddd;
// body etc
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body { line-height: 150%; background: #eee; }
h1 { color: @color-text; font-family: 'Pacifico', arial; text-transform: none; font-size: 2rem; }
h1 i { font-family: 'Work Sans', arial; text-transform: uppercase; color: @color-light; font-size: 0.7rem; }
h1 { margin-bottom: @spacing; }
button { margin-bottom: @spacing*2; text-transform: uppercase; font-size: 0.7rem; color: @color-light; border-color: @color-light; transition: none; padding: @spacing-half*1.3 @spacing*1.5; font-weight: @font-normal; }
button:hover { background: @color-primary; border-color: @color-primary; }
* { box-sizing: border-box; }
i { display: block; font-style: normal; }
img { display: block; }
#playAll.playing { background: @light-green-400; border-color: @light-green-400; color: #fff;
}
#playAll.awesome { background: @color-secondary; border-color: @color-secondary; color: #fff;
}
button.btn { padding: @spacing-half @spacing*1.3; margin: @spacing @spacing-half/2 @spacing*2; margin-top: @spacing-half; transition: all .1s ease; }
/*----------------------------------------------------- CARD
-----------------------------------------------------*/
.card { // main props width: 600px; height: 300px; background: #fff; display: inline-block; border-radius: @border-radius; overflow: hidden; box-shadow: 0 0 15px @color-divider; display: table; table-layout: fixed; position: relative; .left, .right { display: table-cell; width: 50%; vertical-align: middle; position: relative; } // left .left { background: url('//c4.staticflickr.com/3/2807/9219919547_ec6a8abb0e_c.jpg') center center; background-size: cover; // gradient overlay &:after { display: block; content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(45deg, rgba(0,136,255,1) 0%, rgba(230,30,200,1) 100%); opacity: 0.7; } } // right .right { padding: @spacing; i { color: @color-text; font-weight: @font-normal; } .head { font-size: 1.1rem; } .sub { text-transform: uppercase; font-size: .7rem; color: @color-light; } button { font-weight: @font-normal; margin: @spacing 0; background: @color-primary; border: 0; color: #fff; } .buddy { display:inline-block; text-align: center; @bwidth: 80px; width: @bwidth; height: @bwidth; border-radius: 50%; margin: @spacing-half 0; } .stats { position: relative; margin: @spacing 0; display: table; table-layout: fixed; font-size: .6rem; width:100%; border: 1px solid @color-divider; border-left: 0; border-right: 0; border:0; .stat { width: 33.3333%; display: table-cell; padding: @spacing-half/2 0; letter-spacing: .5px; line-height: 1.7; border-left: 1px solid @color-divider; &:nth-child(1) { border-left: 0; } i:first-child { color: @color-light; } i:nth-child(2) { font-size: 0.9rem; font-weight: @font-normal; text-transform: uppercase; span { font-size: 0.55rem; display: block; color: @color-light; } } } // .stat } // .stats } // .right // backside .back { position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: #fff; border-bottom: 3px solid @color-primary; .inner { width: 100%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); padding: @spacing; } i, a { color: @color-text; } i { display: block; font-size: 0.8rem; line-height: 2; margin: @spacing 0; } .head { font-size: 1.1rem; font-weight: @font-normal; opacity: 1; transform: none; } .imgs { width: 326px; margin: 0 auto; position: relative; } img { width: 100px; height: 100px; border-radius: @border-radius; display: block; float:left; @imgPad: 13px; margin: 0 @imgPad @imgPad 0; &:nth-child(3) { margin-right: -27px; } &:nth-child(6) { margin-right: -27px; } &:nth-child(6):after { clear:both; display: block; content: ''; } } .close { position: absolute; top:0; right:0; z-index: 2; padding: @spacing; font-size: 3rem; cursor: pointer; font-weight: @font-light; transition: opacity .2s ease; color: @color-light; } .clear { clear:both; height:0; margin:0; padding:0; } a { text-decoration:none; border-bottom: 1px solid @color-light; color: @color-light; margin-top: @spacing; } a:hover { color: @color-text; } a:before { float:none; clear: both; display: block; content: ' '; } }
} // .card
/*----------------------------------------------------- ANIMATION SPECIFICS
-----------------------------------------------------*/
.card { backface-visibility: hidden; }
.card, .back, .left, .right {}
.popPhoto, .buddy, .head, .sub, .stats, .card { opacity: 0; transform: translateY(100px);
}
.buddy { backface-visibility: hidden; }
.back { border-radius: @border-radius; backface-visibility: hidden; transform: translateY(100%); .close, img { opacity: 0; transform: translateY(50px); } .close { transform: translateY(-30px); }
}
/*----------------------------------------------------- LOADER
-----------------------------------------------------*/
#loader { width: 60px; height: 60px; margin: 50px auto; background-color: @color-primary; border-radius: 100%; display:none;
}
#loader.load { animation: ldr 1.0s infinite ease-in-out; display: block; }
@keyframes ldr { 0% { transform: scale(0) translate(0,0); } 25% { transform: scale(0.5) translate(40px,-40px); opacity: 1; } 50% { transform: scale(0.5) translate(-40px,40px); opacity: 1; } 75% { transform: scale(0.5) translate(40px,40px); opacity: 1; } 100% { transform: scale(1) translate(0,0); opacity: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1><i>— cash.animate —</i>Card animation</h1>
<button id="playAll" class="btn">Play all</button> <button class="btn" onclick="location.reload(true)">Reload</button>
<div id="loader" class="load"></div>
<div class="card"> <div class="left"></div> <div class="right"> <img class="buddy" src="//farm4.staticflickr.com/3932/buddyicons/43830692@N04_r.jpg?1413100041#43830692@N04"> <i class="head">Tommie Hansen</i> <i class="sub">Rogue Designer</i> <div class="stats"> <div class="stat"> <i>Photos</i> <i>958,336 <span>views</span></i> </div> <div class="stat"> <i>Stream</i> <i>583,514 <span>views</span></i> </div> <div class="stat"> <i>Albums</i> <i>225,955 <span>views</span></i> </div> </div><!-- / .stats --> <button class="popPhoto">Popular photos</button> </div><!-- / .right --> <div class="back"> <span class="close">×</span> <div class="inner"> <i class="head">Popular photos</i> <div class="imgs"> <img class="backImg" src="http://farm8.static.flickr.com/7390/12980175743_5cb04727f3_q.jpg"> <img class="backImg" src="http://farm4.static.flickr.com/3679/12980129103_edbea2fca4_q.jpg"> <img class="backImg" src="http://farm6.static.flickr.com/5497/14367491417_563fcbc6a9_q.jpg"> <img class="backImg" src="http://farm3.static.flickr.com/2573/12980150413_6982593c38_q.jpg"> <img class="backImg" src="http://farm6.static.flickr.com/5497/14367491417_563fcbc6a9_q.jpg"> <img class="backImg" src="http://farm3.static.flickr.com/2573/12980150413_6982593c38_q.jpg"> <br class="clear"> </div> <i class="link"><a href="https://www.flickr.com/photos/tommiehansen/" target="_blank">Visit Flickr photostream</a></i> </div> </div>
</div><!-- / .card --> <script src='https://cdnjs.cloudflare.com/ajax/libs/cash/1.3.0/cash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cash.animate, card animation - Script Codes CSS Codes
// default vars
@spacing: 20px;
@spacing-base: @spacing;
@spacing-half: @spacing/2;
@spacing-double: @spacing*2;
@border-radius: 5px;
@color-primary: @light-blue-300;
@color-secondary: @pink-300;
@color-text: #444;
@color-light: #888;
@color-lighter: #aaa;
@color-divider: #ddd;
// body etc
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body { line-height: 150%; background: #eee; }
h1 { color: @color-text; font-family: 'Pacifico', arial; text-transform: none; font-size: 2rem; }
h1 i { font-family: 'Work Sans', arial; text-transform: uppercase; color: @color-light; font-size: 0.7rem; }
h1 { margin-bottom: @spacing; }
button { margin-bottom: @spacing*2; text-transform: uppercase; font-size: 0.7rem; color: @color-light; border-color: @color-light; transition: none; padding: @spacing-half*1.3 @spacing*1.5; font-weight: @font-normal; }
button:hover { background: @color-primary; border-color: @color-primary; }
* { box-sizing: border-box; }
i { display: block; font-style: normal; }
img { display: block; }
#playAll.playing { background: @light-green-400; border-color: @light-green-400; color: #fff;
}
#playAll.awesome { background: @color-secondary; border-color: @color-secondary; color: #fff;
}
button.btn { padding: @spacing-half @spacing*1.3; margin: @spacing @spacing-half/2 @spacing*2; margin-top: @spacing-half; transition: all .1s ease; }
/*----------------------------------------------------- CARD
-----------------------------------------------------*/
.card { // main props width: 600px; height: 300px; background: #fff; display: inline-block; border-radius: @border-radius; overflow: hidden; box-shadow: 0 0 15px @color-divider; display: table; table-layout: fixed; position: relative; .left, .right { display: table-cell; width: 50%; vertical-align: middle; position: relative; } // left .left { background: url('//c4.staticflickr.com/3/2807/9219919547_ec6a8abb0e_c.jpg') center center; background-size: cover; // gradient overlay &:after { display: block; content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(45deg, rgba(0,136,255,1) 0%, rgba(230,30,200,1) 100%); opacity: 0.7; } } // right .right { padding: @spacing; i { color: @color-text; font-weight: @font-normal; } .head { font-size: 1.1rem; } .sub { text-transform: uppercase; font-size: .7rem; color: @color-light; } button { font-weight: @font-normal; margin: @spacing 0; background: @color-primary; border: 0; color: #fff; } .buddy { display:inline-block; text-align: center; @bwidth: 80px; width: @bwidth; height: @bwidth; border-radius: 50%; margin: @spacing-half 0; } .stats { position: relative; margin: @spacing 0; display: table; table-layout: fixed; font-size: .6rem; width:100%; border: 1px solid @color-divider; border-left: 0; border-right: 0; border:0; .stat { width: 33.3333%; display: table-cell; padding: @spacing-half/2 0; letter-spacing: .5px; line-height: 1.7; border-left: 1px solid @color-divider; &:nth-child(1) { border-left: 0; } i:first-child { color: @color-light; } i:nth-child(2) { font-size: 0.9rem; font-weight: @font-normal; text-transform: uppercase; span { font-size: 0.55rem; display: block; color: @color-light; } } } // .stat } // .stats } // .right // backside .back { position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: #fff; border-bottom: 3px solid @color-primary; .inner { width: 100%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); padding: @spacing; } i, a { color: @color-text; } i { display: block; font-size: 0.8rem; line-height: 2; margin: @spacing 0; } .head { font-size: 1.1rem; font-weight: @font-normal; opacity: 1; transform: none; } .imgs { width: 326px; margin: 0 auto; position: relative; } img { width: 100px; height: 100px; border-radius: @border-radius; display: block; float:left; @imgPad: 13px; margin: 0 @imgPad @imgPad 0; &:nth-child(3) { margin-right: -27px; } &:nth-child(6) { margin-right: -27px; } &:nth-child(6):after { clear:both; display: block; content: ''; } } .close { position: absolute; top:0; right:0; z-index: 2; padding: @spacing; font-size: 3rem; cursor: pointer; font-weight: @font-light; transition: opacity .2s ease; color: @color-light; } .clear { clear:both; height:0; margin:0; padding:0; } a { text-decoration:none; border-bottom: 1px solid @color-light; color: @color-light; margin-top: @spacing; } a:hover { color: @color-text; } a:before { float:none; clear: both; display: block; content: ' '; } }
} // .card
/*----------------------------------------------------- ANIMATION SPECIFICS
-----------------------------------------------------*/
.card { backface-visibility: hidden; }
.card, .back, .left, .right {}
.popPhoto, .buddy, .head, .sub, .stats, .card { opacity: 0; transform: translateY(100px);
}
.buddy { backface-visibility: hidden; }
.back { border-radius: @border-radius; backface-visibility: hidden; transform: translateY(100%); .close, img { opacity: 0; transform: translateY(50px); } .close { transform: translateY(-30px); }
}
/*----------------------------------------------------- LOADER
-----------------------------------------------------*/
#loader { width: 60px; height: 60px; margin: 50px auto; background-color: @color-primary; border-radius: 100%; display:none;
}
#loader.load { animation: ldr 1.0s infinite ease-in-out; display: block; }
@keyframes ldr { 0% { transform: scale(0) translate(0,0); } 25% { transform: scale(0.5) translate(40px,-40px); opacity: 1; } 50% { transform: scale(0.5) translate(-40px,40px); opacity: 1; } 75% { transform: scale(0.5) translate(40px,40px); opacity: 1; } 100% { transform: scale(1) translate(0,0); opacity: 0; }
}Cash.animate, card animation - Script Codes JS Codes
// + cash.js
// cash anim beta (scroll through)
var camelCase=function(){var d=/(?:^\w|[A-Z]|\b\w)/g,p=/[\s-_]+/g;return function(f){return f.replace(d,function(d,f){return d[0===f?"toLowerCase":"toUpperCase"]()}).replace(p,"")}}(),getPrefixedProp=function(){var d={},p=document.createElement("div").style;return function(f){f=camelCase(f);if(d[f])return d[f];var e=f.charAt(0).toUpperCase()+f.slice(1),e=(f+" "+["webkit","moz","ms","o"].join(e+" ")+e).split(" ");$.each(e,function(e){if(e in p)return d[e]=f=d[f]=e,!1});return d[f]}}();
$.prefixedProp=getPrefixedProp;$.camelCase=camelCase;
(function(d){function p(){var a=g.length,b;if(g.playing&&0!==a){for(;a--;)(b=g[a])&&!1===b()&&(b=g.indexOf(b),-1<b&&g.splice(b,1));g.frame=H(p)}else g.playing=!1,g.frame=null}function f(a,b,c,d){if(1===arguments.length){if(B[a])return B[a];var n=T.exec(a);return B[a]=n?f.apply(null,n.slice(1,5)):null}var l=3*a,h=3*(c-a)-l,k=1-l-h,v=3*b,q=3*(d-b)-v,I=1-v-q;return function(a){for(var b=a,c=0,d;3>c;){d=b*(l+b*(h+b*k))-a;if(.001>Math.abs(d))break;b-=d/(l+b*(2*h+3*k*b));c++}a=b;return a*(v+a*(q+a*I))}}
function e(a,b){return function(c,d){c=c||0==c?c:b;return d?c:" "+a+"("+c+")"}}function z(a){(a=U.exec(a))||0===a?(a=a.slice(1,3),a[0]=parseFloat(a[0])):a=[0,"px"];return a}function V(a,b,c,d,n,f){var h=Math.acos,k=Math.atan,v=Math.sqrt,q=Math.PI,I=a*d-b*c,J=1,g=1,t,u,e,r={};if(a||b)t=v(a*a+b*b),e=0<b?h(a/t):-h(a/t),J=t,g=I/t,t=k((a*c+b*d)/(t*t));else if(c||d)u=v(c*c+d*d),e=.5*q-(0<d?h(-c/u):-h(c/u)),J=I/u,g=u,u=k((a*c+b*d)/(u*u));n&&"0"!==n&&(r.translateX=n);f&&"0"!==n&&(r.translateY=f);1!==J&&(r.scaleX=
J);1!==g&&(r.scaleY=g);t&&(r.skewX=t);u&&(r.skewY=u);0!==e&&(r.rotate=180/q*e+"deg");return r}function R(a,b,c){var d=c,f=0;b=b&&2===b.length?b[0]:b;c&&2===c.length&&(d=c[0],f=c[1]||0);return b+(d-b)*a+f}function W(a,b,c){var f={start:{},end:{}};a=w.getComputedStyle(a);var g,l,h,k,e;if(c)f.start[A]=a[A],f.end[A]="";else{e={start:{translateZ:0},end:{translateZ:0}};k=a[A];var q=K.exec(k);h={};if(q)if("matrix"===q[1])h=V.apply(null,q[2].split(/[\s,]+/));else for(;q;)h[q[1]]=q[2],q=K.exec(k);for(l in h)k=
x[l](h[l],!0),e.start[l]=k,e.end[l]=k;f.transforms=e}for(g in b)k=b[g],x[g]?c?f.end[A]+=x[g](k):(e.start[g]=z(e.start[g]||x[g](null,!0)),e.end[g]=z(k)):(l=d.prefixedProp(g),h=a[l],c||(h=z(h),k=z(k)),f.start[l]=h,f.end[l]=k);return f}function y(){}function S(a,b,c,e){function n(b){var e=c;b.length&&(e=d.extend({},c,b[1]),b=b[0]);e.frameStart.call(a,a);d.each(a,function(a,c){var h=a.nodeType,k=h&&!e.disableAnimate&&a.animate,l=h?a.style:a,r={},n={},p={},w=e.stagger*c,z=e.delay,E=y;if(h)r=W(a,b,k),n=
r.start,p=r.end;else for(m in b)n[m]=l[m],p[m]=b[m];e.itemStart.call(a,a,c);if(k){var k=d.extend({},e,{delay:z+w}),E=a.animate([n,p],k),L;if("alternate"===C&&F%2||"normal"===C)L=p;E.addEventListener("finish",function(b){if(L)for(m in L)l[m]=L[m];v(a,c)})}else{var H=e.duration,G=Date.now(),N=G+z+w,K=f(e.easing)||B.linear,F=e.iterations,C=e.direction,O="reverse"===C||"alternate-reverse"===C,M=r.transforms,D=0,P,m,Q,E=function(){G=Date.now();if(!(G<N)){D=(G-N)/H;1<D&&(D=1);P=K(O?1-D:D);for(m in p)l[m]=
R(P,n[m],p[m]);if(h&&M){Q="";for(m in M.end)Q+=x[m](R(P,M.start[m],M.end[m]));l[A]=Q}if(!1===e.itemProgress.call(a,a,c))return!1;if(1<=D){if("alternate"===C||"alternate-reverse"===C)O=!O;if(1>=F)return v(a,c),!1;1<F&&Infinity!==F&&F--;N=G}}};g.push(E);g.play()}return E})}a=a.length?a:[a];b=b.length?b:[b];c=d.extend({},X,c);var l=a.length,h=0,k=b.length,v=function(d,e){c.itemComplete.call(d,d,e);l--;l||(c.frameComplete.call(a,a),h++,h<k?(l=a.length,n(b[h])):c.complete.call(a,a))};c.start.call(a,a);
n(b[h])}var w=window,H=w.requestAnimationFrame||w.webkitRequestAnimationFrame||w.mozRequestAnimationFrame||w.msRequestAnimationFrame||function(a){w.setTimeout(a,20)},g=[];g.play=function(){g.frame=g.frame||H(p);g.playing=!0};d.animations=g;var B={linear:function(a){return a}},T=/cubic-bezier\(([\d\.]+),\s+?([\d\.]+),\s+?([\d\.]+),\s+?([\d\.]+)\)/i;d.extend(B,{ease:f(.25,.1,.25,1),"ease-in":f(.42,0,1,1),"ease-out":f(0,0,.58,1),"ease-in-out":f(.42,0,.58,1)});d.easings=B;var A=d.prefixedProp("transform"),
x={};d.each("rotate rotateX rotateY rotateZ skew skewX skewY".split(" "),function(a){x[a]=e(a,"0deg")});d.each(["x","y","z"],function(a){var b="translate"+a.toUpperCase();x[b]=x[a]=e(b,0)});d.each(["scale","scaleX","scaleY","scaleZ"],function(a){x[a]=e(a,1)});var U=/(-?[0-9]+(?:\.[0-9]+)?)([a-z%]+)?$/i,K=/([a-z]+)\((.*?)\)/ig,X={iterations:1,duration:400,easing:"linear",delay:0,stagger:0,reversed:!1,direction:"normal",fill:"both",start:y,complete:y,itemStart:y,itemProgress:y,itemComplete:y,frameStart:y,
frameComplete:y};d.animate=function(a,b,c){return new S(a,b,c)};d.fn.animate=function(a,b){return new S(this,a,b)}})(window.$);
/*----------------------------------------------------- CUSTOM STUFF
-----------------------------------------------------*/
// custom sequence function
function _s(d,a,b){a=a||0;b=b||d.length;var c=d[a];a+1<b&&(c.opts.complete=function(){_s(d,a+1,b)});c.e.animate(c.frame,c.opts)};
/*----------------------------------------------------- VARS + SELECTORS
-----------------------------------------------------*/
// easings
var outCust = 'cubic-bezier(0.26, 0.97, 0.5, 1)', outQuint = 'cubic-bezier(0.23, 1, 0.32, 1)', inQuint = 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', outBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
var outEase = outQuint, // set here = easier to change all later inEase = inQuint;
// selectors
var card = $('.card'), frontElems = card.find('.popPhoto, .buddy, .right .head, .sub, .stats'), loader = $('#loader'), popPhoto = card.find('.popPhoto'), back = card.find('.back'), backClose = back.find('.close'), backImages = back.find('img'), playAll = $('#playAll');
/*----------------------------------------------------- SEQUENCES
-----------------------------------------------------*/
var seq_intro = [ { e: card, frame: { y: 0, opacity: 1 }, opts: { duration: 500, easing: outEase } }, { e: frontElems, frame: { y: 0, opacity: 1 }, opts: { duration: 300, easing: outEase, stagger: 60 } }
];
var seq_outro = [ { e: frontElems, frame: { y: '100px', opacity: 0 }, opts: { duration: 200, easing: inEase, stagger: 60 } }, { e: card, frame: { y: '100px', opacity: 0 }, opts: { duration: 500, easing: inEase } },
];
// sequence 'popular photos' click
var seq_backOpen = [ { e: popPhoto, frame: { scale: 0.9 }, opts: { duration: 60, easing: 'ease-in-out' } }, { e: popPhoto, frame: { scale: 1 }, opts: { duration: 60, easing: 'ease-in-out' } }, { e: popPhoto, frame: { y: '100px' }, opts: { duration: 120, easing: 'ease-in' } }, { e: back, frame: { y: 0 }, opts: { duration: 400, easing: outEase } }, { e: backImages, frame: { y: 0, opacity: 1 }, opts: { duration: 400, stagger: 30, easing: outEase } }, { e: backClose, frame: { y: 0, opacity: 1, rotate: '180deg' }, opts: { duration: 400, easing: outEase } }, { e: backClose, frame: { rotate: 0 }, opts: { duration: 1000, easing: 'ease-in-out' } }
];
// close 'back'
var seq_backClose = [ { e: backClose, frame: { y: '-30px', opacity: 0 }, opts: { duration: 120, easing: inEase } }, { e: back, frame: { y: '100%' }, opts: { duration: 250, easing: inEase } }, { e: backImages, frame: { y: '60px', opacity: 0 }, opts: { duration: 0 } }, // reset { e: popPhoto, frame: { y: 0 }, opts: { duration: 400, easing: outEase } },
];
// lastAll
// ! err -- need to know when an entire sequence is done, slighly awful
var lastAll = [ { e: playAll, frame: { y: 0 }, opts: { duration: 1, complete: function(){ finishPlayAll(); } }}
]; // needed to know when done
// no delays in-between, so add delay-frame
var _dFrame = [ { e: playAll, frame: { y: 0 }, opts: { duration: 300 }}
];
// combine them all, err: concat() fail so this ugly stuff instead:
var seq_playAll = [ { e: frontElems, frame: { y: '100px', opacity: 0 }, opts: { duration: 200, easing: inEase, stagger: 60 } }, { e: card, frame: { y: '100px', opacity: 0 }, opts: { duration: 500, easing: inEase } }, _dFrame[0], { e: card, frame: { y: 0, opacity: 1 }, opts: { duration: 500, easing: outEase } }, { e: frontElems, frame: { y: 0, opacity: 1 }, opts: { duration: 300, easing: outEase, stagger: 60 } }, _dFrame[0], { e: popPhoto, frame: { scale: 0.9 }, opts: { duration: 60, easing: 'ease-in-out' } }, { e: popPhoto, frame: { scale: 1 }, opts: { duration: 60, easing: 'ease-in-out' } }, { e: popPhoto, frame: { y: '100px' }, opts: { duration: 120, easing: 'ease-in' } }, { e: back, frame: { y: 0 }, opts: { duration: 400, easing: outEase } }, { e: backImages, frame: { y: 0, opacity: 1 }, opts: { duration: 400, stagger: 30, easing: outEase } }, { e: backClose, frame: { y: 0, opacity: 1, rotate: '180deg' }, opts: { duration: 400, easing: outEase } }, { e: backClose, frame: { rotate: 0 }, opts: { duration: 1000, easing: 'ease-in-out' } }, _dFrame[0], { e: backClose, frame: { y: '-30px', opacity: 0 }, opts: { duration: 120, easing: inEase } }, { e: back, frame: { y: '100%' }, opts: { duration: 250, easing: inEase } }, { e: backImages, frame: { y: '60px', opacity: 0 }, opts: { duration: 0 } }, // reset { e: popPhoto, frame: { y: 0 }, opts: { duration: 400, easing: outEase } }, lastAll[0]
];
/*----------------------------------------------------- ACTIONS
-----------------------------------------------------*/
// make sure all images has loaded
$(window).on('load', function(){ setTimeout(function(){ // force wait loader.removeClass('load'); // remove loader _s(seq_intro); // intro sequence }, 1000);
});
popPhoto.on('click', function(){ _s(seq_backOpen);
})
back.on('click', '.close', function(){ _s(seq_backClose);
})
// playAll clicks
playAll.on('click', function(){ var t = $(this); if(!t.hasClass('playing')){ t.addClass('playing'); t.text('Playing'); _s(seq_playAll); }
})
function finishPlayAll(){ playAll.text('Awesome!').addClass('awesome'); setTimeout(function(){ playAll.text('Play all'); playAll[0].className = 'btn'; }, 1000);
}
| Developer | Tommie Hansen |
| Username | tommiehansen |
| Uploaded | August 22, 2022 |
| Rating | 3 |
| Size | 14,721 Kb |
| Views | 42,504 |
Do you need developer help for Cash.animate, card animation?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Tommie Hansen (tommiehansen) Script Codes
| Name | Size |
| Button pusher | 2,220 Kb |
| Velocity.js reverse sequence | 3,988 Kb |
| Stagger animation helper | 7,989 Kb |
| Tmp 5 | 7,376 Kb |
| Velocity.js custom transitions | 3,804 Kb |
| Velocity.js scroll stuff | 6,254 Kb |
| Velocity.js custom stagger | 4,805 Kb |
| Cash animate, card sequencing | 13,340 Kb |
| Velocity.js cards layout | 5,151 Kb |
| A Pen by Tommie Hansen | 3,321 Kb |
Create amazing captions with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Marching Squares Visualized | Sakri | 7,074 Kb |
| Page Transitions in Backbone | Mikefowler | 3,691 Kb |
| Swiftype Lower Third | Zumwalt | 4,796 Kb |
| Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
| Automatic scroll | Skeurentjes | 4,042 Kb |
| Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
| CardMove | Thompsonemerson | 3,699 Kb |
| Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
| Css or Czz.. | Judag | 4,111 Kb |
| Zeichensatz | Moklick | 2,058 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!