Velocity.js custom transitions
How do I make an velocity.js custom transitions?
Demo of misc transitions for Velocity, fork and play around.. What is a velocity.js custom transitions? How do you make a velocity.js custom transitions? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.
Velocity.js custom transitions - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Velocity.js custom transitions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<h3>Velocity.js simple custom transition functions</h3>
<p id="p">Transition out/in with<br> <i class="active">slideIn</i> <i>slideUp</i> <i>zoomIn</i> <i>zoomFlick</i> <i>flickIn</i> <span>combos</span> <i>slideOut + flickIn</i> <i>fadeOut + slideIn</i> <span>× </span> <i id="s">stag current</i>
</p>
<div id="box"> <div class="box">Click me = transition me out/in</div> <div class="box">Click me = transition me out/in</div> <div class="box">Click me = transition me out/in</div>
</div>
<div id="loop"><i id="btnLoop">Loop through all transitions</i> <i id="btnLoop3">Loop through first 3 transitions</i></div>
<div id="d"> <p>Copy/paste function from source, use like<br> <code>slideIn(element,'in', delay)</code></p> <p>And customize the functions as you see fit.<br> Do note vars <b>aniDuration</b> and <b>aniEase</b>, set your own.</p><p>Also note that elements transitioning from opacity 0 to 1 should be set to opacity 0 before you transition them, else it will flicker.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://julian.com/research/velocity/build/jquery.velocity.min.js'></script>
<script src='http://julian.com/research/velocity/build/velocity.ui.js'></script> <script src="js/index.js"></script>
</body>
</html>
Velocity.js custom transitions - Script Codes CSS Codes
/* UNRELATED CSS */
body { margin:0 auto; font-family:"helvetica neue", helvetica, arial, sans-serif; font-size: 14px; line-height:150%; color:#888; }
p,h3 { text-align:center; }
h3 { margin: 30px 0 0 0; border-bottom:1px solid #ddd; padding-bottom:15px; width:40%; margin:30px auto; font-size:21px; font-weight:normal; color: #666; }
*,*:before,*:after { box-sizing:border-box; }
#r { color: #555; display:inline-block; margin-top: 20px; padding:4px 8px; background:#aaa; border-radius:3px; text-decoration:none; margin-right:5px; }
i,a { font-style:normal; color:#aaa; cursor:pointer; display:inline-block; padding:2px 10px; background:#eee; border-radius:2px; margin: 5px 0 0; box-shadow: 1px 1px 0 rgba(0,0,0,.2); text-decoration:none; }
#s:hover { background:#4cf; }
i.active, i:hover, a:hover { color: #fff; background:hotpink; }
i.active { background:hotpink !important; }
#d { position:absolute; right:40px; top:40px; border:1px dashed #ddd; padding: 15px; line-height:150%; width: 350px; }
#d p { text-align:left; }
#d em { font-size: .9em; color: #aaa; }
#p span { display:inline-block; margin-left:8px; font-size:12px; }
code { color: #4cf; }
#loop { clear:both; text-align:center; padding-top:40px; }
.box { width: 250px; height: 200px; overflow:hidden; z-index:2; line-height:200px; background:#4cf; color:#fff; text-align: center; display:inline-block; margin:0 5px; cursor:pointer;
}
.box:hover { background:hotpink; }
#box { opacity:0; width: 800px; margin: 40px auto 0; cursor:default; text-align:center;
}
@media(max-width:1024px){ #d { display:none; } h3 { display:none; }
}
Velocity.js custom transitions - Script Codes JS Codes
/* jquery.js */
/* jquery.velocity.js */
/* unrelated */
$('#r').click(function(){ window.location.href = window.location.href; })
/* ----- */
// selTrans for demo purposes
function selTrans(trans,e,inOut,wait){ if(trans == 'slideIn') { slideIn(e,inOut,wait); } if(trans == 'slideUp') { slideUp(e,inOut,wait); } if(trans == 'zoomIn') { zoomIn(e,inOut,wait); } if(trans == 'zoomFlick') { zoomFlick(e,inOut,wait); } if(trans == 'flickIn') { flickIn(e,inOut,wait); } if(trans == 'slideOut + flickIn') { slideFlick(e,inOut,wait); } if(trans == 'fadeOut + slideIn') { fadeSlide(e,inOut,wait); }
}
/* ----------------------------------------------------- */
/* Set re-usable stuff */
var aniDuration = 300;
var aniEase = 'quadOut';
// slideIn (default)
function slideIn(e,inOut,wait){ var aniIN = { opacity: [1,0], translateX: [0, -100] }; //note: higher values = larger repaint area = worse perf var aniOUT = { opacity: 0, translateX: 100 }; var opt1 = { duration: aniDuration, easing: aniEase }; if(inOut=='in'){ e.css('opacity','0').delay(wait).velocity(aniIN, opt1); } else { e.delay(wait).velocity(aniOUT, opt1); }
}
function slideUp(e,inOut,wait){ var aniIN = { opacity: [1,0], translateY: [0, 100] }; var aniOUT = { opacity: 0, translateY: -100 }; var opt1 = { duration: aniDuration, easing: aniEase }; if(inOut=='in'){ e.css('opacity','0').delay(wait).velocity(aniIN, opt1); } else { e.delay(wait).velocity(aniOUT, opt1); }
}
function zoomIn(e,inOut,wait){ var aniIN = { opacity: [1,0], scale: [1,1.2] }; var aniOUT = { opacity: 0, scale: 1.2 }; var opt1 = { duration: aniDuration, easing: aniEase }; if(inOut=='in'){ e.css('opacity','0').delay(wait).velocity(aniIN, opt1); } else { e.delay(wait).velocity(aniOUT, opt1); }
}
// zoomFlick
function zoomFlick(e,inOut,wait){ var aniIN = { opacity: [1,0], scale: [1,1.5], rotateZ: ['0deg','-10deg'], translateY: [0,100] }; var aniOUT = { opacity: 0, scale: 1.5, rotateZ: '-10deg', translateY: 100 }; var opt1 = { duration: aniDuration, easing: aniEase }; if(inOut=='in'){ e.css('opacity','0').delay(wait).velocity(aniIN, opt1); } else { e.delay(wait).velocity(aniOUT, opt1); }
}
// flickIn
function flickIn(e,inOut,wait){ var aniIN = { opacity: [1,0], translateY: [0, 200], rotateZ: ['0','15deg'] }; var aniOUT = { opacity: 0, translateY: 200, rotateZ: '15deg' }; var opt1 = { duration: aniDuration, easing: aniEase }; if(inOut=='in'){ e.css('opacity','0').delay(wait).velocity(aniIN, opt1); } else { e.delay(wait).velocity(aniOUT, opt1); }
}
// slideFlick (flickIn + slideOut)
function slideFlick(e,inOut,wait){ var aniIN = { opacity: [1,0], translateY: [0, 200], rotateZ: ['0deg','15deg'], translateX: [0, 0] }; var aniOUT = { opacity: 0, translateX: 200 }; var opt1 = { duration: aniDuration, easing: aniEase }; if(inOut=='in'){ e.css('opacity','0').delay(wait).velocity(aniIN, opt1); } else { e.delay(wait).velocity(aniOUT, opt1); }
}
// fadeSlide (fadeOut + slideIn)
function fadeSlide(e,inOut,wait){ var aniIN = { opacity: [1,0], translateX: [0, -100] }; var aniOUT = { opacity: 0 }; var opt1 = { duration: aniDuration, easing: aniEase }; if(inOut=='in'){ e.css('opacity','0').delay(wait).velocity(aniIN, opt1); } else { e.delay(wait).velocity(aniOUT, opt1); }
}
// Run function
var box = $('#box');
slideIn(box, 'in', 200);
// click
var p = $('#p');
var choose = p.find('i:not(#s)')
trans = $('.active').text();
choose.click(function(){ p.find('i').removeClass('active'); $(this).addClass('active'); trans = $(this).text(); selTrans(trans,box, '', 0); setTimeout(function(){ selTrans(trans,box, 'in', aniDuration); }, aniDuration)
})
box.on('click','.box', function(){ var t = $(this); selTrans(trans,t, '', 0); // transition OUT setTimeout(function(){ selTrans(trans,t, 'in', aniDuration); // transition IN }, aniDuration)
})
$('#s').click(function(){ var time = 0; p.find('i').removeClass('active'); $(this).addClass('active'); box.find('.box').each(function(){ var t = $(this); selTrans(trans, t, '', time); time += aniDuration; setTimeout(function(){ selTrans(trans, t, 'in', time); }, time) })
})
function loopAll(q){ var pi; if(q == 'q'){ pi = $('#p').find('i:Lt(3)'); } else { pi = $('#p').find('i'); } pi.removeClass('active'); var time = 500; pi.each(function(){ var t = $(this); setTimeout(function(){ t.trigger('click'); }, time); time += aniDuration*3.5; }) //each
}
$('#btnLoop').click(function(){ loopAll(); });
$('#btnLoop3').click(function(){ loopAll('q'); });
Developer | Tommie Hansen |
Username | tommiehansen |
Uploaded | August 22, 2022 |
Rating | 3 |
Size | 3,804 Kb |
Views | 36,432 |
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 |
Optimized SVG URI replacer tool | 9,911 Kb |
Button pusher | 2,220 Kb |
Velocity.js vs CSS3 animation performance | 5,745 Kb |
RangeCalendar | 7,213 Kb |
Velocity.js cards layout | 5,151 Kb |
Velocity.js reverse sequence | 3,988 Kb |
Velocity.js custom stagger | 4,805 Kb |
Stagger animation with LESS CSS | 3,295 Kb |
A Pen by Tommie Hansen | 3,321 Kb |
Animated CSS loader | 5,053 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 |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Out of the blue | Giaco | 2,537 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Image Hover | Johnheiner | 3,409 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 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!