На одностраничных сайтах, они же лендинги, стало модно и современно использовать анимацию при прокрутке страницы. И это действительно выглядит эффектно и динамично, когда веб-элементы движутся в такт со скроллингом страницы. Я уже писал пару обзоров на такую тему (тут и тут), но везде было по одному варианту.
Сейчас же хочу поделиться небольшой подборкой из 5-ти плагинов JS, с помощью которых можно реализовать анимация элементов при прокрутке страницы. С подключением плагином проблем быть не должно: всё по стандарту. Ну, то есть, вставляете код в HEDAR или FOOTER, а дальше подставляете нужные классы к нужному элементу. Ниже на примере всё будет ясно.
Анимация Landing Page. Скроллинг
Хочу подчеркнуть, что порядок публикации плагинов, не означает рейтинг их качества. Все они по-своему отличные. Вам просто остаётся сделать выбор.
Skroll-master
JavaScript библиотека с 17 эффектами анимации, применимы для любых элементов на веб-странице. По умолчанию анимация при прокрутке страницы отключена для мобильных устройств. Что очень хорошо, но при желании можно включить.
Подключение
<script src="../src/skroll.js" type="text/javascript"></script> <script> var skroll = new Skroll() .add(".header",{ animation:"zoomIn", duration:600 }) .add(".anim1",{ animation:"fadeInUp", delay:120, duration:600, wait:250 }) .add(".anim2",{ animation:"flipInX", delay:120, duration:750 }) .add(".anim3",{ animation:"rotateLeftIn", delay:100, duration:750 }) .add(".anim4",{ animation:"slideInLeft", delay:80, duration:800 }) .add(".anim5",{ animation:"growInLeft", delay:80, duration:500, easing:"cubic-bezier(0.37, 0.27, 0.24, 1.26)" }) .add(".anim6",{ animation:"growInRight", delay:80, duration:500, easing:"cubic-bezier(0.37, 0.27, 0.24, 1.26)", }) .addAnimation("spinIn",{ start:function(el){ el.style["transform"] = "rotate(-360deg) scale(.2,.2)"; el.style["transform-origin"] ="50% 50%"; el.style["opacity"] = 0; }, end:function(el){ el.style["transform"] = "rotate(0deg) scale(1,1)"; el.style["opacity"] = 1; } }) .add(".anim7",{ animation:"spinIn", delay:80, duration:500, easing:"cubic-bezier(0.37, 0.27, 0.24, 1.26)" }) .add(".anim8",{ animation:"fadeInDown", delay:75, duration:150, triggerBottom:1, easing:"cubic-bezier(0.37, 0.27, 0.24, 1.26)" }) .init(); </script>
HTML
<div class="container"> <div class="box fw header"> <h1>Skroll.js</h1> </div> <div class="box w3 anim1"></div> <div class="box w3 anim1"></div> <div class="box w3 anim1"></div> <div class="box anim2 green"></div> <div class="box anim2 green"></div> <div class="box anim2 green"></div> <div class="box anim2 green"></div> <div class="box anim2 green"></div> <div class="box w4 anim3"></div> <div class="box w4 anim3"></div> <div class="box w4 anim3"></div> <div class="box w4 anim3"></div> <div class="box w4 anim3"></div> <div class="box w4 anim3"></div> <div class="box w4 anim3"></div> <div class="box w4 anim3"></div> <div class="box w2 anim4 yellow h2"></div> <div class="box w2 anim4 yellow h2"></div> <div class="box w4 anim5"></div> <div class="box w4 anim5"></div> <div class="box w4 anim5"></div> <div class="box w4 anim5"></div> <div class="box w4 anim6 blue"></div> <div class="box w4 anim6 blue"></div> <div class="box w4 anim6 blue"></div> <div class="box w4 anim6 blue"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 anim7 violet"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> <div class="box w5 h5 anim8 grey"></div> </div>
ScrollTrigger-master
Лёгкий и эффектный JS-плагин. Основное использование – запуск классов на основе текущей позиции прокрутки. Можно сказать, полное пользовательское настраивание. К примеру, когда элемент попадает в область просмотра, затемните его или задайте смещение.
Подключение
<script src="js/ScrollTrigger.min.js"></script> <script> window.counter = function() { // this refers to the html element with the data-scroll-showCallback tag var span = this.querySelector('span'); var current = parseInt(span.textContent); span.textContent = current + 1; }; document.addEventListener('DOMContentLoaded', function(){ ScrollTrigger.init(); }); </script>
HTML
<div class="block"> <h1 data-scroll="toggle(.scaleUpIn, .scaleUpOut) addHeight" class="title">Text title<span></span></h1> <h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">Add scroll based animations to your site with ease.</h2> <svg viewBox="0 0 60 60"> <path d="M52.254 18.327c0.816-0.804 2.127-0.804 2.937 0s0.813 2.103 0 2.907l-23.724 23.49c-0.81 0.804-2.121 0.804-2.937 0l-23.724-23.49c-0.81-0.804-0.81-2.103 0-2.907 0.813-0.804 2.127-0.804 2.937 0l22.257 21.423 22.254-21.423z"></path> </svg> </div> <div class="block"> <h1 data-scroll="toggle(.fromTopIn, .fromTopOut) addHeight">CSS Animations</h1> <h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">All animations are triggered by classes, so you can take advantage of the power that CSS3 animations give you.</h2> </div> <div class="block"> <h1 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">Vanilla JS</h1> <h2 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">It's written in vanilla javascript, so you can use it with any framework.</h2> </div> <div class="block"> <h1 data-scroll="toggle(.scaleDownIn, .scaleDownOut) addHeight">Request Animation Frame</h1> <h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">It uses the window.requestAnimationFrame method so it doesn't jack the users scroll. Animations are triggered when the browser is ready for it.</h2> </div> <div class="block"> <h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">Simple syntax</h1> <h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">You define the options inside the HTML attribute, so after you have initialised the ScrollTrigger you don't have to touch JavaScript again.</h2> </div> <div class="block"> <h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">Custom<span></span>izable</h1> <h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">ScrollTrigger offers a range of options, from calling custom JavaScript functions to defining custom offsets and classes.</h2> <h3 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight" data-scroll-showCallback="counter">You scrolled past this block <span>0</span> times.</h3> </div> <div class="block"> <h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight once">Versatile</h1> <h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight once">ScrollTrigger supports vertical and horizontal scrolling, check out the horizontal demo.</h2> <h3 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight once">This block only animates once.</h3> </div>
CSS
.fromTopIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromTopOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,-10px); opacity: 0.0; } .fromBottomIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromBottomOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,10px); opacity: 0.0; } .fromLeftIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromLeftOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(-10px,0); opacity: 0.0; } .fromRightIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromRightOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(10px, 0); opacity: 0.0; } .scaleUpIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.0,1.0); opacity: 1.0; } .scaleUpOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.3,1.3); opacity: 0.0; } .scaleDownIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.0,1.0); opacity: 1.0; } .scaleDownOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(0.7,0.7); opacity: 0.0; }
WOW-master
Этот плагин работает со всей известной библиотекой анимации Animate.css. Выше есть ссылка на плагин для WordPress, который также работает на основе этой библиотеке. Она в себе содержит множество эффектов анимации, что, безусловно, есть из чего выбрать.
Подключение
<link rel="stylesheet" type="text/css" href="css/animate.css" /> <script src="dist/wow.min.js"></script> <script> new WOW().init(); </script>
HTML
<div class="row"> <div data-wow-delay="0.5s" class="span3 wow rollIn"> <p class="circle bg-green">such easy</p> </div> <div data-wow-delay="0.5s" class="span3 wow bounceInDown center"><img src="img/1.png" height="200" class="wow"></div> <div data-wow-delay="0.5s" class="span3 wow lightSpeedIn"> <p class="circle bg-yellow">very JS </p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="img/8.png" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow pulse"> <p class="circle bg-blue">WOW </p> </div> <div class="span3 wow bounceInRight center"><img src="img/2.png" height="200"></div> </div> <div class="row"> <div class="span3 wow bounceInLeft"> <p class="circle bg-red">no jquery</p> </div> <div class="span3 wow flipInX center"><img src="img/3.png" height="200"></div> <div class="span3 wow bounceInRight"> <p class="circle bg-purple">many anims </p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="img/4.png" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow shake"> <p class="circle bg-yellow">aint joke</p> </div> <div data-wow-iteration="2" class="span3 wow swing center"> <img src="img/5.png" height="200"></div> </div> <div class="row"> <div class="span3 wow rollIn"> <p class="circle bg-purple">how small</p> </div> <div data-wow-delay="0.5s" class="span3 wow bounceInUp center"><img src="img/6.png" height="200"></div> <div data-wow-delay="0.5s" data-wow-duration="0.15s" class="span3 wow lightSpeedIn"> <p class="circle bg-green">3 kb only </p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="img/3.png" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.25s" class="span3 wow pulse"> <p class="circle bg-blue">just scroll</p> </div> <div class="span3 wow lightSpeedIn center"><img src="img/7.png" height="200"></div> </div> <div class="row"> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow bounce"> <p class="circle bg-yellow">reveal now</p> </div> <div class="span3 wow bounceInUp center"><img src="img/8.png" height="200"></div> <div class="span3 wow bounceInRight"> <p class="circle bg-red">so impress</p> </div> </div> <div class="row"> <div class="span3 wow rollIn center"><img src="img/5.png" height="200"></div> <div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow flip"> <p class="circle bg-green">WOW</p> </div> <div class="span3 wow bounceInRight center"><img src="img/1.png" height="200"></div> </div> <div class="row"> <div data-wow-delay="0.5s" class="span3 wow rollIn"> <p class="circle bg-red">no jquery?!</p> </div> <div data-wow-delay="1s" class="span3 wow bounceInDown center"><img src="img/2.png" height="200"></div> <div data-wow-delay="1.5s" class="span3 wow bounceInRight"> <p class="circle bg-purple">that sucks! </p> </div> </div>
t-scroll-master
Библиотека анимации элементов при прокрутке странице состоящая из 45 эффектов. По сути, это уже повторение, но многое зависит от оптимизации, удобства использования. И этот плагин как раз очень прост и не вызывает нагрузки.
Подключение
<link type="text/css" rel="stylesheet" href="./public/theme/css/t-scroll.min.css"> <script type="text/javascript" src="./theme/js/t-scroll.min.js"></script> <script type="text/javascript"> Tu.t_scroll({ 't_element': '.title .slideDown', 't_duration': 0.1, 't_delay': 0.5 }) Tu.t_scroll({ 't_element': '.section-function .slideDown', 't_duration': 0.5, }) Tu.t_scroll({ 't_element': '.section-function .slideUp', 't_duration': 0.5, }) Tu.t_scroll({ 't_element': '.slideRight' }) Tu.t_scroll({ 't_element': '.slideLeft' }) </script>
HTML
<section class="section section-function"> <h2 class="section-title">Why Choose t-scroll</h2> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 slideDown" t_show="1"> <div class="box"> <div class="box-head"> <h3 class="title"> Fully Customisable </h3> </div> <div class="box-body"> Over 45 options. Easy for novice users and even more powerful for advanced developers. </div> </div> </div> <div class="col-sm-6 col-md-4 slideDown" t_show="2"> <div class="box box-es6"> <div class="box-head"> <h3 class="title"> ES6 / Bable </h3> </div> <div class="box-body"> t-scroll do not used jQuery. It's used ES6 </div> </div> </div> <div class="col-sm-6 col-md-4 slideDown" t_show="3"> <div class="box box-sass"> <div class="box-head"> <h3 class="title"> SASS / CSS3 </h3> </div> <div class="box-body"> t-scroll ships with vanilla Sass. Quickly get started with precompiled CSS or build on the source. </div> </div> </div> <div class="col-sm-6 col-md-4 slideUp" t_show="1"> <div class="box box-gulp"> <div class="box-head"> <h3 class="title"> Gulp </h3> </div> <div class="box-body"> t-scroll had is built by gulp </div> </div> </div> <div class="col-sm-6 col-md-4 slideUp" t_show="2"> <div class="box box-browser"> <div class="box-head"> <h3 class="title"> Browser support </h3> </div> <div class="box-body"> Cross browser compatible ( Internet Explorer 10+, Firefox, Safari, Opera, Chrome etc. ) </div> </div> </div> <div class="col-sm-6 col-md-4 slideUp" t_show="3"> <div class="box box-npm"> <div class="box-head"> <h3 class="title"> npm </h3> </div> <div class="box-body"> Setup t-scroll easily with node.js </div> </div> </div> </div> </div> </section>
delighters-master
Этот JS-плагин служит запуском CSS анимации. То есть он не содержит какую-то свою библиотеку эффектов. Он просто запускает любую написанную CSS анимацию тогда, когда этот элемент попадает в область просмотра браузера при скроллинге страницы. Естественно, добавляя атрибуты плагина к элементам, а также можно прописывать некие параметры.
Подключение
<script type="text/javascript" src="js/delighters.js.js"></script>
HTML
<section> <h2 data-delighter class="right">Features</h2> <ul data-delighter> <li>Declarative</li> <li>Flexible</li> <li>Light footprint</li> <li>Framework-agnostic</li> <li>Supports desktop, mobile & tablets</li> <li>Degrades gracefully to your default styling</li> </ul> </section>
CSS
.delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; } .delighter.right.started { transform:none; opacity:1; } .delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; } .delighter.started li { opacity: 1; transform: none; } .delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; } .delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; } .delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; } .delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; } .delighter.started li:nth-child(5) { transition: all .7s ease-out .9s; } .delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; } .delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }