Velocity.js custom stagger

Developer
Tommie Hansen
Size
4,805 Kb
Views
30,360
  1. Velocity.js custom stagger Previews
  2. Velocity.js custom stagger HTML Codes
  3. Velocity.js custom stagger CSS Codes
  4. Velocity.js custom stagger JS Codes

How do I make an velocity.js custom stagger?

Staggering without Velocity UI. What is a velocity.js custom stagger? How do you make a velocity.js custom stagger? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.

Velocity.js custom stagger Previews
IQ Test

Velocity.js custom stagger - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Velocity.js custom stagger</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Velocity.js <i>custom stagger</i></h1>
<pre>Custom staggering without Velocity UI using loop + Velocity delays <i class="fa fa-question-circle" title="4 first runs animation X, others run animation Y etc. Purely a test for demo purposes.&#10;Please note that CodePen has a negative impact on performance."></i></pre>
<div id="a"><i class="fa fa-refresh" onclick="loop();">&nbsp; Infinite loop</i><i onclick="window.location=window.location" class="fa">&nbsp; RELOAD PEN</i></div>
<div id="load"><img src="http://preloaders.net/preloaders/496/Flip%20Flop.gif"><br>2 second fake load</div>
<div id="boxes"> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1//1/"> <div class="boxInner"> <h2>Cats are animals</h2> <p class="intro">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 12</span> <span><i class="fa fa-thumbs-down" title=""></i> 3</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Humans are not cats</h2> <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 19</span> <span><i class="fa fa-thumbs-down"></i> 17</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Cats are not dogs</h2> <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 19</span> <span><i class="fa fa-thumbs-down"></i> 17</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Cats are animals</h2> <p class="intro">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 12</span> <span><i class="fa fa-thumbs-down"></i> 3</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Humans are not cats</h2> <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 19</span> <span><i class="fa fa-thumbs-down"></i> 17</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Cats are not dogs</h2> <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 19</span> <span><i class="fa fa-thumbs-down"></i> 17</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Cats are animals</h2> <p class="intro">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 12</span> <span><i class="fa fa-thumbs-down"></i> 3</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Humans are not cats</h2> <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 19</span> <span><i class="fa fa-thumbs-down"></i> 17</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>Cats are not dogs</h2> <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 19</span> <span><i class="fa fa-thumbs-down"></i> 17</span></div> </div> </div> <div class="box"> <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/"> <div class="boxInner"> <h2>The end of the world</h2> <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="boxFoot"> <!-- let's complexify things --> <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em></div> <div class="right"><span><i class="fa fa-heart"></i> 19</span> <span><i class="fa fa-thumbs-down"></i> 17</span></div> </div> </div>
</div><!-- /#boxes --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Velocity.js custom stagger - Script Codes CSS Codes

