Get best of the week

Pruebas rápidas de Motionia.js y Consoleimg.js


Carl Heyerdahl

Buen día.

Este breve artículo está dedicado a probar las capacidades de un par de pequeñas bibliotecas JavaScript nuevas: motionia.js y consoleimg.js . El primero es para trabajar con animación, el segundo es para enviar imágenes a la consola.

Motionia.js


Motionia.js es una biblioteca para trabajar con animaciones.

Los elementos se animan con motionia('target', 'anim'), donde target es cualquier elemento HTML (id, clase, etiqueta), y anim es el nombre de la animación.

Según el desarrollador, motionia.js ofrece más de 100 animaciones integradas con capacidad de expansión.

Conectamos la biblioteca:

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

Creamos cinco contenedores. Agregue un controlador de eventos de clic a cada uno. Al hacer clic, se llama a la función "motionia", que se pasa como argumentos al objetivo de la animación (elemento animado), el nombre de la animación y, en dos casos (el primer y último contenedor), un parámetro adicional: la configuración de la animación:

<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>

Añadir estilos:

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;
}

Resultado:


Pon una estrella en Github para tener una idea.

Entre las desventajas, se pueden observar las siguientes:

  • Hay 33 animaciones incorporadas, según mis cálculos ( Animate.css , por ejemplo, tiene 97).
  • Algunas animaciones no funcionan, por ejemplo, voltear.
  • Las animaciones son bastante simples.
  • Cuando intentamos usar en otro script obtenemos Uncaught ReferenceError: motionia is not defined, es decir Puede usarlo solo en la secuencia de comandos incorporada, que no es común.
  • Usado por jQuery, que tampoco es comme il faut. No tengo nada en contra de jQuery, pero dicha funcionalidad podría implementarse en JS puro.
  • De los selectores, solo están disponibles identificadores, clases y etiquetas.

Por supuesto, para usar la biblioteca o no, tú decides.

Consoleimg.js


Consoleimg.js: como su nombre lo indica, esta es una biblioteca para enviar imágenes a la consola.

Encontramos y descargamos una imagen adecuada (se admiten todos los formatos, incluidos gif y svg), descargamos el script desde Github y lo conectamos:

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

La imagen se muestra en la consola usando consoleimg.load('image', {size: 320, color: 'transparent'}), donde imagen es el nombre de la imagen, el tamaño es la altura máxima de la imagen (320 píxeles por defecto), el color es el color de fondo (transparente por defecto).

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

Resultado:



inútil, pero divertido.

El codigo esta aqui .

Gracias por su atención.

More articles:


All Articles