Анимация для сайта CSS+JS

27 июня 2019

Рецепт собрал по материалам

http://master-css.com/page/wowjs

https://github.com/daneden/animate.css 

СКАЧАТЬ АРХИВ

Содержимое архива (файлы js и css) положить в корень вашего сайта

На странице, перед </head> добавить

<link rel="stylesheet" href="animate.css">    
<script src="wow.min.js"></script>
<script>
    new WOW().init();
</script>

Элементу, который нужно анимироваить, добавить классы wow bounce В данном случае bounce - это пример стиля анимации.

Список всех доступных стилей анимации

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Для наглядности выбора анимации я пользуюсь этим сайтом

С помощью атрибутов можно задать

data-wow-duration – указываем время проигрывания анимации

data-wow-delay – ставим задержку перед проигрыванием анимации

data-wow-offset – включение анимации, когда элемент проходит определенное количество пикселей от низа экрана

data-wow-iteration – количество повторов анимации

Например

data-wow-offset="200"
data-wow-delay="0.5s"
data-wow-duration="2s"