interface Webjs tutorielUn guide d'introduction à la création d'animations CSS3 avec Move.js_JavaScriptUn guide d'introduction à la création d'animations CSS3 avec Move.js_JavaScript
Sur les sites Web, les transitions et animations CSS3 sont actuellement la méthode privilégiée pour créer des animations légères. Malheureusement, de nombreux développeurs trouvent leur propre syntaxe complexe et déroutante. Si cela vous ressemble, peut-être que Move.js est la solution parfaite pour vous. Move.js est une bibliothèque JavaScript simple permettant de créer des animations CSS3 à l'aide de fonctions simples. Ce didacticiel explorera les bases de Move.js et fournira une démo en ligne.
Connaissances de base
Move.js fournit l'API JavaScript la plus simple pour créer des animations CSS3. Supposons que nous ayons un div avec une boîte de classe et que nous souhaitions déplacer l'élément de 100 pixels vers la gauche lorsque la souris se déplace sur le div. Dans ce cas, notre code ressemblerait à ceci :
.box {
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
-o-transition: margin 1s;
transition: margin 1s;
}
.box:hover {
margin-left: 100px;
}
En utilisant Move.js, nous pouvons simplement appeler la méthode set() pour obtenir le même résultat, comme suit :
move('.box')
.set('margin-left', 100)
.end();
Démarrage
Tout d'abord, visitez la page Move.js GitHub et téléchargez le dernier package. Extrayez et copiez le fichier Move.js dans votre répertoire de travail. Ensuite, incluez ce fichier dans votre page HTML. La page complétée devrait ressembler à ceci :
<!DOCTYPE html> <html> <head> <title>Move.js Demo</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <a href="#" id="playButton">Play</a> <div class="box"></div> <script type="text/javascript" src="js/move.js"></script> </body> </html>
Nous avons défini un élément div avec une classe box et un lien avec l'ID playButton pour notre démo. Créons un fichier styles.css et ajoutons les styles suivants. Notez que les styles suivants ne sont pas requis pour Move.js :
.box {
margin: 10px;
width: 100px;
height: 100px;
background: #7C9DD4;
box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
display: block;
font-size: 20px;
margin: 20px 10px;
font-weight: bold;
color: #222;
text-decoration: none;
}
Notre page html devrait ressembler à ceci :
Maintenant, écrivons notre premier extrait Move.js. Nous devons attacher un gestionnaire d'événements onclick au playButton et le déplacer vers la droite lorsque vous cliquez dessus. Le code JavaScript du gestionnaire d'événements est le suivant. Ce code ajoute transform:translateX(300px) à l'élément box :
document.getElementById('playButton').onclick = function(e) {
move('.box')
.x(300)
.end();
};
Le code complet après ajout du code Move.js est le suivant :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Move.js Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<a href="#" id="playButton">Play</a>
<div class="box"></div>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
document.getElementById('playButton').onclick = function(e){
move('.box')
.x(300)
.end();
};
</script>
</body>
</html>
CSS
.box {
margin-left: 10px;
width: 100px;
height: 100px;
background: #7C9DD4;
box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
display: block;
font-size: 20px;
margin: 20px 10px;
font-weight: bold;
color: #222;
text-decoration: none;
}
Méthode Move.js
Dans la démo précédente, nous avons vu la méthode x(). Maintenant, comprenons les autres méthodes de Move.js.
set(prop, val)
set() est utilisée pour définir l'attribut CSS de l'élément. Elle prend deux paramètres : l'attribut CSS et la valeur de l'attribut. Exemple d'utilisation :
.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')
ajouter(prop, val)
La méthode add() est utilisée pour ajouter sa valeur d'attribut déjà définie. Cette méthode doit avoir une valeur numérique pour pouvoir être utilisée pour les incréments. Cette méthode doit avoir deux paramètres : la valeur de l'attribut et son incrément :
.add('margin-left', 200)
Après l'appel de l'extrait de code précédent, 200 px seront ajoutés à sa valeur.
sub(prop, val)
sub() est le processus inverse de add(). Il accepte les deux mêmes paramètres, mais sa valeur sera soustraite de la valeur de l'attribut.
.sub('margin-left', 200)
rotation(deg)
Comme son nom l'indique, cette méthode fait pivoter un élément en fournissant une valeur numérique comme paramètre. En attachant à la propriété transform de l'élément lorsque la méthode est appelée. Le code suivant fait pivoter l'élément de 90 degrés :
.rotate(90)
Ce code ajoutera le CSS suivant à l'élément :
transform:rotate(90deg)
durée(n)
Avec cette méthode, vous pouvez définir la durée de lecture de l'animation. Par exemple : Le code suivant déplace l'élément de 200px de gauche à droite en 2 secondes :
.set('margin-left', 200)
.duration('2s')
Autre exemple, le code ci-dessous. Move.js modifiera l'attribut margin de l'élément, définira la couleur d'arrière-plan et fera pivoter l'élément de 90 degrés en 2 secondes.
.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')
traduire(x[, y])
La méthodetranslate() est utilisée pour modifier la position par défaut de l'élément, en utilisant les coordonnées fournies comme paramètres. Si un seul paramètre est défini, il sera utilisé comme coordonnée x. Si un deuxième paramètre est fourni, il sera utilisé. sera utilisé comme coordonnée y :
.translate(200, 400)
x() et y()
La méthode x() est utilisée pour ajuster la coordonnée x de l'élément, et la méthode y() est utilisée pour ajuster la coordonnée y de l'élément. Les paramètres des deux méthodes peuvent être positifs ou négatifs, comme suit :
.x(300) .y(-20)
inclinaison (x, y)
skew() est utilisé pour ajuster un angle par rapport aux axes x et y. Cette méthode peut être divisée en deux méthodes : skewX(deg) et skewY(deg) :
.skew(30, 40)
échelle(x, y)
Cette méthode permet d'agrandir ou de compresser la taille de l'élément. Pour chaque valeur fournie, la méthode de transformation d'échelle sera appelée :
.scale(3, 3)
facilité(fn)
Si vous avez utilisé des transitions CSS3, vous savez que la fonction easy fonctionne sur l'attribut transition. Il précise l'acte de transition. Chaque fonction de facilité est entrée, sortie, entrée-sortie, snap, cube-bezeir, etc. Ces fonctions peuvent être appelées via la méthode easy() fournie par Move.js. Par exemple :
.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)
end()
该方法用于Move.js代码片段的结束，他标识动画的结束。技术上，该方法触发动画的播放。该方法接受一个可选的callback回掉函数。代码如下：
move('.box')
.set('background-color', 'red')
.duration(1000)
.end(function() {
alert("Animation Over!");
});
delay(n)
正如方法所暗示的，该方法提供一个时间的数值作为动画的延时。如下：
move('.box')
.set('background-color', 'red')
.delay(1000)
.end();
then()
该方法是Move.js中一个最重要的函数。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过then()方法实现分割：
move('.box')
.set('background-color', 'red')
.x(500)
.then()
.y(400)
.set('background-color', 'green')
.end();
## 使用Move.js创建复杂动画 ##
在本教程中，我们已经写了很多基本的 动画来了解各个方法。接下来，我们使用Move.js可以很容易的创建复杂的动画。该demo阐述了Move.js的大部分内容，在demo page
上我们创建了动画的描述，代码如下：
move('.square')
.to(500, 200)
.rotate(180)
.scale(.5)
.set('background-color', '#FF0551')
.set('border-color', 'black')
.duration('3s')
.skew(50, -10)
.then()
.set('opacity', 0)
.duration('0.3s')
.scale(0.1)
.pop()
.end();
结论
希望本篇教程能带给你关于Move.js是什么的清晰的认识和如何创建CSS3动画。使用Movejs能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。
L'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AMLes dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Démystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AMJavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AMPython est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.
Comment installer JavaScript?Apr 05, 2025 am 12:16 AMJavaScript ne nécessite pas d'installation car il est déjà intégré à des navigateurs modernes. Vous n'avez besoin que d'un éditeur de texte et d'un navigateur pour commencer. 1) Dans l'environnement du navigateur, exécutez-le en intégrant le fichier HTML via des balises. 2) Dans l'environnement Node.js, après avoir téléchargé et installé Node.js, exécutez le fichier JavaScript via la ligne de commande.
Comment envoyer des notifications avant le début d'une tâche en quartz?Apr 04, 2025 pm 09:24 PMComment envoyer à l'avance des notifications de tâches en quartz lors de l'utilisation du minuteur de quartz pour planifier une tâche, le temps d'exécution de la tâche est défini par l'expression CRON. Maintenant...
Dans JavaScript, comment obtenir des paramètres d'une fonction sur une chaîne prototype dans un constructeur?Apr 04, 2025 pm 09:21 PMComment obtenir les paramètres des fonctions sur les chaînes prototypes en JavaScript dans la programmation JavaScript, la compréhension et la manipulation des paramètres de fonction sur les chaînes prototypes est une tâche commune et importante ...
Quelle est la raison de la défaillance du déplacement de style dynamique Vue.js dans le WECHAT Mini Program WebView?Apr 04, 2025 pm 09:18 PMAnalyse de la raison pour laquelle la défaillance du déplacement de style dynamique de l'utilisation de Vue.js dans la vue Web de l'applet WeChat utilise Vue.js ...
Comment implémenter des demandes de GET simultanées pour plusieurs liens dans Tampermonkey et déterminer les résultats de retour en séquence?Apr 04, 2025 pm 09:15 PMComment faire des demandes d'obtention simultanées pour plusieurs liens et juger en séquence pour retourner les résultats? Dans les scripts de Tampermonkey, nous devons souvent utiliser plusieurs chaînes ...
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
mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),
SublimeText3 Linux nouvelle version
Dernière version de SublimeText3 Linux
MantisBT
Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.
