Cash animate, card sequencing

Developer
Tommie Hansen
Size
13,340 Kb
Views
32,384
  1. Cash animate, card sequencing Previews
  2. Cash animate, card sequencing HTML Codes
  3. Cash animate, card sequencing CSS Codes
  4. Cash animate, card sequencing JS Codes

How do I make an cash animate, card sequencing?

What is a cash animate, card sequencing? How do you make a cash animate, card sequencing? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.

Cash animate, card sequencing Previews
IQ Test

Cash animate, card sequencing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cash animate, card sequencing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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! */ // VARS
@padding-base: 20px;
@padding-double: @padding-base*2;
@padding-half: @padding-base/2;
* { box-sizing: border-box; }
body { max-width: 400px; line-height: 1.5; }
.box, .buddy { opacity: 0; transform: translateY(200px); }
.box {	background: #fff;	border-radius: 3px;	overflow: hidden;	width: 320px;	height: auto;	position:relative;	z-index: 1;	.inner { padding: @padding-half; position: relative; padding-top: @padding-base*3.5; }	img { display: block; }	img.top { max-width: 100%; height: auto; }	img.buddy {	position:absolute; left: 50%;	@width: 96px;	width: @width; height: @width;	top: -@width/2;	margin-left: -@width/2;	border-radius: 50%;	}	button {	background: @indigo-400;	color: rgba(255,255,255,0.9);	border:0; border-bottom: 1px solid @indigo-500;	font-weight: @font-normal;	border-radius: 5px;	width:100%;	padding: 15px 0;	margin-top: @padding-base*2;	z-index:0;	}	i {	display: block;	font-style: normal;	font-weight: 300;	color: @black-60;	}	i.title { font-weight: 400; font-size: 1.2rem; }	i.city { font-size: 0.8rem; text-transform: uppercase; }	i.subs { margin-top: @padding-half; font-size: 0.9rem; text-transform: uppercase; }
}
.back {	height:100%;	width:100%;	background: #fff;	color: @black-50;	padding: @padding-base*1.5;	z-index: 2;	position:absolute; top:0; left:0;	transform: translateY(100%);	opacity: 1;	backface-visibility: hidden;	.cross {	position:absolute; top:0; right:0;	padding: @padding-half @padding-base @padding-base;	font-size:1.8rem;	cursor:pointer;	}	.city { position:relative; margin-bottom: @padding-base; }	.flickr { display: block; clear: both; padding-top: 20px; }	a { color: #666; text-decoration: none; }	a:hover { color:#333; }
}
.box .back img {	opacity: 0;	transform: scale(0.3);	margin: 5px;	width: 120px;	height: auto;	backface-visibility: hidden;	border-radius: 3px;	display: block;	float: left;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1><i>&mdash; beta &mdash;</i>cash animate</h1>
<div class="box animIn">	<div class="front">	<img class="top" src="https://farm8.staticflickr.com/7328/9000198669_57003f7505_n.jpg">	<div class="inner">	<img class="buddy animIn" src="https://farm4.staticflickr.com/3932/buddyicons/43830692@N04_r.jpg?1413100041#43830692@N04">	<i class="title">Tommie Hansen</i>	<i class="city">ROGUE DESIGNER</i>	<i class="subs">412,432 submits</i>	<button>PUSH ME</button>	</div>	</div>	<div class="back">	<i class="city">PHOTOS</i>	<i class="cross">&times;</i>	<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">	<i class="city flickr"><a href="https://www.flickr.com/photos/tommiehansen/" target="_blank">Visit Flickr photostream</a></i>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/cash/1.3.0/cash.min.js'></script>
<script src='js/ezwpwa.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cash animate, card sequencing - Script Codes CSS Codes

// VARS
@padding-base: 20px;
@padding-double: @padding-base*2;
@padding-half: @padding-base/2;
* { box-sizing: border-box; }
body { max-width: 400px; line-height: 1.5; }
.box, .buddy { opacity: 0; transform: translateY(200px); }
.box {	background: #fff;	border-radius: 3px;	overflow: hidden;	width: 320px;	height: auto;	position:relative;	z-index: 1;	.inner { padding: @padding-half; position: relative; padding-top: @padding-base*3.5; }	img { display: block; }	img.top { max-width: 100%; height: auto; }	img.buddy {	position:absolute; left: 50%;	@width: 96px;	width: @width; height: @width;	top: -@width/2;	margin-left: -@width/2;	border-radius: 50%;	}	button {	background: @indigo-400;	color: rgba(255,255,255,0.9);	border:0; border-bottom: 1px solid @indigo-500;	font-weight: @font-normal;	border-radius: 5px;	width:100%;	padding: 15px 0;	margin-top: @padding-base*2;	z-index:0;	}	i {	display: block;	font-style: normal;	font-weight: 300;	color: @black-60;	}	i.title { font-weight: 400; font-size: 1.2rem; }	i.city { font-size: 0.8rem; text-transform: uppercase; }	i.subs { margin-top: @padding-half; font-size: 0.9rem; text-transform: uppercase; }
}
.back {	height:100%;	width:100%;	background: #fff;	color: @black-50;	padding: @padding-base*1.5;	z-index: 2;	position:absolute; top:0; left:0;	transform: translateY(100%);	opacity: 1;	backface-visibility: hidden;	.cross {	position:absolute; top:0; right:0;	padding: @padding-half @padding-base @padding-base;	font-size:1.8rem;	cursor:pointer;	}	.city { position:relative; margin-bottom: @padding-base; }	.flickr { display: block; clear: both; padding-top: 20px; }	a { color: #666; text-decoration: none; }	a:hover { color:#333; }
}
.box .back img {	opacity: 0;	transform: scale(0.3);	margin: 5px;	width: 120px;	height: auto;	backface-visibility: hidden;	border-radius: 3px;	display: block;	float: left;
}

Cash animate, card sequencing - Script Codes JS Codes

// + cash anim @ http://codepen.io/shshaw/pen/eZwPWa
console.clear();
// defaults etc -----------------------------------------------------
var duration = 400,	half = duration/2,	animIn = $('.animIn');
var outQuint = '0.230, 1.000, 0.320, 1.000',	inQuint = '0.755, 0.050, 0.855, 0.060',	outBack = '0.175, 0.885, 0.320, 1.275';
// intro-anim -----------------------------------------------------
var frameIntro = { y: 0, opacity: 1 }; // !! err: opacity is no go for img.buddy
var optsIntro = { duration: 700, stagger: 60, easing: 'cubic-bezier('+outQuint+')' };
$(window).on('load', function(){	animIn.animate(frameIntro, optsIntro);
})
// register frames -----------------------------------------------------
var buttonFrames = [	[{ scale: 0.9 }, { duration: 60, easing: 'ease-in' }],	[{ scale: 1 }, { duration: 60, easing: 'ease-out' }],	[{ y: '60px' }, { duration: 120, easing: 'ease-in' }],
];
var backFrames = [	[{ y: '0px' }, { duration: 300, easing: 'cubic-bezier('+outQuint+')' }]
];
var imgFrames = [	[{ opacity: 1, scale: 1 }, { duration: 200, stagger: 30, easing: 'cubic-bezier('+outQuint+')' }]
];
/* BINDS ---- */
$('button').on('click', function(){	var $t = $(this);	$.animate($t, buttonFrames, {	complete: function(){	$.animate($('.back'), backFrames, {	complete: function(){	$.animate($('.backImg'), imgFrames);	}	});	}	});	});
$('.back').on('click', '.cross', function(){	$('.back').animate({ y: '100%' }, {	duration: 200,	easing: 'cubic-bezier('+inQuint+')',	complete: function(){	$('.backImg').animate({ opacity:0, scale: 0.3 }, { duration: 0 })	$('button').animate({ y: 0 }, { duration: 200, easing: 'cubic-bezier('+outQuint+')' })	}	})
})
Cash animate, card sequencing - Script Codes
Cash animate, card sequencing - Script Codes
Home Page Home
Developer Tommie Hansen
Username tommiehansen
Uploaded August 22, 2022
Rating 3
Size 13,340 Kb
Views 32,384
Do you need developer help for Cash animate, card sequencing?

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
Velocity.js scroll stuff
Stagger animation with LESS CSS
Cash.animate, card animation
Velocity.js custom transitions
Table paginator
Velocity.js custom stagger
A Pen by Tommie Hansen
Stagger animation helper
Optimized SVG URI replacer tool
Velocity.js sequence
Create amazing web content 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!