/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome */
/* --------------------------------------
NOTE: Only @ Chrome, others may fail
--------------------------------------*/
/* defaults */
html,body { min-height:100%; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; }
/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "FontAwesome", "Open Sans", sans-serif; } #a i:hover { color: #fff; background: hotpink; border:1px solid hotpink; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
pre i { cursor:help; display:inline-block; margin: 0 0 0 3px; }
pre i:hover { color:#222; }
/* ----- end defaults ---- */
/* START OPACITY */
.box, #load { opacity:0; }
#load { display:none; }
#boxes, .box, #load { transform: translateZ(0); } /* reomves larger paints */
/* Loader (fake) */
#load { text-align:center; z-index:10; background:#eee; position:absolute; top:50%; left:50%; height:60px; width:120px; overflow:hidden; margin-left:-60px; margin-top:-30px; font-size:11px; text-transform:uppercase; color:#aaa; }
#load img { display:inline-block; text-align:center; }
/* Main layout */
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
pre { display:block; margin-top:-25px; text-transform: uppercase; color:#aaa; font-size:11px; letter-spacing:.5px; }
/* #boxes, h1 { width: 1340px; } /* 4x width */
/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
h1 { font-size: 24px; font-weight: 700; border-bottom:1px solid #ccc; }
h1 i { font-weight: 300; }
/* Paddings / Margins */
h1 { padding: 20px 0; }
h2 { margin: 0 0 12px; }
.box { margin: 18px 14px; } /* inline-block adds +4px margin */
.boxInner { padding:20px; }
.boxFoot { padding: 10px 20px; }
.box img.full { margin:-1px; margin-bottom: 5px; } /* no faux image resize, tnx */
/* Boxes */
.box { width: 300px; height: 460px; display:inline-block; *display:inline; text-align:left; vertical-align:top; position:relative; border:1px solid #ddd; border-bottom-width:2px; background: #fff;
}
.boxInner { padding: 20px; }
.boxFoot { position:absolute; bottom:0; left:0; width:100%; background: #efc; color: #9b7; font-size:11px;
}
/* Box footer */
.boxFoot div { display:inline-block; *display: inline; }
.boxFoot em { font-family:georgia, serif; font-size:10px; }
.boxFoot .right { float:right; cursor: pointer; }
.right span { padding: 3px; transition: color .2s ease; }
.right span:last-child { margin-right:-3px; }
.right span:hover { color:#666; }

Velocity.js custom stagger - Script Codes JS Codes

/* + jquery.js */
/* + velocity.js */
/* ---------------
This demo is mostly about:
Using stagger without velocity.ui
---------------- */
// Selections
var boxes = $('#boxes');
var box = boxes.find('.box');
var loader = $('#load'); // needs to get truly hidden due to animated gif, else PERF-lag
// Set defaults
var aniDuration = 500; // animation duration
var aniStag = 60; // stag X ms
var loaderDelay = 2000; // fake loader duration
var aniEase = 'easeOutSine';
var firstNum = 4; // do specific animation with X first boxes (heavier / slower ones)
var boxFirsts = box.slice(0,firstNum); // set it
var boxLasts = box.slice(firstNum); // do less heavy animations on all above var firstNum
// Set animation + options here (easier to change later)
//var ani1 = { opacity: [1, 0], translateY: [0, 100], rotateZ: [0, 3], translateZ: 0 };
var ani1 = { opacity: [1, 0], translateY: [0, 120], translateZ: 0 };
var ani2 = { opacity: [1, 0], translateY: [0, -120], translateZ: 0 };
var ani3 = { opacity: [1, 0], translateY: [0, 120], scale: [1, 1.1], translateZ: 0 };
var ani4 = { opacity: 0, translateY: 120, translateZ: 0 };
var aniLight = { opacity: [1, 0], translateZ: 0 };
//box.css('opacity','0'); // 'hide' boxes, SET @ CSS
function init(wait,doLoop){ // Calculations var calcStag = 0; if(wait) { calcStag += wait; } var lastStag = calcStag + aniStag + aniDuration + (aniStag * firstNum) + 60; boxFirsts.each(function(index){ var t = $(this); // Calculate stagger calcStag += aniStag; // Run animation t.velocity(ani3, { duration: aniDuration, delay: calcStag, ease: aniEase }); }); // Perform simple animation on boxLasts if(doLoop != 'doLoop'){ boxLasts.velocity(aniLight, { duration: aniDuration, delay: lastStag }); } else { boxLasts.velocity(aniLight, { duration: aniDuration, delay: lastStag, complete: function(){ loop(); } }); }
}
init(1000); // wait X amount of ms...
// UNRELATED TO ANIMATION
function loop(){ box.velocity(ani4, { duration: 250, complete: function(){ init(aniDuration, 'doLoop'); } });
}
// Don't load same image for every image
var img = box.find('img');
//var uri = 'http://placeimg.com/300/200/nature/';
var uri = 'http://lorempixel.com/300/200/nature/'
var l = img.length;
var comb;
for(var i = 0; i < l; i++) {	var num = i+1;	// get 1-XX	img[i].src = uri+num;
}
Velocity.js custom stagger - Script Codes
Velocity.js custom stagger - Script Codes
Home Page Home
Developer Tommie Hansen
Username tommiehansen
Uploaded August 22, 2022
Rating 3
Size 4,805 Kb
Views 30,360
Do you need developer help for Velocity.js custom stagger?

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 reverse sequence
Optimized SVG URI replacer tool
Cash animate, card sequencing
Cash.animate, card animation
Animated CSS loader
Velocity.js scroll stuff
A Pen by Tommie Hansen
Velocity.js cards layout
Velocity.js vs CSS3 animation performance
Stagger animation with LESS CSS
Create amazing love letters 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!