Get best of the week

Test rapide de Motionia.js et Consoleimg.js


Carl Heyerdahl

Bonjour.

Ce court article est consacré à tester les capacités de quelques nouvelles bibliothèques JavaScript minuscules - motionia.js et consoleimg.js . Le premier est pour travailler avec l'animation, le second est pour la sortie d'images vers la console.

Motionia.js


Motionia.js est une bibliothèque pour travailler avec des animations.

Les éléments sont animés avec motionia('target', 'anim'), où cible est n'importe quel élément HTML (id, classe, balise) et anim est le nom de l'animation.

Selon le développeur, motionia.js propose plus de 100 animations intégrées avec extensibilité.

Nous connectons la bibliothèque:

<script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia/dist/motionia.js" defer></script>

Nous créons cinq conteneurs. Ajoutez un gestionnaire d'événements Click à chacun. En cliquant, la fonction «motionia» est appelée, qui est passée en arguments la cible d'animation (élément animé), le nom de l'animation et, dans deux cas (le premier et le dernier conteneurs), un paramètre supplémentaire - paramètres d'animation:

<div class="box1" onclick="motionia('.box5', 'slideX', '100px')">slideX</div>
<div class="box2" onclick="motionia('.box3', 'bounceIn')">bounceIn</div>
<div class="box3" onclick="motionia('.box4', 'rollIn')">rollIn</div>
<div class="box4" onclick="motionia('.box2', 'slideIn')">slideIn</div>
<div class="box5" onclick="motionia('.box1', 'slideY', '-100px')">slideY</div>

Ajouter des styles:

body {
	margin: 0;
	height: 100vh;
	background: radial-gradient(circle, lightgreen, darkgreen);
	display: flex;
	justify-content: center;
	align-items: center;
}

div {
	margin: 0 .5em;
	width: 100px;
	height: 100px;
	background: linear-gradient(skyblue, steelblue);
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,.8);
	display: inherit;
	justify-content: center;
	align-items: center;
	font-family: system-ui;
	font-size: 1.2em;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
}

Résultat:


Mettez une étoile sur Github pour une idée.

Parmi les inconvénients, on peut noter:

  • Il y a 33 animations intégrées, selon mes calculs ( Animate.css , par exemple, en a 97).
  • Certaines animations ne fonctionnent pas, par exemple, le retournement.
  • Les animations sont assez simples.
  • Lorsque nous essayons d'utiliser dans un autre script, nous obtenons Uncaught ReferenceError: motionia is not defined, c'est-à-dire Vous ne pouvez l'utiliser que dans le script intégré, ce qui n'est pas comme il faut.
  • Utilisé par jQuery, qui n'est pas non plus comme il faut. Je n'ai rien contre jQuery, mais une telle fonctionnalité pourrait être implémentée en JS pur.
  • Dans les sélecteurs, seuls les identifiants, les classes et les balises sont disponibles.

Bien sûr, pour utiliser la bibliothèque ou non, vous décidez.

Consoleimg.js


Consoleimg.js - comme son nom l'indique, il s'agit d'une bibliothèque de sortie d'images vers la console.

Nous trouvons et téléchargeons une image appropriée (tous les formats sont pris en charge, y compris gif et svg), téléchargez le script depuis Github et connectez-le:

<script src="consoleimg.min.js"></script>

L'image est affichée dans la console en utilisant consoleimg.load('image', {size: 320, color: 'transparent'}), où image est le nom de l'image, la taille est la hauteur maximale de l'image (320 px par défaut), la couleur est la couleur d'arrière-plan (transparent par défaut).

consoleimg.load('img.png', {size: 320, color: '#fff'})

Résultat:



inutile, mais drôle.

Le code est ici .

Merci de votre attention.

More articles:


All Articles