interface Web
js tutoriel
Un guide d'introduction à la création d'animations CSS3 avec Move.js_JavaScript
Un 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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。
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 obtenir un effet de vague avec du CSS3 pur ? (exemple de code)
Jun 28, 2022 pm 01:39 PM
Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !
Utilisez habilement CSS pour réaliser divers boutons de forme étrange (avec code)
Jul 19, 2022 am 11:28 AM
Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !
Comment masquer des éléments en CSS sans prendre de place
Jun 01, 2022 pm 07:15 PM
Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.
Comment implémenter des bordures en dentelle en CSS3
Sep 16, 2022 pm 07:11 PM
En CSS, vous pouvez utiliser l'attribut border-image pour réaliser une bordure en dentelle. L'attribut border-image peut utiliser des images pour créer des bordures, c'est-à-dire ajouter une image d'arrière-plan à la bordure. Il vous suffit de spécifier l'image d'arrière-plan comme style de dentelle ; largeur de la bordure de l'image vers l'intérieur. Indique si le début est répété ;".
Il s'avère que le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur !
Jun 10, 2022 pm 01:00 PM
Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.
Comment agrandir l'image en cliquant sur la souris en CSS3
Apr 25, 2022 pm 04:52 PM
Méthode d'implémentation : 1. Utilisez le sélecteur ":active" pour sélectionner l'état du clic de la souris sur l'image ; 2. Utilisez l'attribut de transformation et la fonction scale() pour obtenir l'effet d'agrandissement de l'image, la syntaxe "img:active {transform : échelle (grossissement de l'axe x, grossissement de l'axe y);}".
Comment définir la vitesse de rotation de l'animation en CSS3
Apr 28, 2022 pm 04:32 PM
En CSS3, vous pouvez utiliser l'attribut "animation-timing-function" pour définir la vitesse de rotation de l'animation. Cet attribut est utilisé pour spécifier comment l'animation terminera un cycle et définir la courbe de vitesse de l'animation. La syntaxe est "element {. fonction de synchronisation d'animation : valeur de l'attribut de vitesse ;}".
L'effet d'animation CSS3 a-t-il une déformation ?
Apr 28, 2022 pm 02:20 PM
L'effet d'animation en CSS3 a une déformation ; vous pouvez utiliser "animation : attribut d'animation @keyframes ..{..{transform : attribut de transformation}}" pour obtenir un effet d'animation de déformation. L'attribut d'animation est utilisé pour définir le style d'animation et le. L'attribut transform est utilisé pour définir le style de déformation.
