Анимация элементов при прокрутке страницы. JS-плагины

Обновлено: Андрей jQuery & JavaScript

На одностраничных сайтах, они же лендинги, стало модно и современно использовать анимацию при прокрутке страницы. И это действительно выглядит эффектно и динамично, когда веб-элементы движутся в такт со скроллингом страницы. Я уже писал пару обзоров на такую тему (тут и тут), но везде было по одному варианту.

Сейчас же хочу поделиться небольшой подборкой из 5-ти плагинов JS, с помощью которых можно реализовать анимация элементов при прокрутке страницы. С подключением плагином проблем быть не должно: всё по стандарту. Ну, то есть, вставляете код в HEDAR или FOOTER, а дальше подставляете нужные классы к нужному элементу. Ниже на примере всё будет ясно.

Анимация Landing Page. Скроллинг

Хочу подчеркнуть, что порядок публикации плагинов, не означает рейтинг их качества. Все они по-своему отличные. Вам просто остаётся сделать выбор.

Skroll-master

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

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

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

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

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 &amp; 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; }
Читайте также:
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *