Создадим новую секцию у landing page с названием мои преимущества и добавим три иконку.
Установим у иконок анимацию css стилей с помощью библиотеки animate.css и скрипта, который будет вызывать анимацию относительно расположения иконки экрана монитора при скролле страницы мышкой вниз.
Как подключить анимацию блоков animate.css подробно тут.
В документе html у нас будет секция с идентификатором prem, у которой будет общий заголовок второго уровня h2 во всю ширину col-xs-12 и три колонки для каждого преимущества col-sm-4 с иконкой в теге img.
Класс у каждой иконки зададим свой для трех видов анимации и начала анимации на разных расстояниях от края экрана.
- animated anim1.
- animated anim2.
- animated anim3.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<section id="prem1"> </section> <section id="prem"> <div class="container"> <div class="row text-center"> <div class="col-xs-12"> <h2>Заголовок</h2> <div class="row"> <div class="col-sm-4"> <img src="img/p1.png" alt="" class="img-responsive center animated anim1"> <h3>Заголовок3</h3> <p>Далеко-далеко за словесными горами в стране, гласных и согласных.</p> </div> <div class="col-sm-4"> <img src="img/p2.png" alt="" class="img-responsive center animated anim2"> <h3>Заголовок3</h3> <p>Далеко-далеко за словесными горами в стране, гласных и согласных.</p> </div> <div class="col-sm-4"> <img src="img/p3.png" alt="" class="img-responsive center animated anim3"> <h3>Заголовок3</h3> <p>Далеко-далеко за словесными горами в стране, гласных и согласных.</p> </div> </div> </div> </div> </div> </section> <section id="prem2"> </section> |
Добавим стили css для анимации.
- Чтобы понять, что анимация у иконок отрабатывает при прокрутке страницы, добавим секцию с размером между ними min-height: 600px.
- Текст сделаем по центру у иконок и заголовков.
- Чтобы иконку сделаем по центру, воспользуемся свойством margin: 20px auto. Зададим размеры иконки и округлим border-radius: 50%. Добавим для красоты тень box-shadow: 0 0 50px rgba (126,114,164,0.8).
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 |
section min-height: 600px .text-center margin-top: 50px text-align: center .center margin: 20px auto width: 150px height: 150px border-radius: 50% box-shadow: 0 0 50px rgba(126,114,164,0.8) |
Секция мои преимущества в браузере.
Напишем скрипт для анимации картинок в common.js.
Сделаем скрипт, который будет искать элементы с классом $(.anim1) и добавляет класс $(this).addClass (wobble), который мы укажем из таблицы анимации css. wind + 200, добавляем количество пикселей, когда начнется анимация до верха страницы лендинга.
Код в common.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function() { $(window).scroll(function() { $('.anim1').each(function() { var imag = $(this).offset().top; var wind = $(window).scrollTop(); if (imag < wind + 200) { $(this).addClass('wobble'); } }); }); $(window).scroll(function() { $('.anim2').each(function() { var imag = $(this).offset().top; var wind = $(window).scrollTop(); if (imag < wind + 400) { $(this).addClass('bounce'); } }); }); $(window).scroll(function() { $('.anim3').each(function() { var imag = $(this).offset().top; var wind = $(window).scrollTop(); if (imag < wind + 300) { $(this).addClass('flipInY'); } }); }); }); |