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

Анимация для сайта на 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 — анимационный эффект.

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

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

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

Ждем Ваших оценок, друзья!


Рейтинг!

Это звездный рейтинг статьи. Жду Ваших оценок и конечно же комментариев!
PS: Если возникли вопросы, пишите и я Вам постараюсь помочь своими ответами на них!


Рейтинг пользователя:
5
( 3 голоса)


Про Валерий Бородин

Проверьте также

шаблоны лендинг пейдж бесплатно

Шаблоны Лендинг Пейдж бесплатно? — Да, это для Вас друзья!

Скачать шаблоны Лендинг Пейдж бесплатно — 25 штук для создания своего инфопродукта можно здесь! Здравствуйте, уважаемые …

2 комментария

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Политика конфиденциальности