Comment utiliser velocity.js dans hover?

Question

J'ai une question sur l'utilisation velocity.js pour planer sur les éléments.

Actuellement, j'utiliser CSS pour zoomer avant/arrière et animer des éléments lorsque les utilisateurs planent sur eux, et je l'utilise velocity.js pour les animer d'abord la charge de page.

Exemple: https://www.pandoragaming.net/

Alors ma question est; comment dois-je utiliser velocity.js pour remplacer ces animations CSS/dois-je du tout? Actuellement, j'utilise la vélocité sur le chargement de la page, car je suis sûr que c'est ce pour quoi il a été conçu, mais était-il également destiné à être utilisé avec des choses comme le vol stationnaire?

Avec jQuery Je devine que c'est ainsi un effet de vol stationnaire serait appliqué:

$("element").hover(function(){ 
    //Do something 
}); 

Est-ce la façon dont il est fait avec quelque chose comme la vitesse trop? Vous venez d'ajouter le code de vélocité dans la fonction hover de jQuery?

Merci pour toute précision; Je pensais que c'était un endroit approprié pour poster ceci avec un nombre décent de questions à ce sujet déjà existantes.

Answer 1

Vous pouvez utiliser la vélocité pour les effets de survol. Voici un codepen avec 4 effets différents sur vol stationnaire: ajoute une boxshadow, montre une légende et anime le texte et l'image des échelles aussi plané, tous à l'aide velocity.js Vous pouvez voir à partir du code, car ils par exemple, je suis utilisant mouseenter et mouseleave, pas planer. J'espère que cela aide!

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'); 
}); 
}); 

Answer 2

Il y a deux solutions pour cela. Le premier est assez simple, mais il produira des effets indésirables si un utilisateur entre et sort rapidement de l'élément. Essentiellement, l'animation bouclera trop longtemps; cependant, cela fonctionne très bien si l'utilisateur survole l'élément avec désinvolture.

Here's a demo with that solution.

L'autre solution est plus robuste et représente « vol stationnaire basculement » exceptionnellement rapide de l'utilisateur. Si l'utilisateur navigue rapidement dans et hors de l'élément, cette solution s'arrête et inverse l'animation. C'est ce que j'utilise sur tous les états hover avec la vitesse.

You can view that solution here.

Voici le code javascript en utilisant 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 

... 

Answer 3

Vous pouvez également créer onhover pour animer les choses et inverser le 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> 

Cela fonctionne pour moi pour les effets de vol stationnaire avec Velocity