Velocity.js reverse sequence
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 - 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 – 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);
}
Developer | Tommie Hansen |
Username | tommiehansen |
Uploaded | August 22, 2022 |
Rating | 3.5 |
Size | 3,988 Kb |
Views | 34,408 |
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!
Name | Size |
Cash.animate, card animation | 14,721 Kb |
Velocity.js custom transitions | 3,804 Kb |
RangeCalendar | 7,213 Kb |
Velocity.js vs CSS3 animation performance | 5,745 Kb |
Velocity.js scroll stuff | 6,254 Kb |
Cash animate, card sequencing | 13,340 Kb |
Velocity.js sequence | 6,096 Kb |
Stagger animation helper | 7,989 Kb |
Button pusher | 2,220 Kb |
Table paginator | 4,770 Kb |
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!
Name | Username | Size |
Map Controls | Iliadraznin | 3,721 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Tab panels | Accessibility | 0 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Super Discount | Orrinward | 3,225 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
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!