» » Анимация html на сайт примеры

Анимация html на сайт примеры

0 948

Анимация элементов

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

Выбирайте ниже по названию один из вариантов и смотрите эффекты анимации в реальном времени.

А ради наглядного примера, я применил понравившуюся анимацию к целому блоку. Прокрутите страницу пониже и воочию сами всё увидите, либо для быстрого перехода - нажмите сюда

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


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

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

Далее пропишите код перед тегами </head> и </body>:

Код для html
        // Перед тегом </head>
<link rel="stylesheet" type="text/css" href="animaciya.css">
        // Перед тегом </body>
<script type="text/javascript" src="animaciya.js"></script>
<script>new WOW().init();</script>

 

Пример анимации html с блоком

красивая обезъянка

Этот блок является одним из примеров анимации html. Выше приведены все примеры анимации, которые вы можете использовать на своих html страницах. Анимацию можно внедрить в любой объект находящийся на вашем сайте.

В данном примере я выбрал для анимации блок <DIV>, вы же можете использовать анимацию для любого элемента, прописав всего лишь для него необходимый class анимации, время начала воспроизведения, общее время выполнения и отступ снизу от края страницы, когда эффект должен проявится.

 

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

Для элемента, к которому будет применена анимация, необходимо прописать следующий код (в качестве этого примера я взял параграф):

Код для html
<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

Ссылка на файл: animaciya_elementov.zip

Похожие новости