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

Для секции мои преимущества делаем анимацию css


делаем анимацию css

Создадим новую секцию у landing page с названием мои преимущества и добавим три иконку.

Установим у иконок анимацию css стилей с помощью библиотеки animate.css и скрипта, который будет вызывать анимацию относительно расположения иконки экрана монитора при скролле страницы мышкой вниз.

Как подключить анимацию блоков animate.css подробно тут.

В документе html у нас будет секция с идентификатором prem, у которой будет общий заголовок второго уровня h2 во всю ширину col-xs-12 и три колонки для каждого преимущества col-sm-4 с иконкой в теге img.

Класс у каждой иконки зададим свой для трех видов анимации и начала анимации на разных расстояниях от края экрана.

  1. animated anim1.
  2. animated anim2.
  3. animated anim3.

Код в index.html.

Добавим стили css для анимации.

  1. Чтобы понять, что анимация у иконок отрабатывает при прокрутке страницы, добавим секцию с размером между ними min-height: 600px.
  2. Текст сделаем по центру у иконок и заголовков.
  3. Чтобы иконку сделаем по центру, воспользуемся свойством margin: 20px auto. Зададим размеры иконки и округлим border-radius: 50%. Добавим для красоты тень box-shadow: 0 0 50px rgba (126,114,164,0.8).

Код в main.sass.

Секция мои преимущества в браузере.

Добавим стили css для анимации

Напишем скрипт для анимации картинок в common.js.

Сделаем скрипт, который будет искать элементы с классом $(.anim1) и добавляет класс $(this).addClass (wobble), который мы укажем из таблицы анимации css. wind + 200, добавляем количество пикселей, когда начнется анимация до верха страницы лендинга.

Код в common.js.

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

Комментарии запрещены