Как оживить с библиотекой MO.JS

MO.JS - это уникальная библиотека JavaScript Graphics Motion, которая облегчает не только анимационные погрузчики с полноэкранными страницами, но и микро-взаимодействиях на клику к анимации и тонны манипуляций формы.

Если вы находитесь на сцене веб-дизайна на некоторое время, шансы состоят в том, что вы столкнетесь - или, возможно, взаимодействовали с широким массорированием методов и библиотек анимации. Основные технологии, такие как CSS, HTML5 и JavaScript, становится еще более мощным, и поддержка браузера улучшается со временем. Подразделение заключается в том, что более сложные веб-анимации могут поддерживаться по устройствам. Помните, если вы строите сложный сайт, ваш веб хостинг Сервис должен быть способен поддерживать ваш проект.

Нужна некоторая анимация вдохновения? Вот несколько потрясающих примеров вершины CSS анимация воссоздать. Хотите построить сайт без кодирования? Попробуйте это Строители сайта Отказ

Как Mo.js может помочь?

Веб-анимация, как она появляется, здесь остаться. Тем не менее, недостаток с большими популярными методами анимации состоит в том, что они тяготеют к анимированию обычных элементов UI / UX, такие как слайд-шоу, кнопки из вкладок и раскрывающихся меню. В результате использование их может в конечном итоге сделать ваш сайт слишком знакомым и не захватывающим.

Mo.js может помочь с этим. Использование библиотеки помогает анимировать не так обычные элементы сайта, используя встроенные компоненты, такие как HTML, форма, вихрем, взрыв и шатры. Библиотека очень проста в использовании, быстрая, сетчатая готов, модульный и открытый источник. В этом руководстве основы работы с MO.JS введены, и два метода продемонстрированы; взрыв и пузырь.

01. Начните

Начните с создания папки, MO.JS, на рабочем столе, чтобы сохранить учебные пособие. Создайте три дополнительных папках в нем: CSS для хранения файлов стилей, IMG для изображений и JS для файлов JavaScript. Файлы HTML будут храниться в корневой папке. (Вы можете посмотреть поддержание облачное хранилище ).

02. Создать структуру страницы

Откройте свой редактор кода и создайте документ index.html, чтобы содержать знак на главной веб-странице. Начните с создания основной структуры и дайте подходящее название на странице.

 DOCTYPE HTML & GT;
& lt; html lang = "en" & gt;
    & lt; head & gt;
        & lt; meta chrset = "UTF-8" и GT;
        & lt; Title & GT; Blast Technique & lt;
Название и GT;
 & lt; / head & gt;
& lt; body & gt; & lt; / body & gt;
& lt; / html & gt; 

03. Структура страницы

Учебник разделен на две части; Первый демонстрирует методику взрыва, тогда как вторая иллюстрирует концепцию пузыря. В результате мы готовим два HTML-файлов, один для каждой методики. Чтобы ударить в Blast Technique, создайте раздел DIV, чтобы содержать название страницы. Сделайте страницу в вашем браузере, где вы должны соблюдать текст без стилизованного в верхнем левом углу.

 & lt; body & gt;
      & lt; class = "текст" и GT;
& lt; P & GT; Mo.js анимация & lt; / p & gt;
     & lt; / div & gt;
& lt; / body & gt;

04. Ссылка CSS

Откройте свой редактор кода и создайте файл styles.css внутри папки CSS. Создайте ссылку на этот файл в HTML-документе, добавив этот код в заголовке, & lt; link rel = "stylesheeet" href = "CSS / styles.csss" & gt; Отказ Поскольку никакие стили не были добавлены, страница отображается, как показано на этапе 3. В качестве альтернативы, поскольку стиль минимальна, вы можете использовать встроенный стиль, сочетая HTML и CSS.

05. Стиль фона

Далее мы стиль фона, добавив фоновое изображение. Мы использовали бесплатный живописный фон ландшафта Nikolai Ultang из Pexels. Вы можете Скачайте это здесь Отказ Сохраните это (или ваше собственное изображение) в папке IMG. Сделайте страницу, чтобы показать изменения в фоновом режиме.

 Тело, HTML {
  Фоновое изображение: URL (BG.JPG);
  Фон-размер: крышка;
  прокладки: 0;
  Маржа: 0;
  Ширина: 100%;
  Высота: 100%;
  Переполнение: скрыто;
}

06. Стиль текста

Затем текст стилизован для рендеринга в центре страницы, так как в настоящее время он появляется в верхнем левом углу. Обратите внимание, что для централизации текста мы выбираем абсолютное положение и установить его точное позиционирование, используя верхнюю, левую и правую маржу. Текст также трансформируется с использованием свойства текстового преобразования. Свойство «Выравнивание текста» также находится в центре.

 Текст {
  Семья шрифта: век готический, санс-сериф;
  Цвет: #fff;
  Текстовое преобразование: прописные буквы;
  Размер шрифта: 50px;
  Вес шрифта: Bolder;
  Должность: абсолютный;
  Топ: 50px;
 Слева: 25%;
 справа: 30%;
  текстовый выровнян: центр;
     }

07. Установите Mo.js.

Как и в случае с другими библиотеками, MO.JS установлен через несколько вариантов. Самый простой подход, который мы используем, доступа к нему напрямую с сервера CDN. Добавьте следующий код в секции кузова.

 & lt; script src = '//cdn.jsdelivr.net
Mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt; 

Если вы разрабатываете линию FF, библиотека может быть загружены прямо из GitHub и установлен с помощью пакетов Bower или NPM с помощью соответствующих команд.

 Bower Установите MO-JS
NPM установить MO-JS

После загрузки его можно будет ссылаться напрямую.

 & lt; script src = "mo.js" type = "текст
JavaScript «& gt; & lt; / script & gt;

Наконец, создайте новый файл Script.js и сохраните его в папке JS. Мы добавим функцию JavaScript в этот файл. Свяжите его в разделе тела следующим образом. Поместите его ниже названия текста, как показано ниже.

 & lt; body & gt;
& lt; class = "текст" и GT;
& lt; P & GT; Mo.js анимация & lt; / p & gt;
& lt; / div & gt;
   & lt; скрипт src = 'https: //cdn.jsdelivr
net / mojs / 0.265.6 / mo.min.js '& gt; / lt; / script & gt;
  & lt; script src = "js / script.js" & gt;
скрипт & gt;
& lt; / body & gt;

08. Создайте первый взрыв

Прежде чем приступить к разработке кода, он разумный выделить то, что мы создаем. Взрыв что-то просто означает нарушать его на меньшие биты в взрывной манере. Мы создадим простой объект (Circle) и настроить его поиск, когда пользователь нажимает его, он разрывается в взрывной основе.

09. Создайте объект круга

Во-первых, создается объект, который будет взорван (круг). Однако Mo.js поддерживает другие формы, в том числе прямоугольник (REBLE), CROSS, равный, зигзаг и многоугольник. Там, где вы не указываете тип формы, он будет по умолчанию по умолчанию. Чтобы создать простой круг, объявить его, используя VAR или Const и назначить его атрибуты, вызывая функцию формы.

 // Создание простого объекта
