Экспресс-тестирование Motionia.js и Consoleimg.js

    Доброго времени суток.

    Эта небольшая заметка посвящена тестированию возможностей парочки новых крохотных JavaScript-библиотек — motionia.js и consoleimg.js. Первая предназначена для работы с анимацией, вторая — для вывода изображений в консоль.

    Motionia.js


    Motionia.js — это библиотека для работы с анимацией.

    Элементы анимируются с помощью motionia('target', 'anim'), где target — любой HTML-элемент (id, class, тег), а anim — название анимации.

    По утверждению разработчика, motionia.js предлагает 100+ встроенных анимаций с возможностью расширения.

    Подключаем библиотеку:

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

    Создаем пять контейнеров. Добавляем каждому обработчик события «клик». По клику вызывается функция «motionia», которой в качестве аргументов передается цель анимации (анимируемый элемент), название анимации и, в двух случаях (первый и последний контейнеры), дополнительный параметр — настройки анимации:

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

    Результат:


    Поставил звезду на Github за идею.

    Из недостатков можно отметить следующее:

    • Встроенных анимаций, по моим подсчетам, всего 33 (у Animate.css, например, их 97).
    • Часть анимаций не работает, например, flip.
    • Анимации довольно простые.
    • При попытке использовать в другом скрипте получаем Uncaught ReferenceError: motionia is not defined, т.е. использовать можно только во встроенном скрипте, что не комильфо.
    • Используется jQuery, что также не комильфо. Я ничего против jQuery не имею, но такой функционал можно было реализовать и на чистом JS.
    • Из селекторов доступны только идентификаторы, классы и теги.

    Разумеется, пользоваться библиотекой или нет, решать вам.

    Consoleimg.js


    Consoleimg.js — как следует из названия, это библиотека для вывода изображений в консоль.

    Находим и скачиваем подходящее изображение (поддерживаются все форматы, включая gif и svg), скачиваем скрипт с Github и подключаем его:

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

    Изображение в консоль выводится с помощью consoleimg.load('image', {size: 320, color: 'transparent'}), где image — название изображения, size — максимальная высота изображения (320px по умолчанию), color — цвет фона (прозрачный по умолчанию).

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

    Результат:



    Бесполезно, но забавно.

    Код находится здесь.

    Благодарю за внимание.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое