Содержание страницы
домикГлавная / Скрипты java и php / Анимация html примеры
Анимация htmlДля привлечения особого внимания посетителей используют различные эффекты анимации, которые особо часто применяют в продажных страницах и лендингах. Здесь я вам представляю 75 различных эффектов анимации для html, которые применяются к любому фрагменту на сайте.

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

Все примеры Анимации для html элементов

Как вставить на сайт html анимацию

Скачайте ниже архив, распакуйте его, и залейте содержимое (ccs файл и java скрипт) на свой хостинг. Там же в архиве я положил файл index.html с несколькими примерами анимации.

Далее пропишите код перед тегами </head> и </body>:
htmlCOPY
// Перед тегом </head> <link rel="stylesheet" type="text/css" href="animaciya.css"> // Перед тегом </body> <script type="text/jаvascript" src="animaciya.js"></script> <script>new WOW().init();</script>

Как применить анимацию на сайте html.

Для элемента, к которому будет применена анимация, необходимо прописать следующий код (в качестве этого примера я взял параграф):
htmlCOPY
<p class="wow slideInDown" data-wow-duration="1.5s" data-wow-delay="1s" data-wow-offset="120">Анимированный текст</p>

Описание значений

  • class="wow slideInDown" - здесь прописываем имя класса, анимацию которого вы хотите применить. Например, вы выбрали анимацию html из списка всех примеров (самое начало), - самый первый эффект bounce, значит класс параграфа будет иметь такое значение: class="wow bounce". И так со всеми эффектами по классу.
  • data-wow-duration="1.5s" - данный параметр отвечает за выполнение анимации по времени. В данном случае, анимация будет длиться 1,5 секунды.
  • data-wow-delay="1s" - через какой промежуток времени начнёт действовать анимация, в примере 1 секунда.
  • data-wow-offset="120" - на каком расстояние при прокрутке от нижней границы браузера начнётся выполнение эффекта анимации. В данном примере, это 120px.
  • data-wow-iteration="2" - и в последнем параметре вы можете задать неоднократное повторение эффекта анимации.

стрелка вниз Скачать файлы для анимации html

Ссылка на файл: скачать архив
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!