Const circ = new mojssshape ({{
  IsshowStart: правда,
             Радиус: 100,
});

Код создает объект круга по умолчанию с заданным радиусом. Переменная ISShowStart присваивается логическое значение для уточнения того, нужно ли вам показать объект или нет. Визуализируйте код, чтобы отобразить маленький круг пурпурный круг в центре страницы.

10. Анимируйте круг

Фрагмент кода указывает, что масштаб и непрозрачность изменятся от 1 до 0, что указывает на то, что объект исчезает. Допустимость и задержка анимации также устанавливаются. Обратите внимание, что анимация не играет, поскольку мы еще не инициализируем. Для этого добавьте функцию ниже.

 Document.addeventListener ('click', Функция
(е) {
Черта
 воспроизведение ();
}); 

11. Сделайте взрывающиеся полигоны

Теперь, когда круг анимируется, мы создаем взрывную анимацию, которая оказывает одновременно. Первый взрыв использует формы многоугольника для вытягивания взрыва. Чтобы создать взрыв, используйте функцию MO.JS, как показано на фрагменте кода ниже.

 const dip1 = new mojss bburst ({{
  Слева: 0, топ: 0,
  Счет: 7,
  Радиус: {50: 250},
  дети: {
    Заполните: «белый»,
    Форма: «многоугольник»,
    Ход: {«белый»: «# A50710»},
    HIMPIDTH: 4,
    Радиус: «Рэнд (30, 60)»,
    Радиусы: 0,
    масштаб: {1: 0},
    Путь: «Рэнд (0,5, 1)»,
    Степень: 360,
    ISFORCE3D: TRUE}});

Код назначает семь форм многоугольников к взрыву и указывает два радиуса. Первый относится к общей анимации, а вторая фокусируется на определенных объектах многоугольника в анимации. Убедитесь, что добавьте пакет в функцию прослушивателя событий, чтобы она ответила на щелчки мыши. Обратите внимание, что были добавлены два новых параметра; мелодия и генерировать. TUNE делает взрыв в любом месте в любом месте на странице, тогда как генерируют анимацию взрыва. Оказать страницу. Соблюдайте взрывочные элементы, которые одновременно появляются одновременно, что и круг.

 Document.addeventListener ('click', Функция
(е) {
             Burst1.
  TUNE ({x: e.pagex, y: e.pagey}).
  генерировать ().
 воспроизведение ();
Черта
 воспроизведение ();
});

12. Создайте второй взрыв

Далее мы создаем второй взрыв, используя разные варианты формы. Код следует за структурой предыдущего взрыва и меняет только несколько параметров.

 Const Burn2 = New Mojss Bburst ({{
  Вершина: 0, слева: 0,
  Счет: 4,
  Радиус: {0: 250},
дети: {
    Форма: [«круг», «прямо»],
    Очки: 5,
    Заполните: [«белый»],
    Радиус: «Рэнд (30, 60)»,
    Задержка: «Стемнение (50)»,
    Облегчение: ['cubic.out', 'cubic.out',
'Cubic.out'],
    масштаб: {1: 0},
    Путь: «Рэнд (0,5, 1)»,
    ISFORCE3D: TRUE}});

Добавьте пакет на функцию прослушивателя событий.

 Document.addeventListener ('click', Функция
(е) {
             Burst1.
  TUNE ({x: e.pagex, y: e.pagey}).
  генерировать ().
 воспроизведение ();
             Burst2.
             TUNE ({x: e.pagex, y: e.pagey
}).
             генерировать ().
             воспроизведение ();
Черта
 воспроизведение ();
});

13. Добавить кружок взрывов

Чтобы повысить анимацию дальше, мы добавляем круговые взрывы. Изучение кода на этапах 11 и 12 показано много сходств, существующих между двумя видами пакетов. В создании третьего взрыва мы избегаем переписывания слишком большого количества кода, используя оператор SPRECT, который записан как три точки (...). Однако во-первых, мы объявляем переменную, которая содержит аналогичные функции, которые мы хотим повторно использовать. После этого два других круга могут быть созданы просто используя оператор по распространению.

 // Создание переменной с похожим
параметры
    const circle_opts = {
  Слева: 0, топ: 0,
   Заполните: «белый»,
  масштаб: {.2: 1},
  Непрозрачность: {1: 0},
  ISFORCE3D: правда,
  Isshowend: false.
};

Код указывает тип заполнения, масштаб, непрозрачность и отображать их в конце анимации. Два анимации круга создаются следующим образом.

 circe1 = new mojssshape ({
  ... Circle_opts,
  Радиус: 200});
const circt2 = new mojssshape ({{{
  ... Circle_opts,
  Радиус: 240,
  Облегчение: «Cubic.out»,
  задержка: 300});

Добавьте круговые формы.

 Document.addeventListener ('click', Функция
(е) {
             Burst1.
  TUNE ({x: e.pagex, y: e.pagey}).
  генерировать ().
 воспроизведение ();
             Burst2.
             TUNE ({x: e.pagex, y: e.pagey
}).
             генерировать ().
             воспроизведение ();
Черта
 воспроизведение ();
});

14. Визуализация базового пузыря

В отличие от анимации Blast, которая нарушает объект на меньшие кусочки, анимация пузырьков, с другой стороны, переводит объект нажатия в большее пространство. Концепция принимает аналогию продувки воздушного шара, где объект постоянно расширяется по размеру. Для этого мы просто создаем новую переменную OpenBackgroundground и назначить атрибуты, которые сделают весь фоном достичь аналогичного цвета на объект. В результате это создает нюанс пузыринга.

 const openbackground = new mojssshape ({{{
  Заполните: «# FC2D79»,
  Слева: 0, топ: 0,
  масштаб: {0: 4.5},
  IsshowStart: правда,
  Радиус: 15,
  ISFORCE3D: правда,
  Istimelless: правда,
Задержка: 150,
  Радиус: 200,
  Облегчение: «Cubic.out»,
  Заслаживание: 'Expo.in',});

Убедитесь, что добавьте фоновую переменную к функции прослушивателя событий.

 OpenBackgroundground.
  TUNE ({x: e.pagex, y: e.pagey}).
  воспроизведение (); 

15. Добавьте несколько фигур

После концепции на этапе 14 мы сейчас продвигаем пример, включающий несколько цветных круговых объектов, которые, нажав на расширение аналогичного способа и отобразить некоторые текст. Отредактируйте существующий HTML-файл и скопируйте код в корпусе. Это создает основную структуру страницы.

16. Добавить вспомогательные библиотеки

Далее некоторые дополнительные библиотеки добавляются в секции кузова, чтобы облегчить прокрутку и создавать звуки, когда нажатие объектов.

& lt; script src = 'https: //cdnjs.cloudflare.com
AJAX / LIBS / WHERLER / 1.1.26 / WHERLER.MIN.JS '& GT;
скрипт & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
Mojs / 0.119.0 / mo.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
Hammerjs / 2.0.4 / Hammer.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdnjs.cloudflare.com
AJAX / LIBS / ISCROLL / 5.1.1 / ISCROLL-PROBE.MIN
JS '& GT;
& lt; / script & gt;

17. Продвиньте анимацию

Далее мы добавляем стили для отдельных классов, выделенных в файлах HTML. Функциональность MO.JS затем добавляется. Полный код (CSS и JS) совместно используются с учебными файлами для просмотра.

18. Узнайте больше о Mo.js

Хотя учебник демонстрирует методы пузырьков и взрывов, есть дополнительные ресурсы в Интернете, которые могут помочь вам быстро отслеживать ваш процесс обучения. Некоторые из них включают Учебники Mo.js на Github и демонстрация также на github Отказ

Эта статья была первоначально опубликована в номере 291 журнала Creative Web Design Веб-дизайнер Отказ Купить проблему 291. Отказ

Прочитайте больше:

• CSS ART блестяще разрушено старыми браузерами
• Лучшие куски пользовательского тестирования программного обеспечения
• Great Ui Designs