Velocity.js reverse sequence

Developer
Tommie Hansen
Size
3,988 Kb
Views
34,408
  1. Velocity.js reverse sequence Previews
  2. Velocity.js reverse sequence HTML Codes
  3. Velocity.js reverse sequence CSS Codes
  4. Velocity.js reverse sequence JS Codes

How do I make an velocity.js reverse sequence?

Just a test that is very incomplete.. What is a velocity.js reverse sequence? How do you make a velocity.js reverse sequence? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.

Velocity.js reverse sequence Previews
IQ Test

Velocity.js reverse sequence - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Velocity.js reverse sequence</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>reverse sequence</i></h1>
<pre>beta / temp / test
<span>v0.01 &ndash; a horrible mess was created</span>
</pre>
<div id="btn"><i class="js" onclick="jsAnim();">Re-run</i> <i onclick="vReverse();">Reverse sequence</i></div>
<div id="boxes"> <div class="box anim"> <a href="https://www.flickr.com/photos/tommiehansen/" target= "_blank"><img class="full" height="150" src= "http://farm8.static.flickr.com/7328/9000198669_57003f7505_q.jpg" width="150"></a> <div class="boxRight"> <h3>Djurgårdsbron, tram and a pink sunset</h3><i>Photo <span>by</span> Tommie Hansen / flickr</i> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500 hundreds when some typesetters had a boring day.</p> </div> </div> <div class="box anim"> <a href="https://www.flickr.com/photos/tommiehansen/" target= "_blank"><img class="full" height="150" src= "http://farm6.static.flickr.com/5154/14557307715_66e79b3ea2_q.jpg" width="150"></a> <div class="boxRight"> <h3>Orange sunset in Mälarhöjden, Stockholm (Sweden)</h3><i>Photo <span>by</span> Tommie Hansen / flickr</i> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500 hundreds when some typesetters had a boring day.</p> </div> </div> <div class="box anim"> <a href="https://www.flickr.com/photos/tommiehansen/" target= "_blank"><img class="full" height="150" src= "http://farm4.static.flickr.com/3913/14553063972_0d5381346d_q.jpg" width="150"></a> <div class="boxRight"> <h3>Sunset and stream at Djurgården, east of Stockholm (Sweden)</h3><i>Photo <span>by</span> Tommie Hansen / flickr</i> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500 hundreds when some typesetters had a boring day.</p> </div> </div>
</div><!-- /#boxes --> <script src='http://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Velocity.js reverse sequence - Script Codes CSS Codes

/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* 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: "Open Sans", sans-serif; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
#btn { text-align: center; margin-top:-30px; }
#btn i { cursor:pointer; background: hotpink; color:#fff; padding:0 14px; margin:0 2px; line-height:250%; display:inline-block; transition:all .2s ease; }
#btn i:hover { background:#333; }
/* ----- end defaults ---- */
/* Main layout */
.box { opacity:0; } /* set start opacity */
#boxes { padding-bottom:1000px; }
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
/*#boxes, .box { transform: translate3d(0,0,0); }*/
/* 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; }
pre { display:block; margin-top:-25px; text-transform: uppercase; color:#888; font-size:11px; letter-spacing:.5px; }
pre i { cursor:help; display:inline-block; margin: 0 0 0 3px; }
pre i:hover { color:#222; }
pre span { color:#aaa; display:block; letter-spacing:0; }
/* Paddings / Margins */
h1 { padding: 20px 0; }
h2,h3 { margin: 0 0 12px; }
h3 { font-size: 16px; white-space: nowrap; width: auto; overflow: hidden; text-overflow:ellipsis; display:block;}
.box { margin: 0 0 30px; } /* inline-block adds +4px margin */
.box img.full { margin: -1px 20px 0 -1px; float:left; }
/* Boxes */
.box { height:150px; _opacity:0; display:block; text-align:left; border: 1px solid #ddd; border-bottom: 1px solid #ccc; background: #fff;
}
.boxRight { padding: 15px 40px 0 0;
}
.boxRight h3 { margin-bottom:0;}
.boxRight i { display:block; font-size:12px; color: #888; font-style:normal; margin: 0 0 10px 0;
}
.boxRight i span { font-family:georgia, serif; font-style: italic; font-size:11px; color:#aaa; }

Velocity.js reverse sequence - Script Codes JS Codes

/* + Velocity.js + Velocity.ui.js
*/
// Small helper function for querySelector
var z = function(e) { return document.querySelectorAll(e); }
var _z = function(e) { return document.querySelector(e); }
// Define base div/target
var box = z('.box');
// Animation defualts
var
aniDuration = 240, // if you go over 500 people will most likely kill you
aniEase = 'easeInOutSine';
var opt1 = { delay: 0, easing: aniEase, duration: aniDuration };
// Create array of frames
var frames = [];
frames[0] = { elements: box, properties: { translateY: 300, translateX: 50, opacity: 0 }, options: opt1 }
frames[1] = { elements: box, properties: { translateY: 200, translateX: 0, opacity: 1 }, options: opt1 }
frames[2] = { elements: box, properties: { translateY: 100, translateX: 50, opacity: 1 }, options: opt1 }
frames[3] = { elements: box, properties: { translateY: 0, translateX: 0, opacity: 1 }, options: opt1 }
// { elements: $element1, properties: { translateX: 100 }, options: { duration: 1000 } },
Velocity.hook(box, "opacity", "0"); // set start opacity css value
function createSeq(frameSequence){ var i, l = frameSequence.length; var curSeq = []; for(i=0;i<l;i++){ curSeq.push(frames[i]); // push each frame to array //console.log(frames[i].translateY); } return curSeq;
}
function jsAnim(){ var seq = createSeq(frames); Velocity.RunSequence(seq);
} //end jsAnim()
jsAnim(); // initial run
function vReverse(){ var seq = createSeq(frames); seq = seq.reverse(); //reverse the array seq.shift; // remove first item from array since the animation is alrady on that value Velocity.RunSequence(seq);
}
Velocity.js reverse sequence - Script Codes
Velocity.js reverse sequence - Script Codes
Home Page Home
Developer Tommie Hansen
Username tommiehansen
Uploaded August 22, 2022
Rating 3.5
Size 3,988 Kb
Views 34,408
Do you need developer help for Velocity.js reverse sequence?

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
Optimized SVG URI replacer tool
Velocity.js cards layout
Button pusher
Stagger animation helper
Velocity.js custom transitions
Cash.animate, card animation
Tmp 5
RangeCalendar
Velocity.js custom stagger
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!