Анимация для сайта на CSS — Примеры и скачать исходники!

анимация для сайта

Как создается анимация для сайта? Прочти — узнаешь и сделаешь анимацию на своем сайте сам!

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Сегодня расскажу Вам, как делается анимация для сайта, а именно красивые блоки и тексты в анимированном стиле. Если Вас это заинтересовало, тогда читаем дальше ...

Многие из Вас на 100% встречали в интернете сайты, где используется анимация для текстов и блоков. Вот такие эффекты анимации для сайта я Вам и предлагаю сейчас рассмотреть и в качестве бонуса будет ссылка для скачивания исходников, используя которые Вы сможете создать примерно вот такие анимационные эффекты на своем ресурсе. Посмотрите пример — Анимация на CSS для сайта!

Как применить Анимацию CSS на практике для сайта?

Все не так уж и сложно, как кажется на первый взгляд!

  • Сначала нужно скачать файл анимации, который Вы найдете на странице примера (см. выше)
  • Затем этот файл надо подключить к Вашему сайту. Это делается в файле functions.php. Добавьте туда вот такой код:
// register scripts & styles
function animate_scripts() {
  if (!is_admin()) {
     wp_register_style('animate', esc_url(get_template_directory_uri()). '/css/animate.css');
     wp_enqueue_style('animate');
   }
}
add_action('wp_enqueue_scripts', 'animate_scripts');
  • Теперь Вам нужно подобрать для себя подходящий анимационный эффект, которые я приводил в примере выше и найти аналогичный в скачанных файлах.
  • Следующим шагом будет назначение стилей к тексту на Вашем сайте, чтобы получился требуемый анимационный эффект. Например Вам нужно сделать анимацию для заголовка ан сайте. Для этого в файле single.php своего сайта отыщите заголовок с тегами, например H1. Добавьте к нему классы стилей (animated + slideOutDown) или другой, какой Вам понравился из всех представленных в скачанных файлах и на примере выше. Получится вот такой код:
<h1 class="animated slideOutDown">

Где animated — это  анимация, а slideOutDown — анимационный эффект.

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

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

На этом прощаюсь ... До свидания! Всем удачи и благополучия! До новых встреч! Спасибо за Ваше внимание!

Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Александр

    Раньше не увлекался анимацией, а оказывается это увлекательное занятие.

    1. Валерий Бородин (автор)

      Да, Александр, анимация это увлекательно и интересно!

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: