Август 2017
Автор: Рубрика: Верстка Комментариев нет

Простой способ анимации блоков animate.css для сайта


Простой способ анимации блоков animate.css для сайта

Рассмотрим анимацию блоков при скроле на странице.

Есть сайты, у которых при перемещении мышкой вниз сайта появляется анимация, блоки сплывают, появляются.

Самый простой способ это установить плагин animate.css посмотреть всю анимацию плагина можно на сайте animate.css.

Второй плагин waypoints, он нужен для того, чтобы при скролле мышкой появлялась анимация.

Плагин можно скачать в проект средством bower.

Команда bower i waypoints.

Подключим плагины к проекту.

  1. Animate.min.css в файле libs.sass.
  2. jquery.waypoints.min.js в gulpfile.js у чистого шаблона.

Подключим плагины к проекту animate.css

Зададим структуру в index.html для animate

Сделаем три секции section.

Внутри расположим три заголовка h1,h2 и h3 и по одному диву с классом box.

Добавим каждому заголовку классы и у одного, например h2 пропишем h2 animated zoomInUp.

Сохраним и проверим в браузере, анимация уже будет у данного заголовка.

Код в index.html.

Добавим стили в main.sass для section и box.

Для удобства можно задавать анимацию через скрипт common.js.

Добавим анимацию h1, h3 и box. $(.h1).addClass (animated rollIn)

Все анимации animate.css.

Делаем задержку анимации.

  1. Свойство в css -vendor-animation-duration: 3s означает сколько анимация будет длиться, зададим классу box три секунды и видим в браузере анимация стала плавнее.
  2. Свойство -vendor-animation-delay: 2s делает задержку появления анимации. Добавим классу box и видим вначале появляется заголовок, потом через две секунды прямоугольник box.

Делаем задержку анимации animate.css

Комментариев нет