—»     —»   Easings.net – CSS3-анимации трансформеры
  Раздел: Java-Скрипты   Нет комментариев  

Easings.net – CSS3-анимации трансформеры



С появлением CSS3 у нас появилась возможность использовать анимированные эффекты при наведении и другие переходы. Эти переходы могут быть реализованы при помощи так называемых эффектов замедления. Эти эффекты отличаются тем, каким образом они начинаются, каким образом они ускоряются, замедляются или останавливают анимацию. Веб-сайт Easings.net собрали большой обзор доступных эффектов. Кроме этого, ребята представили некоторые дополнительные эффекты, подкрепленные исходным кодом.

Easings.net – CSS3-анимации трансформеры

Что касается стандартных эффектов CSS3, то мы можем использовать заранее установленные, а также более или менее упрощенные эффекты ease-in и ease-out. Если вы готовы работать с более сложными анимациями, CSS3 позволяет вам создавать их при помощи индивидуальной кривой Безье.

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

Эффект замедления для CSS3 + jQuery-плагин

Эффект замедления полностью полагается на CSS3, и позволяет вам использовать простые кривые Безье. Что касается более сложных операций, включая эластичность, то здесь нам понадобится javascript. Ресурс Easings.net предлагает нам не только кривые Безье для CSS3, но также и корректный исходный код для вспомогательного jQuery-плагина Easing, который позволяет вам создавать более сложные анимации. Плагин содержит все эффекты замедления, предоставленные на сайте. Таким образом, все, что вам потребуется, это использовать название эффекта.

Эффекты замедления для SASS

Easings.net на этом не остановились. Кроме поддержки CSS3 и jQuery, разработчики также предложили нам специальное издания для среды разработки Compass под названием Ceaser Easing Animation. Это расширение позволяет использовать заранее подготовленные эффекты без необходимости выставлять кривую Безье.

Завершение

Easings.net предлагает нам расширенную подборку различных эффектов замедления, включая необходимый код для встраивания эффектов на сайт.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery, SASS
Опубликовал Design FactoRy   Прочитано (раз): 4133   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930