اختبار سريع لـ Motionia.js و Consoleimg.js

Motionia.js

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

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

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

• هناك 33 صورة متحركة مدمجة ، وفقًا لحساباتي ( Animate.css ، على سبيل المثال ، يحتوي على 97).
• بعض الرسوم المتحركة لا تعمل ، على سبيل المثال ، الوجه.
• الرسوم المتحركة بسيطة للغاية.
• عند محاولة الاستخدام في نص برمجي آخر نحصل عليه Uncaught ReferenceError: motionia is not defined، أي يمكنك استخدامه فقط في البرنامج النصي المدمج ، وهو ليس comme il faut.
• مستخدم من قبل jQuery ، والذي لا يستخدم أيضًا. ليس لدي أي شيء ضد jQuery ، ولكن يمكن تنفيذ هذه الوظيفة في JS خالص.
• من المحددات ، تتوفر فقط المعرفات والفئات والعلامات.

Consoleimg.js

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

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