Сборник анимации на CSS3

22 августа 2015 Антон Кулешов 1284 0

Сегодня для создания конкурентно-способного веб-ресурса приходится учитывать многое: начиная от интуитивно понятного дизайна страницы и заканчивая различными текстами, которые должны привлечь и удержать посетителя. Мы же в этой статье уделим внимание динамике, происходящей на страницах, которая стала неотъемлемой их частью. Если раньше для того, чтобы добавить какой-нибудь эффект нам приходилось использовать различные библиотеки или писать код на JavaScript, то сейчас лучший способ оживить сайт - это воспользоваться анимацией за счёт CSS3.

Реклама

Современные браузеры – вот наша цель. Хотя, только представить себе, что первая работа над стандартом CSS3 началась аж в далёком 1998 году, и это через год после появления CSS2. Между тем далеко не все браузеры поддерживают полный объем возможностей CSS3, что весьма и весьма печально. Мы не будем делать акцент на любителей старых версий браузеров – это их личный выбор, а займемся рассмотрением CSS библиотеки animate.css. Рано или поздно стандарт войдет во 100% поддержку, а нам надо идти в ногу со временем.

Animate.css – файл, в котором описано множество CSS3 анимаций, а вызов их происходит путём добавления классов к нужным нам HTML элементам. Вариантов и в самом деле много, если вы перейдёте на страницу демо, то увидите насколько.

Пользоваться CSS библиотекой очень просто, для этого подключим CSS файл:

<link href="animate.css" type="text/css" rel="stylesheet" />

Теперь добавляем HTML:

<h1 class="animated bounce">Анимированная запись на CSS3</h1>

К заголовку мы добавили два класса

  • animated – этот класс добавляем к элементу, к которому хотим добавить анимацию;
  • bounce – анимация, которая произойдёт (всего в библиотеке 74 вида, все примеры можно увидеть в демо).

А если добавить класс infinite, то анимацию можно зациклить, и она будет повторяться. Добавляя свои варианты и изменяя существующие, Вы с легкостью можете на базе animate.css создать свой сборник CSS3 анимаций.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

22 эффекта для кнопок

7 февраля 2016 Антон Кулешов

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

Два способа сделать меню для сайта на HTML и CSS

26 января 2015 Антон Кулешов

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

Основы добавления материалов в Joomla

29 августа 2014 ti1schweiger

Joomla довольно простая и удобная система управления для создания, добавления и редактирования материалов. Любому, даже самому начинающему пользователю, будет не трудно её освоить. Сегодня расскажу о том, как добавить материал в Joomla.