Библиотека Move.js — удобный инструмент CSS анимаций

Библиотека Move.js - удобный инструмент CSS анимаций

От автора: достаточно часто при разработке веб-приложений необходимо использовать различные анимационные эффекты для отображения определенных блоков. Поэтому в данном уроке я хотел бы рассказать Вам об одной очень интересной библиотеке, благодаря которой можно быстро и легко создавать CSS анимации, название данной библиотеки MOVE.js.

скачать исходникискачать урок

Установка

Move.js — это небольшая библиотека, написанная на языке JavaScript, используя функции которой, можно очень быстро и просто создавать различные анимационные эффекты. При этом используется анимации языка каскадных таблиц стилей CSS3. Для установки библиотеки, необходимо перейти по ссылке https://github.com/visionmedia/move.js/ и кликнуть по ссылке Download ZIP.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

После распаковки скачанного архива Вы получите папку move.js-master, в которой содержится файл move.js – это и есть, интересующая нас библиотека (либо файл move.min.js – сжатая версия библиотеки). Также обратите внимание, что на данной странице присутствует ссылка на документацию по данной библиотеке — http://visionmedia.github.io/move.js/:

Далее подключаем данный файл к определенной странице и можно использовать функционал библиотеки.

Обратите внимание, что разработчики рекомендуют подключать данную библиотеку перед закрывающим тегом </body>. Также для работы библиотеки необходима библиотека jQuery, которую можно скачать с официального сайта http://jquery.com.

Начало работы с библиотекой

Для сегодняшнего урока я создал простую html страницу со следующим кодом:

Блок с классом content – будет использоваться для тестирования анимации. Кнопка с классом button , необходима для запуска анимации. Обратите внимание, что вызывая метод click, я описал анонимную функцию, которая будет вызываться при срабатывании события click по кнопке, в теле данной функции, мы и будем вести дальнейшее кодирование. Итак, для начала, необходимо выбрать блок, с которым мы будем работать:

Выбор блока осуществляется стандартными селекторами CSS. Метод end(), вызывается в конце цепочки методов формирующих анимационный эффект, так как запускает анимацию в работу. Так же в качестве параметра, при вызове метода end(), можно передать анонимную функцию, которая выполнит определенные действия по завершению анимационных эффектов.

Методы библиотеки

Метод set(‘param’,'val’) – устанавливает значение — val для правила CSS — param. К примеру, для выбранного блока, установим зеленый цвет фона, и покажем его на экран (так как изначально он был скрыт – правилу ‘opacity’ была передана 1).

Метод add(prop, val) – добавляет (инкрементирует) значение – val в правиле – prop. При этом значение должно быть целочисленного типа (при этом данный метод можно использовать многократно).

Метод sub(prop, val) – уменьшает (декрементирует) значение – val в правиле – prop. При этом значение должно быть целочисленного типа (при этом данный метод можно использовать много кратно).

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Метод rotate(deg) – поворачивает выбранный блок, на значение – deg (данное значение в градусах). К примеру, поворот блока на один оборот

Метод duration(n) – задает время выполнения анимационных эффектов. При этом передавать в качестве параметра, можно количество миллисекунд – выполнения анимации, а также строку вида – ’5s’, то есть 5 секунд.

Метод translate(x[, y]) – перемещает выбранный блок на определенное количество пикселей по оси абсцисс – x, и, если необходимо, на определенное количество пикселей по оси ординат – y.

Методы x(n) / y(n) – перемещают выбранный блок на определенное количество пикселей по оси абсцисс, и по оси ординат соответственно.

Метод skew(x[, y]) – наклоняет выбранный блок на определенный угол по оси абсцисс – x, и, если необходимо, на определенный угол по оси ординат – y.

Метод scale(x[, y]) – масштабирует выбранный блок с коэффициентом – х, по оси абсцисс, и, если необходимо, с коэффициентом – y, по оси ординат.

Метод delay(n) – задает время задержки – n перед началом выполнения анимации.

Метод then() – позволяет разбить анимацию на несколько шагов, таким образом можно поэтапно манипулировать выбранным блоком. Но если Вы создаете пошаговую анимацию с использованием метода then(), и при этом на разных шагах используются методы, воздействующие на одни, и те же правила CSS – необходимо использовать метод pop(), который применяется, для возврата родителя текущего объекта Move в цепочке вызываемых методов. При этом метод pop(), можно использовать несколько раз, но не более, чем количество вызываемых методов than().

К примеру, можно создать анимацию, состоящую из трех шагов:

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Soleh

    Здравствуйте. Я хотел бы задать вопрос.
    Если эта библиотека использует анимации языка каскадных таблиц стилей CSS3, будет ли анимация, созданная при помощи этой библиотеки, работать в браузерах не поддерживающих спецификации CSS3?
    Заранее спасибо за ответ!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree