I have a question about using velocity.js for hovering on elements.
Currently I use CSS to zoom in/out and animate elements when users hover on them, and I use velocity.js to animate them initially on page load.
So my question is; how should I be using velocity.js to replace these CSS animations/should I at all? Currently I use velocity on page load as I'm sure that's what it was designed for, but was it also intended for use with things like hover?
With jQuery I'm guessing this is how a hover effect would be applied:
$("element").hover(function(){
//Do something
});
Is this how it's done with something like velocity too? You just add the velocity code in the jQuery hover function?
Thanks for any clarification; I thought this was an appropriate place to post this with a decent number of questions on it already existing.
You can use velocity for hover effects. Here is a codepen with 4 different effects on hover:
adds a boxshadow, shows a caption and animates the text and also scales the image hovered,all using velocity.js
You can see from the code that, for they example, I am using mouseenter and mouseleave, not hover.
Hope this helps!
Velocity.js Hover Codepen
html
<div class="all-captions-wrap">
<figure class="caption">
<img src="http://placehold.it/300x200" alt="">
<figcaption>
<div class="figcaption-wrap">
<h3>Velocity Hover</h3>
<p>Lorem ipsum dolar.</p>
</div>
</figcaption>
</figure>
<figure class="caption">
<img src="http://placehold.it/300x200" alt="">
<figcaption>
<div class="figcaption-wrap">
<h3>Velocity Hover</h3>
<p>Lorem ipsum dolar.</p>
</div>
</figcaption>
</figure>
<figure class="caption">
<img src="http://placehold.it/300x200" alt="">
<figcaption>
<div class="figcaption-wrap">
<h3>Velocity Hover</h3>
<p>Lorem ipsum dolar.</p>
</div>
</figcaption>
</figure>
</div>
CSS
.all-captions-wrap{margin: 0 auto;text-align:center;}
.caption {
float: left;
overflow: hidden;
width: 300px;
margin: 15px;
}
.caption img {
width: 100%;
display: block;
}
.caption figcaption {
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 1rem;
}
.caption figcaption h3 {
font-size: 1.2rem;
margin: 20px;
}
.caption figcaption p {
margin: 20px;
}
.caption {
position: relative;
}
.caption figcaption {
position: absolute;
width: 100%;
}
.caption figcaption {
bottom: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.figcaption-wrap {
margin-top:20%;
display: none;
}
Javascript
$(document).ready(function () {
$('.caption').mouseenter(function () {
$(this).addClass('hover');
$('.hover').velocity({boxShadowBlur:15},{
duration: 50
});
$('.hover img').velocity({scale:1.25},{
duration: 200
});
$('.hover figcaption').velocity('transition.perspectiveLeftIn', {delay:200});
$('.hover .figcaption-wrap').velocity('transition.perspectiveRightIn', {delay:300});
}).mouseleave(function () {
$('.hover,.hover figcaption,.hover .figcaption-wrap, .hover img').velocity("stop");
$('.hover,.hover figcaption,.hover .figcaption-wrap, .hover img').velocity('reverse');
$(this).removeClass('hover');
});
});
There are two solutions for this. The first is pretty straightforward, but it will produce unwanted effects if a user quickly enters and exits the element. Essentially, the animation will looping for far too long; however, it works just fine if the user is casually hovering over the element.
Here's a demo with that solution.
The other solution is more robust and accounts for unusually rapid 'hover toggling' from the user. If the user rapidly hovers in and out of the element, this solution just stops and reverses the animation. This is what I use on any hover states with velocity.
You can view that solution here.
Here's the javascript code using JQuery
...
var svg = $('.curtain');
var path = svg.find('path'); // define svg path
path.data({animating:false}); // add data for animation queue purposes
path.hover(function() { // mouse enter
/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/
if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});
} else { // begin default animation
$(this).velocity({fill: '#ffcc00'},{
duration:500,
begin: function(){
path.data({animating:true});
},
complete: function(){
path.data({animating:false});
}
});
} // end of conditional statement
}, function() { // mouse exit
/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/
if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});
} else { // begin default animation
$(this).velocity({fill: '#000'},{
duration:500,
begin: function(){
path.data({animating:true});
},
complete: function(){
path.data({animating:false});
}
});
} // end of conditional statement
}); // end of hover function
...
You can also create onhover to animate things and reverse on mouseout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<style type="text/css">
#mydiv {
opacity: 0.5;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:5em;">
<div class="row">
<div class="col-lg-12" id="mydiv" style="border:1px red dashed;">
<h1>Some Text</h1>
</div>
</div>
</div>
<script type="text/javascript">
$("#mydiv").hover(onOver,onOut);
function onOver(){
$("#mydiv")
.velocity( {scale: [1, 0.9]} );
}
function onOut(){
$("#mydiv")
.velocity("reverse");
}
</script>
</body>
</html>
This works for me for hover effects with Velocity
