Анимация для сайта на 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: :???: :?: :!: