Get best of the week

Pengujian cepat Motionia.js dan Consoleimg.js


Carl Heyerdahl

Selamat siang.

Artikel singkat ini dikhususkan untuk menguji kemampuan beberapa pustaka JavaScript kecil baru - motionia.js dan consoleimg.js . Yang pertama adalah untuk bekerja dengan animasi, yang kedua adalah untuk mengeluarkan gambar ke konsol.

Motionia.js


Motionia.js adalah perpustakaan untuk bekerja dengan animasi.

Elemen dianimasikan motionia('target', 'anim'), di mana targetnya adalah elemen HTML apa pun (id, kelas, tag), dan anim adalah nama animasinya.

Menurut pengembangnya, motionia.js menawarkan 100+ animasi built-in dengan kemampuan diperluas.

Kami menghubungkan perpustakaan:

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

Kami membuat lima kontainer. Tambahkan event handler klik untuk masing-masing. Dengan mengklik, fungsi "motionia" dipanggil, yang dilewatkan sebagai argumen target animasi (elemen animasi), nama animasi dan, dalam dua kasus (wadah pertama dan terakhir), parameter tambahan - pengaturan animasi:

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

Tambahkan gaya:

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

Hasil:


Letakkan bintang di Github untuk sebuah ide.

Di antara kelemahannya, berikut ini dapat dicatat:

  • Ada 33 animasi bawaan, menurut perhitungan saya ( Animate.css , misalnya, memiliki 97).
  • Beberapa animasi tidak berfungsi, misalnya, flip.
  • Animasi ini cukup sederhana.
  • Saat mencoba menggunakan skrip lain yang kami dapatkan Uncaught ReferenceError: motionia is not defined, mis. Anda dapat menggunakannya hanya dalam skrip bawaan, yang tidak kome il faut.
  • Digunakan oleh jQuery, yang juga tidak comme il faut. Saya tidak menentang jQuery, tetapi fungsi seperti itu dapat diimplementasikan dalam JS murni.
  • Dari penyeleksi, hanya pengidentifikasi, kelas, dan tag yang tersedia.

Tentu saja, untuk menggunakan perpustakaan atau tidak, Anda yang memutuskan.

Consoleimg.js


Consoleimg.js - seperti namanya, ini adalah pustaka untuk menghasilkan gambar ke konsol.

Kami menemukan dan mengunduh gambar yang sesuai (semua format didukung, termasuk gif dan svg), mengunduh skrip dari Github dan menghubungkannya:

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

Gambar ditampilkan di konsol menggunakan consoleimg.load('image', {size: 320, color: 'transparent'}), di mana gambar adalah nama gambar, ukuran adalah tinggi gambar maksimum (320px secara default), warna adalah warna latar belakang (transparan secara default).

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

Hasil: Tidak



berguna, tapi lucu.

Kodenya ada di sini .

Terima kasih atas perhatian Anda.

More articles:


All Articles