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

Здравствуйте, уважаемые друзья и гости блога 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 – анимационный эффект.

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

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

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