[Разработка веб-сайтов, JavaScript, Программирование] Экспресс-тестирование motionia.js и consoleimg.js

Автор Сообщение
news_bot ®

Стаж: 2 года 8 месяцев
Сообщений: 46584

Создавать темы news_bot ® написал(а)
02-Июн-2020 22:32


Carl Heyerdahl
Доброго времени суток.
Эта небольшая заметка посвящена тестированию возможностей парочки новых крохотных 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'})

Результат:

Бесполезно, но забавно.
Код находится здесь.
Благодарю за внимание.
===========
Источник:
habr.com
===========

Похожие новости: Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_javascript, #_programmirovanie (Программирование), #_javascript, #_programmirovanie (программирование), #_razrabotka (разработка), #_library, #_biblioteka (библиотека), #_razrabotka_vebsajtov (
Разработка веб-сайтов
)
, #_javascript, #_programmirovanie (
Программирование
)
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 29-Окт 16:13
Часовой пояс: UTC + 5