Матвей Земсков

Заметки веб-мастера

Суббота, 10 мая 2014 16:46

5 библиотек для создания ярких CSS эффектов

Оцените материал
(3 голосов)

CSS3 предоставляет дизайнерам много новых правил и модулей (таких как CSS Animations и CSS Transitions ), которые позволяют им добавлять в макеты интересные интерактивные эффекты.

Если вы хотите получить пользу от современных возможностей CSS, самым правильным путем будет использование (или изучение) библиотек CSS эффектов. Позвольте познакомить вас с несколькими из них. Все библиотеки, описанные в статье предоставляются с открытым исходным кодом. Они могут пригодиться вам при разработке актуальных интерфейсов в ваших проектах.

Animate.css

библиотека Animate.css

Animate.css – набор из более чем 60-ти CCS эффектов, разработанный Даниэлем Эденом - дизайнером Dropbox. Работа Даниэля Идена над Animate.css стала источником вдохновения для создателей некоторых других библиотек CSS эффектов, представленных ниже.

  • Лицензия - MIT
  • Демо
  • Документация
  • Страница на GitHub

Hover.css

библиотека Hover.css

Hover.css – это богатая коллекция из 48 CSS hover эффектов, созданная фронтэнд-разработчиком Яном Лунном. Одним из преимуществ этой библиотеки является то, что в архиве с библиотекой присутствует Sass-версия. В связи с растущей популярностью CSS-препроцессоров в последнее время это стало очень удобным для большинства веб-разработчиков, использующих их.

  • Лицензия - MIT
  • Демо
  • Документация (уроки)
  • Страница на GitHub

fancyInput

библиотека fancyInput

Библиотека fancyInput предоставляет возможность добавлять нестандартные CSS эффекты, которые срабатывают в процессе взаимодействия с полями веб-форм, такими как <input> и <textarea>. Эффекты проявляются в процессе заполнения полей пользователем.

  • Лицензия - неизвестно
  • Демо
  • Документация
  • Страница на GitHub

Magic

библиотека Magic

Magic – это коллекция интересных CSS3 эффектов. Проект был разработан Даниэлем Эденом, создателем библиотеки Animate.css в сотрудничестве с итальянским разработчиком, известным под псевдонимом miniMAC.

Используя Magic, вы с легкостью можете применять к элементам на страницах CSS анимацию и CSS преобразования с помощью jQuery (или другого JS-фреймворка, который вы предпочитаете). Это осуществляется добавлением обработчиков событий к целевым HTML-объектам на странице, а также добавлением или удалением специальных CSS классов библиотеки Magic в момент, когда происходит событие.

Например, у нас есть кнопка с идентификатором #submit-button, которая должна быть нажата пользователем только один раз. После этого кнопка должна быть удалена из DOM-дерева, причем это должно произойти с применением CSS анимации и преобразований, чтобы не вызвать у посетителя недоумения при исчезновении кнопки. Это легко можно реализовать с помощью Magic и jQuery.

JavaScript

	$('#submit-button').click(function(){
	  $(this).addClass('magictime vanishOut')
	});
  • Лицензия - неизвестно
  • Демо
  • Документация
  • Страница на GitHub

Effekt.css

библиотека Effekt.css

Effeckt.css – первая библиотека для реализации различных анимационных CSS эффектов и CSS преобразований на мобильных устройствах. На момент написания статьи библиотека до сих пор находится в стадии разработки. Включенные в библиотеку CSS эффекты придуманы дизайнерами, что гарантирует наличие в них хорошо продуманных и элегантных художественных решений. При разработке Effeckt.css большое внимание уделяется производительности, одному из важных критериев при проверке работы решений для мобильных устройств.

Вы можете ознакомиться со статьей о 9 целях Effeckt.css и посмотреть видео-ролик на youtube, чтобы иметь представление о будущем развитии Effeckt.css.

  • Лицензия - MIT
  • Демо
  • Страница на GitHub

В статье представлен далеко неполный список библиотек CSS эффектов. Я уверен, что не упомянул в ней некоторые довольно значимые проекты. Если вам известны другие интересные библиотеки с открытым кодом, не описанные в статье, вы можете рассказать о них в комментариях. Спасибо за внимание!

Оригинал статьи - http://sixrevisions.com/css/css-effects-libraries/

Прочитано 10422 раз

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


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: