Share
De nombreuses personnes souhaitent ajouter des animations subtiles à leur site Web en réponse à des clics ou à d'autres actions de leurs visiteurs. Cependant, tous ne sont pas habitués à utiliser CSS ou JavaScript. Certains savent juste comment modifier le code HTML et que le changement se répercute sur le site.
Généralement, c’est la partie où les développeurs prennent le relais et ajoutent le code JavaScript et CSS nécessaire pour que votre site Web se démarque. Cependant, si vous voulez pouvoir créer vous-même un site animé, sans codage, une bibliothèque appelée AniJS serait très utile..
AniJS vous permet de créer un style animé pour votre site Web sans codage JavaScript ou CSS! Vous pouvez spécifier toutes vos animations avec HTML en utilisant un simple Si-Sur-Faire-À syntaxe.
Avant de pouvoir commencer à animer les éléments de votre page Web à l'aide de data-anijs attributs, vous devrez inclure les fichiers nécessaires. Trois fichiers différents sont nécessaires pour accéder à toutes les fonctionnalités d'AniJS. Ces fichiers sont la bibliothèque principale JS, le fichier CSS des animations et un autre fichier auxiliaire JavaScript permettant d’utiliser la syntaxe spéciale AniJS, telle que $ addClass, $ toggleClass, et $ removeClass.
Vous pouvez également installer la bibliothèque à l'aide de Bower en exécutant la commande suivante:
bower installer anijs --save
Une fois que vous avez inclus tous les fichiers nécessaires, les éléments de votre page Web seront prêts pour l’animation..
Dans sa forme de base, AniJS utilise la syntaxe suivante pour animer des éléments particuliers en fonction de tout événement..
Si (tout événement se produit), On (tout élément), Do (quelque chose comme animer, ajouter / supprimer une classe), À (cet élément ou tout autre élément)
Ici le Si partie spécifie l'événement qui déclenchera l'animation ou la manipulation de la classe. le Sur partie spécifie l'élément dont les événements doivent être écoutés par AniJS. Cela peut être différent de l'élément sur lequel vous avez configuré le data-anijs attribut. le Faire partie spécifie l'action à entreprendre. Ici, vous pouvez spécifier le nom de l’animation que vous souhaitez appliquer, etc. Enfin, le À une partie est utilisée pour spécifier l'élément qui doit être animé ou manipulé.
le Si Une partie est nécessaire pour l'instruction AniJS que vous ajoutez pour animer un élément. le Sur partie est optionnel et, s'il n'est pas spécifié, utilise l'élément actuel comme valeur par défaut. le Faire une partie est également nécessaire car elle indique au navigateur quoi faire lorsque l'événement spécifié se produit. le À la partie est également facultative et utilise par défaut l'élément courant lorsqu'elle n'est pas spécifiée.
Vous pouvez également utiliser le Avant et Après crochets pour spécifier ce qui doit se passer avant et après AniJS fait la chose mentionnée à l'intérieur du Faire partie.
AniJS vous permet d'exécuter une animation en la déclenchant lors de tout événement applicable répertorié sur la page MDN. De même, vous pouvez utiliser sur et à pour cibler n'importe quel élément à l'aide des sélecteurs CSS. Par exemple, vous pouvez spécifier que vous souhaitez écouter un événement le div.promotion ou section div p.first, etc. Le faire Une partie peut être utilisée pour spécifier l’animation que vous souhaitez appliquer à différents éléments. AniJS a beaucoup d'animations qui peuvent être appliquées à n'importe quel élément.
L'extrait de code HTML suivant vous montrera comment appliquer des animations sur des éléments qui seront déclenchés lors de certains événements..
Dans chaque cas, tout ce que vous avez à faire est d’écrire les déclarations à l’intérieur du data-anijs attribut, et la bibliothèque se chargera du reste. (Nous avons sauté le à participer à toutes ces animations afin que l'animation soit appliquée à l'élément à l'intérieur duquel nous avons spécifié le data-anijs attribut.)
Les quatre dernières cases ont des valeurs différentes pour le sur partie. Cela signifie, par exemple, que l'animation sur la zone verte n'aura lieu que lorsque la souris passera sur la zone brune. De même, l'animation de rebond sur la boîte jaune commence à jouer chaque fois qu'un utilisateur double-clique n'importe où dans le corps..
Vous pouvez essayer ces animations vous-même dans la démo intégrée de CodePen.
AniJS vous permet de faire plus que simplement animer différents éléments. Par exemple, vous pouvez l'utiliser pour ajouter, supprimer ou basculer des classes appliquées à différents éléments. De même, vous pouvez également supprimer des éléments HTML ou les cloner sans ajouter une seule ligne de JavaScript. La bibliothèque vous permet également de parcourir le DOM à l'aide de mots clés réservés spéciaux..
Commençons par la manipulation de classe. AniJS a trois mots-clés réservés pour manipuler des classes. Ceux-ci sont $ addClass, $ removeClass, et $ toggleClass. Comme leur nom l'indique, vous pouvez les utiliser pour ajouter, supprimer et basculer une ou plusieurs classes d'un élément, respectivement. Tout ce que vous avez à faire est de spécifier les noms de classe après les mots-clés réservés.
De même, vous pouvez utiliser des mots clés réservés tels que $ parent, $ ancêtres, $ le plus proche, $ find, et $ enfants traverser le DOM.
Vous pouvez combiner ces deux ensembles de mots-clés réservés pour ajouter une certaine classe à tous les enfants d'un élément lorsqu'un visiteur double-clique sur cet élément..
Toutefois, les enfants auxquels vous faites référence peuvent être ambigus dans certains cas. Par exemple, vous avez peut-être appliqué le data-anijs attribuer à un élément mais définir la valeur de la Sur partie à autre chose en utilisant des sélecteurs CSS. Dans cette situation, AniJS n’aura aucun moyen de savoir si la classe doit être ajoutée aux enfants de l’élément référencé par le sélecteur CSS ou de l’élément auquel vous avez appliqué le paramètre. data-anijs attribut.
Dans ce cas, vous pouvez supprimer l’ambiguïté en utilisant un autre mot clé réservé appelécible. Ici, cible fait référence à l'élément pointé par le sélecteur CSS.
Considérez les trois exemples suivants dans lesquels AniJS a été utilisé pour changer les classes d'éléments différents:
Dans l'exemple ci-dessus, j'ai reformaté le code HTML pour faciliter la lecture et voir ce qui se passe..
Commençons par le premier div. Dans ce cas, nous avons omis les deux sur et à les parties de la data-anijs valeur d'attribut. Par conséquent, ils sont tous deux par défaut sur le courant div lui-même. Si vous essayez de cliquer sur ce particulier div, il va basculer le Orange classe, qui à son tour change la case en orange.
Dans le cas de la seconde div, nous disons à AniJS de basculer la classe appelée rouge pour tous les éléments qui sont des enfants de ce particulier div. Cela fera tourner tous les enfants envergure éléments et change leur couleur en rouge, tout en réglant le rayon de la bordure à zéro.
Nous avons fourni deux déclarations différentes à l'intérieur du data-anijs attribut de la troisième div. Ces deux déclarations basculent le même jaune classe. Cependant, les effets sont complètement différents en raison de l'utilisation de la cible mot-clé.
Dans le premier cas, nous avons ajouté le cible mot clé après le $ parent mot-clé. Cela indique à AniJS que nous voulons basculer la classe pour le parent des éléments pointés par le coquilles classe. Dans le second cas, nous avons sauté le cible mot-clé, donc AniJS modifie l’arrière-plan du parent de l’actuel div. Depuis le parent de la div est le corps lui-même, la page entière devient jaune.
Vous pouvez essayer de cliquer sur différents éléments et de voir leur impact sur la page dans la démo intégrée de CodePen..
Une autre chose à noter est que même si le data-anijs L'attribut pour la troisième case a deux instructions, cliquer sur la case elle-même n'a aucun effet. En effet, nous avons demandé à AniJS d’écouter les événements liés aux clics sur le envergure éléments avec classe coquilles dans les deux cas.
AniJS peut également manipuler des éléments HTML sur une page Web en les clonant ou en les supprimant. La bibliothèque a réservé les mots-clés $ remove et $ clone qui dira si vous voulez supprimer un élément ou le cloner.
Vous pouvez transmettre plusieurs sélecteurs à $ remove afin de supprimer plusieurs éléments de la page Web. Gardez à l'esprit que différents sélecteurs CSS doivent être séparés avec le tube | personnage.
le $ clone mot-clé accepte également deux paramètres. Le premier est le sélecteur CSS pour spécifier l'élément que vous voulez cloner. Le second est un nombre spécifiant le nombre de copies que vous souhaitez effectuer. Par exemple, $ clone .shells | 10 fera 10 copies des éléments avec classe coquilles et les ajouter comme enfants de l'élément sur lequel le data-anijs attribut a été spécifié. Si les copies doivent être ajoutées à un élément différent, vous pouvez y pointer AniJS en spécifiant le sélecteur CSS approprié après à dans la déclaration d'AniJS.
Le but de ce tutoriel était de vous aider à démarrer avec AniJS le plus rapidement possible. Comme vous l'avez peut-être remarqué, la bibliothèque est très facile à utiliser. Tout ce que vous avez à faire est de spécifier les bonnes valeurs d'attribut et AniJS se chargera de tout le reste, comme changer de classe, manipuler le DOM et animer les modifications..
La bibliothèque offre beaucoup d'autres fonctionnalités que nous n'avons pas abordées dans ce tutoriel. Vous devriez parcourir la documentation officielle pour en apprendre plus à ce sujet et l'utiliser au maximum de ses possibilités.
Accentsconagua