Get best of the week

Teste rápido de Motionia.js e Consoleimg.js


Carl Heyerdahl

Bom dia.

Este pequeno artigo é dedicado a testar os recursos de algumas pequenas bibliotecas JavaScript pequenas - motionia.js e consoleimg.js . O primeiro é para trabalhar com animação, o segundo é para produzir imagens no console.

Motionia.js


Motionia.js é uma biblioteca para trabalhar com animações.

Os elementos são animados com motionia('target', 'anim'), em que target é qualquer elemento HTML (id, classe, tag) e anim é o nome da animação.

Segundo o desenvolvedor, o motionia.js oferece mais de 100 animações internas com capacidade de expansão.

Conectamos a biblioteca:

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

Criamos cinco contêineres. Adicione um manipulador de eventos de clique a cada um. Por clique, é chamada a função “motionia”, que é passada como argumento para o alvo da animação (elemento animado), o nome da animação e, em dois casos (o primeiro e o último contêineres), um parâmetro adicional - configurações da animação:

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

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


Coloque uma estrela no Github para ter uma ideia.

Entre as desvantagens, destaca-se o seguinte:

  • Existem 33 animações internas, de acordo com meus cálculos (o Animate.css , por exemplo, tem 97).
  • Algumas animações não funcionam, por exemplo, inverter.
  • As animações são bem simples.
  • Ao tentar usar em outro script, obtemos Uncaught ReferenceError: motionia is not defined, ou seja, Você pode usá-lo apenas no script interno, que não é comum.
  • Utilizado pelo jQuery, que também não é comum. Não tenho nada contra o jQuery, mas essa funcionalidade pode ser implementada em JS puro.
  • Nos seletores, apenas identificadores, classes e tags estão disponíveis.

Claro, para usar a biblioteca ou não, você decide.

Consoleimg.js


Consoleimg.js - como o nome indica, esta é uma biblioteca para gerar imagens no console.

Nós encontramos e baixamos uma imagem adequada (todos os formatos são suportados, incluindo gif e svg), baixamos o script do Github e o conectamos:

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

A imagem é exibida no console usando consoleimg.load('image', {size: 320, color: 'transparent'}), onde imagem é o nome da imagem, tamanho é a altura máxima da imagem (320px por padrão), cor é a cor de fundo (transparente por padrão).

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

Resultado:



Inútil, mas engraçado.

O código está aqui .

Obrigado pela atenção.

More articles:


All Articles