Рассмотрим анимацию блоков при скроле на странице.
Есть сайты, у которых при перемещении мышкой вниз сайта появляется анимация, блоки сплывают, появляются.
Самый простой способ это установить плагин animate.css посмотреть всю анимацию плагина можно на сайте animate.css.
Второй плагин waypoints, он нужен для того, чтобы при скролле мышкой появлялась анимация.
Плагин можно скачать в проект средством bower.
Команда bower i waypoints.
Содержание статьи
Подключим плагины к проекту.
- Animate.min.css в файле libs.sass.
- jquery.waypoints.min.js в gulpfile.js у чистого шаблона.
Зададим структуру в index.html для animate
Сделаем три секции section.
Внутри расположим три заголовка h1,h2 и h3 и по одному диву с классом box.
Добавим каждому заголовку классы и у одного, например h2 пропишем h2 animated zoomInUp.
Сохраним и проверим в браузере, анимация уже будет у данного заголовка.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<section class="s1"> <h1 class="h1">Зоголовок h1</h1> <div class="box"></div> </section> <section class="s2"> <h2 class="h2 animated zoomInUp">Зоголовок h2</h2> <div class="box"></div> </section> <section class="s3"> <h3 class="h3">Зоголовок h3</h3> <div class="box"></div> </section> |
Добавим стили в main.sass для section и box.
|
1 2 3 4 5 6 7 |
section min-height: 500px border-bottom: 1px solid #c4c4c4 .box background-color: #c7c7c7 width: 250px height: 200px |
Для удобства можно задавать анимацию через скрипт common.js.
Добавим анимацию h1, h3 и box. $(.h1).addClass (animated rollIn)
|
1 2 3 4 5 |
$(function() { $('.h1').addClass('animated rollIn'); $('.h3').addClass('animated slideOutUp'); $('.box').addClass('animated flipOutY'); }); |
Все анимации animate.css.
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
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 jackInTheBox rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp |
Делаем задержку анимации.
- Свойство в css -vendor-animation-duration: 3s означает сколько анимация будет длиться, зададим классу box три секунды и видим в браузере анимация стала плавнее.
- Свойство -vendor-animation-delay: 2s делает задержку появления анимации. Добавим классу box и видим вначале появляется заголовок, потом через две секунды прямоугольник box.
