Анимация элементов при скроллинге — Animate.css
Плавно всплывающие элементы при скроллинге страницы (прокрутке) очень популярны на одностраничных сайтах, где нужно эффектно представить продукт для посетителей. В качестве элементов может выступать текст или любой другой блок: изображение, список и т.д. И выглядит это действительно круто!
Для этого используем библиотеки Animate.css — анимация элементов, waypoints — упрощение отслеживание скролинга и jQuery (для корректной работы с waypoints используйте версию < 3!).
Подключаем jQuery (версия < 3), css файл для библиотеки Animate.css — https://daneden.github.io/animate.css/ и js файл для waypoints — https://imakewebthings.com/waypoints/. И после подключаем чистый js файл с любым именем (в примере это common.js).
|
1 2 3 4 5 |
<link href="css/animate.min.css" rel="stylesheet"> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/waypoints.min.js"></script> <script src="js/common.js"></script> |
Для примера страница будет содержать 3 экрана со своими разными элементами для анимации. На первом экране используем анимацию текста и изображение после загрузки страницы, а на остальных экранах при скроллинге.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <section class="block1"> <h1>Lorem, ipsum dolor.</h1> <img src="https://images.pexels.com/photos/127028/pexels-photo-127028.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" width="1000px" alt=""> </section> <section class="block2"> <ul> <li>Lorem, ipsum.</li> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li> </ul> </section> <section class="block3"> <div class="title">Lorem ipsum dolor sit.</div> <img src="https://images.pexels.com/photos/878979/pexels-photo-878979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" width="900px" alt=""> </section> </body> |
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 |
section { height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } body { background-color: #fff; color: #000;} .block2 li { height: 50px; } |
Виды анимаций Animate.css
Библиотека Animate.css предоставляет большой выбор видов анимаций: увеличение, перемещение, вращение и другие. Просмотреть их можно здесь: https://daneden.github.io/animate.css/
Всплывающий блок после загрузки страницы
Проще всего реализовать всплывающий блок сразу же после загрузки страницы. Для этого следует добавить в файл common.js:
|
1 |
$('.block1 img').addClass('animated rotateInUpLeft'); |
Где rotateInUpLeft — название анимации с сайта https://daneden.github.io/animate.css/
Если вы используете прелоадер (какая либо анимация до полной загрузки страницы), то следует добавить задержу для анимации необходимого элемента.
|
1 2 3 |
.block1 img { animation-delay: 2s } |
Всплывающий блок при скроллинге
Для использования анимации в момент скролла создадим функцию anim(name, type), где name — блок, а type — тип анимации, и будем вызывать ее с разными параметрами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('.block1 img').addClass('animated rotateInUpLeft'); $('.block1 h1').addClass('animated fadeInDown'); anim('.block2 ul li:first-child', 'fadeInLeft'); anim('.block2 ul li:nth-child(2)', 'fadeInLeft'); anim('.block2 ul li:nth-child(3)', 'fadeInLeft'); anim('.block3 .title', 'fadeInLeft'); anim('.block3 img', 'zoomInUp'); function anim(name, type) { $(name).css('opacity', 0); console.log("sss"); $(name).waypoint(function() { var typ = "animated " + type; $(name).addClass(typ); $(name).css('opacity', 1); }, { offset: '90%' }); } |
Чем меньше значение offset, тем ниже нужно будет проскролить для анимации блока.
Результат:
Возможно, вам будет интересно:
