Site icon Vavik96

5 Библиотек CSS эффектов для украшения ваших проектов

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

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

 

1. Animate.css

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

Демо:

2. Hover.css

Это огромная коллекция из 48 CSS3 эффектов при наведении, разработчиком которой является Ян Ланн. Что самое интересное в Hover.css, это то, что она имеет SASS, что действительно очень удобно для многих из разработчиков.

Демо:

3. fancyInput

fancyInput занимается взаимодействием, связанным с вашими HTML <input> и <textarea> элементами. Это дает вам возможность осуществлять интересные эффекты CSS, когда пользователи вводят данные в ваши поля формы.

4. magic

(Примечание: ссылка выше ведёт на веб-сайт на итальянском языке).

magic это интересная коллекция CSS3 эффектов. Этот проект вдохновлен работой Даниэля Идена Animate.css и создан итальянским разработчиком, который выходит под псевдонимом, Minimac.

С magic вы можете легко использовать CSS-анимации и переходы с помощью JQuery, просто установив обработчик событий в ваш целевой HTML объект, а затем добавляя / удаляя magic-классы CSS анимации.

Например, у нас есть кнопка под названием #submit-button, и мы хотим удалить его из DOM, и вы не хотите, чтобы пользователи продолжали нажимать на кнопку, которая предназначена для нажатия только один раз – но мы хотели бы сделать это в впечатляюще:

 

$('#submit-button').click(function(){
  $(this).addClass('magictime vanishOut')
});

 

5. Effeckt.css

 

Effeckt.css – всё еще в стадии разработки – это-первая мобильная библиотека CSS эффектов анимаций и переходов. Читайте 9 целей Effeckt.css и смотрите 22-секундный проекта видео на YouTube , чтобы получить представление о будущем Effeckt.css.

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

 

Оригинал / Перевод

Продожение здесь

Exit mobile version