Ajouter une animation aux pages Web à l'aide de Velocity.js
Dans le monde du développement Web d’aujourd’hui, l’animation est devenue une partie intégrante des interfaces des sites Web. Ils contribuent à améliorer l'expérience utilisateur d'un site Web et, dans cet article, nous apprendrons comment ajouter de belles animations aux pages Web à l'aide de Velocity.js.
VelocityJS est un moteur d'animation JavaScript qui nous fournit des animations très rapides pouvant être utilisées dans les pages Web. Il est devenu l’un des principaux moteurs d’animation et plusieurs raisons expliquent son succès. J'ai mentionné certaines des raisons les plus importantes qui en font un très bon choix lorsque vous décidez de choisir un moteur d'animation pour vos pages Web.
Fonctionnalités importantes de Velocity.js
Vous trouverez ci-dessous quelques-unes des fonctionnalités importantes de Velocity.js -
Meilleures performances - En termes de vitesse, il est aussi rapide que CSS et offre de meilleures performances par rapport à son principal concurrent, jQuery, notamment sur les appareils mobiles. Dans le passé, certaines personnes ont également évoqué le fait que l'animation principale de jQuery devrait être remplacée par VelocityJS. En outre, un autre point en sa faveur est que les animations CSS ne sont tout simplement pas suffisamment prises en charge par les navigateurs, alors que les animations VelocityJS étaient fiables dès IE8.
RunSequence - Considérez runSequence comme quelque chose qui vous permet d'effectuer un tas d'animations de manière continue, cela produira de meilleurs résultats et constitue une approche plus efficace. Il s'agit d'une approche élégante par rapport au chaînage de plusieurs fonctions d'animation que l'on trouve habituellement dans les animations jQuery.
Courbe d'apprentissage - La courbe d'apprentissage de Velocity.JS n'est pas très raide car les personnes qui connaissent jQuery peuvent facilement commencer à l'utiliser car il fournit une syntaxe similaire.
Maintenant que nous comprenons les concepts de base de Velocity.JS, essayons de créer un certain nombre d'animations différentes pour comprendre le fonctionnement des animations Velocity.JS.
Ajouter une animation à l'aide de Velocity.js
La première chose dont nous avons besoin est de créer un simple projet HTML-JS, où le code de Velocity.JS sera écrit principalement dans des fichiers JavaScript, et le fichier HTML servira de point de départ pour l'importation des dépendances Velocity.JS.
Créez des fichiers nommés index.html et script.js dans votre éditeur de code ou IDE préféré. Considérez la commande ci-dessous, qui vous aidera à créer des fichiers index.html et script.js.
touch index.html touch script.js
REMARQUE - Si touch ne fonctionne pas, vous pouvez utiliser la commande vi.
index.html
Après avoir créé ces deux fichiers, l'étape suivante consiste à mettre le code suivant dans votre fichier index.html.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity - Examples</title>
</head>
<body>
<p id="sample-p">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
<button id="a-button">
Click me!
</button>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
<script>
$('#a-button').click(function() {
var $element = $("#sample-p");
$element.velocity({ width: "50px", left: "500px" });
});
</script>
</body>
</html>
Dans le code ci-dessus, vous devez faire attention à quelques points. Le premier est que vous devez vous assurer que vous pouvez importer le fichier Velocity.JS dans le code. Nous faisons cela à l'intérieur de la balise
dans le code ci-dessus.Considérez l'extrait de code ci-dessous.
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
Ces deux lignes nous permettent d'importer jQuery et Velocity.JS dans le code, bien que nous n'ayons besoin que de Velocity.JS, vous pouvez appeler import l'un ou les deux. Comme il était intéressant de comparer Velocity et jQuery, je les ai importés tous les deux.
Nous allons maintenant sélectionner un élément de la balise
et l'utiliser pour créer des animations. Considérez l'extrait de code présenté ci-dessous.<p id="sample-p"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p> <button id="a-button"> Click me! </button>
Dans l'extrait de code ci-dessus, nous pouvons voir qu'il existe deux balises
différentes, et dans chaque balise, nous avons unscript.js
Maintenant, nous écrivons le code dans script.js. La première chose que nous ferons est d'utiliser un simple objet Velocity, dans lequel nous attribuerons une largeur et une hauteur spécifiées à la balise
à l'aide de Velocity.js.
Considérez le code script.js présenté ci-dessous.
let $element = $("#sample-p");
$element.velocity({ width: "50px", left: "500px" });
Dans le code ci-dessus, nous précisons que nous voulons que l'élément $, qui est simplement une balise
pointant vers le code HTML, ait la largeur et la hauteur spécifiées.
Lorsque vous exécutez le code HTML, vous devriez voir que le contenu de la balise
a la largeur et la hauteur spécifiées.
Dans l'exemple ci-dessus, nous nous sommes assurés que la largeur du contenu de la balise
passe à 500 px, mais supposons qu'après un certain délai, nous voulons nous assurer que la largeur de la balise
ou de notre élément $ passe à 200 px. Nous pouvons réaliser la même chose à l’aide du code ci-dessous.
let $element = $("#sample-p");
$element.velocity({ width: "200px" }, { duration: 500, delay: 1000 });
Maintenant, si nous exécutons le fichier HTML, après un délai d'une seconde, la largeur de $element passera à 200px.
Ajoutez plusieurs animations sur un seul élément à l'aide de Velocity.js
Jusqu'à présent, dans ces deux exemples, nous avons appris à exécuter des animations simples à l'aide de Velocity.JS. Concentrons-nous maintenant sur la partie où nous souhaitons exécuter plusieurs animations sur un seul élément.
Si nous voulons exécuter plusieurs animations, nous pouvons les exécuter une par une, ou les enchaîner, ce qui leur permettra de s'exécuter dans l'ordre dans lequel nous définissons le lien. Considérez le code script.js présenté ci-dessous.
let $element = $("#sample-p");
// chaining
$element
// makes the $element of height of 300px over 1000ms
.velocity({ height: 400 }, { duration: 1000 })
/* makes the $element to animate to the left position of
200px over 600ms after the width is finished animating */
.velocity({ top: 200 }, { duration: 600 })
// fading the element after it's done moving
.velocity({ opacity: 0 }, { duration: 200 });
在上面的代码中，我们有不同的动画，它们相互链接，这是您在探索更多 Velocity.JS 示例时会发现的更常见的模式之一。
使用 Velocity.js 添加不透明度
现在，我们来讨论一下 Velocity.JS 中的一个常用选项，即 opacity。在下一个示例中，我们将探讨如何在具有不同选项的元素上使用不透明度。
第一个简单的场景是引入带有慢速选项的不透明动画。考虑下面所示的 script.js 代码。
let $element = $("#sample-p");
$element.velocity({ opacity: 0 }, { duration: "slow" });
在上面的代码中，我们确保元素的不透明度达到 0，并且持续时间很慢。
在下一个示例中，我们甚至可以决定希望元素具有 0 不透明度的确切时间延迟。考虑下面所示的 script.js 代码。
let $element = $("#sample-p");
$element.velocity({ opacity: 0 }, { duration: 5000 });
在上面的代码中，我们确保元素的不透明度为 0，持续时间为 5000 毫秒。
一旦特定的动画完成，我们还可以记录 div 的元素和附加属性。考虑下面所示的 script.js 代码。
let $element = $("#sample-p");
// opacity
$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
complete: function(elements) { console.log(elements); }
});
在上面的代码中，我们正在打印将打印附加属性的元素以及控制台中的所有元素。
使用 Velocity.js 的循环效果
现在让我们看看如何使用 Velocity.js 获得循环效果。通过循环，我想说的是如何在特定循环中执行特定动画，并且您将可以访问该循环的不同属性，例如要执行循环的次数、延迟时间等等。
让我们从一个非常基本的示例开始。考虑下面所示的 script.js 代码。
let $element = $("#sample-p");
// looping
$element.velocity({ height: "5em" }, { loop: 2 });
在上面的代码中，我们创建了一个动画，使“$element”项目的高度为 5em，并且它将循环运行两次。
现在假设我们想要运行一个类似的示例，但同时我们想要确保当我们循环返回时，我们也应该有一个延迟。考虑下面所示的 script.js 代码。
let $element = $("#sample-p");
// looping
$element.velocity(
{
height: "+=10em"
},
{
loop: 4,
/* Wait 300ms before alternating back. */
delay: 300
}
);
在上面的代码中，我们创建了一个动画，使“$element”项目的高度为 10em，并且从一个循环返回到另一个循环时它将循环运行四次，延迟 300 毫秒.
使用 Velocity.js 实现淡入淡出效果
现在让我们看看如何使用 Velocity.JS 获得淡入淡出效果。考虑下面所示的 script.js 代码。
let $element = $("#sample-p");
// fading
$element
.velocity("fadeIn", { duration: 1500 })
.velocity("fadeOut", { delay: 500, duration: 1500 });
在上面的代码中，我们使用了 Velocity.JS 中的 fadeIn 和 fadeOut 选项。
结论
在本教程中，我们通过多个示例演示了如何使用 Velocity.JS 在其中添加不同的动画。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
TypeScript pour les débutants, partie 2: Types de données de base
Mar 19, 2025 am 09:10 AM
Une fois que vous avez maîtrisé le didacticiel TypeScript de niveau d'entrée, vous devriez être en mesure d'écrire votre propre code dans un IDE qui prend en charge TypeScript et de le compiler en JavaScript. Ce tutoriel plongera dans divers types de données dans TypeScript. JavaScript a sept types de données: null, non défini, booléen, numéro, chaîne, symbole (introduit par ES6) et objet. TypeScript définit plus de types sur cette base, et ce tutoriel les couvrira tous en détail. Type de données nuls Comme javascript, null en typeScript
