Как сделать параллакс эффект: анимация элементов при скроллинге

Параллакс эффект для сайта может в значительной мере преобразовать его в нечто эффектно-современный стиль. Это придает внешнему виду ресурсу больший интерес и приятное визуальное составляющее.

Не хотелось бы вешать ярлыки или кого-то ущемлять, но чаще всего зарубежные ресурсы делаются в очень креативном образе, даже если они недружелюбные в плане юзабилити. И может даже создаваться впечатление, что такие сайты являются непросто ресурсом для посещения, а неким творческим искусством.

Немного отклонился от темы. Так вот. Я уже делал обзор на подобный плагин, который также позволяет сделать эффект параллакса. Но всегда есть различные плюсы и минусы. Возможно, этот плагин вам будет интересней или попроще.

basicScroll – эффект параллакса

Скачать Демо

Этот плагин позволяет изменять значение свойств CSS в зависимости от прокрутки страницы. Эффект будет работать на мобильных устройствах и на пк. Для того чтобы эффект работал, нам нужно в параметрах скрипта задать некий идентификатор, а затем с помощью var прописать его в желаемом свойстве. Смотрите на примере ниже.

HTML

<section id="post">
   <div class="container">
      <div class="row justify-content-center">
         <div class="col-lg-8 text-center">
            <h1 class="mt-5 mb-5 title-cent">Пример параллакс</h1>
         </div>
      </div>
      <div class="row">
         <div class="col-lg-10 mx-auto">
            <div class="scrollA mb-5"></div>
         </div>
         <div class="col-lg-10 mx-auto">
            <div class="scrollB mt-5"></div>
         </div>
         <div class="col-lg-4 mx-auto">
            <div class="scrollD mt-5"></div>
         </div>
         <div class="col-lg-4 mx-auto">
            <div class="scrollE mt-5"></div>
         </div>
         <div class="col-lg-4 mx-auto">
            <div class="scrollC mt-5"></div>
         </div>
      </div>
   </div>
</section>

Подключение

        <script src="basicScroll.min.js"></script>
        <script>

        const instanceA = basicScroll.create({
                elem: document.querySelector('.scrollA'),
                from: 'top-bottom',
                to: 'top-top',
                props: {
                        '--position': {
                                        from: '0px',
                                        to: '200px'
                                },
                        
                }
                
        })

        const instanceB = basicScroll.create({
                elem: document.querySelector('.scrollB'),
                from: 'top-bottom',
                to: 'top-top',
                props: {
                        '--positionc': {
                                        from: '0px',
                                        to: '300px'
                                },
                        '--opa': {
                                        from: '.99',
                                        to: '.01'
                                },
                        
                }
                
        })
        
        const rotateBox = basicScroll.create({
                  elem: document.querySelector('.scrollD'),
                  from: 'top-middle',
                  to: 'top-top',
                  props: {
                        '--r': {
                          from: '0',
                          to: '1turn'
                        }
                  }
                })
                
        const rotateBoxe = basicScroll.create({
                  elem: document.querySelector('.scrollE'),
                  from: 'middle-bottom',
                  to: 'top-top',
                  props: {
                        '--re': {
                          from: '0',
                          to: '2turn'
                        }
                  }
                })
                
        const rotateBoxc = basicScroll.create({
                  elem: document.querySelector('.scrollC'),
                  from: 'top-middle',
                  to: 'top-top',
                  props: {
                        '--rc': {
                          from: '0',
                          to: '3turn'
                        }
                  }
                })

        instanceB.start()
        instanceA.start()
        rotateBox.start()
        rotateBoxe.start()
        rotateBoxc.start()
</script>

CSS

body {
        background: #000;
        height: 300vh;
}

.scrollA, .scrollB, .scrollE,
.scrollD, .scrollC{
        background: #FF0033;
        height: 300px;
        border-radius: 5px;
        width: 100%;
}

.scrollA {
        transform: translateY(var(--position));
}

.scrollB {
        transform: translateY(var(--positionc));
        opacity: var(--opa);
}

.scrollD {
        transform: rotate(var(--r));
}

.scrollE {
        transform: rotate(var(--re));
}

.scrollC {
        transform: rotate(var(--rc));
}