Содержание страницы
домикГлавная / Скрипты 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

Ссылка на файл: скачать архив
Дата публикации: 19.08.2018
Комментарии
Монограмм
07 сентября 2019 11:48
Монограмм
Приветствую, подскажите как сделать анимацию для логотипа и получиться ли он здесь ( адрес сайта предоставил ) или меню поплывёт?
( половина этого сайта сделана благодаря вам )
Admin
07 сентября 2019 12:17
Admin
Добрый день!
Если изначально правильно прописан код для элемента, для которого хотите сделать любую анимацию, то он ни как не должен повлиять на соседние элементы html.
А так, пробуйте и смотрите, и если что, то дополняйте уже по ситуации.

P.S.
Обратите внимание на ошибки в исходном коде: есть не закрытые и лишние теги ( иногда приводит к плачевным результатам )
Монограмм
08 сентября 2019 12:16
Монограмм
Админ, спасибо за ваш ответ
Сегодня пытался что то сделать и анимировать логотип, так всё просто к сожалению уплывает.
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!