✔Эффекты и анимация на CSS - «Верстка»

18 марта 2016 1 320 Самоучитель CSS / Вёрстка 0

Animate.css – анимация через CSS

Animate.css – набор классных, веселых кроссбраузерных(!) вариантов анимации для веб-сайтов. Вы можете использовать их как для домашних страниц, разного рода слайдеров, так и для серьезных коммерческих проектов.

На странице сможете попробовать все варианты анимации. Просто кликаете по одной из кнопок с названием эффекта. Всего имеется несколько категорий для преобразований: привлекающие внимание, поворачивающиеся, затухающие, вращающиеся, выпрыгивающие и т.п. Внизу есть информацию о том, что набор Animate.css применяется на сайтах EA, Foursquare, Disney.

Узнать о том как использовать набор можете на Github вот здесь. Это, в принципе, не так сложно – вы просто подключаете файл стилей animate.css в head. А затем добавляете класс “animated” с названием эффекта. Можете использовать стили совместно с jQuery и объединять с разными другими эффектами.

Effeckt.css – разные CSS эффекты

Effeckt.css – подборка разных CSS эффектов для веб-приложений, которая постоянно пополняется новыми фишками. Отбираются для нее только правильно работающие, удобные и полезные “приемчики”.

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

А вот ссылка на github где найдете описание библиотеки с инструкциями по применению. В целом оба набора (Animate.css и Effeckt.css) весьма хороши. Веб-разработчикам должны пригодиться!

Цитирование статьи, картинки - фото скриншот - Rambler News Service.

Иллюстрация к статье - Яндекс. Картинки.

Есть вопросы. Напишите нам.

Общие правила поведения на сайте.

С помощью CSS разработчики могут создавать на сайтах весьма интересные эффекты и даже анимацию. Возможности нового CSS3 значительно расширили доступный набор их инструментов. В интернете имеется достаточно много разных примеров, библиотек и сервисов, где каждый может посмотреть и скачать те или иные эффекты. Про некоторые генераторы CSS3 и HTML5 мы уже писали, сегодня рассмотрим еще 2 интересных проекта. Animate.css – анимация через CSS Animate.css – набор классных, веселых кроссбраузерных(!) вариантов анимации для веб-сайтов. Вы можете использовать их как для домашних страниц, разного рода слайдеров, так и для серьезных коммерческих проектов. На странице сможете попробовать все варианты анимации. Просто кликаете по одной из кнопок с названием эффекта. Всего имеется несколько категорий для преобразований: привлекающие внимание, поворачивающиеся, затухающие, вращающиеся, выпрыгивающие и т.п. Внизу есть информацию о том, что набор Animate.css применяется на сайтах EA, Foursquare, Disney. Узнать о том как использовать набор можете на Github вот здесь. Это, в принципе, не так сложно – вы просто подключаете файл стилей animate.css в head. А затем добавляете класс “animated” с названием эффекта. Можете использовать стили совместно с jQuery и объединять с разными другими эффектами. Effeckt.css – разные CSS эффекты Effeckt.css – подборка разных CSS эффектов для веб-приложений, которая постоянно пополняется новыми фишками. Отбираются для нее только правильно работающие, удобные и полезные “приемчики”. Как и в прошлом случае, здесь есть специальная страница с демонстрацией всех имеющихся эффектов. Они также разделены на группы: модальные окна, кнопки, списки, скроллы, навигация, заголовки, элементы формы, табы и т.п. Каждый эффект можно потестировать онлайн. Вот прикольное видео с демонстрацией некоторых из них. А вот ссылка на github где найдете описание библиотеки с инструкциями по применению. В целом оба набора (Animate.css и Effeckt.css) весьма хороши. Веб-разработчикам должны пригодиться!