Smooth multi-capa Parallax scroll efecto en Vanilla JavaScript

Vista prévia

Descripción

Un efecto de desplazamiento de paralaje suave y compatible con dispositivos móviles integrado con las transformaciones Vanilla JavaScript y CSS3 2D.

Funcionamiento

Cree varias capas en las que desee aplicar el efecto de desplazamiento de paralaje.

<header class="hero">

<div class="back-el"></div>

<div class="main-el"></div>

<div class="fore-el"></div>
</header>

Añada imágenes de fondo a las capas.

.hero {

height: 600px;

position: relative;

background: url(bg.jpg);

background-size: contain;

background-position: top center;

background-attachment: fixed;

overflow: hidden;
}

.main-el {

height: 100px;

width: 100%;

background-image: url(main.jpg);

background-repeat: no-repeat;

background-position: center;

position: absolute;

top: 50%;

margin-top: -50px;
}

.fore-el {

background-color: transparantize(pink, 0.5);

background-image: url(fore.png);

height: 733px;

width: 960px;

background-repeat: no-repeat;

background-position: right bottom;

position: absolute;

left: 50%;

margin-left: -480px;

top: 380px;
}

.back-el {

width: 960px;

height: 298px;

background-image: url(back.png);

background-repeat: no-repeat;

background-position: top left;

position: absolute;

left: 50%;;

margin-left: -480px;
}

El JavaScript para habilitar el efecto de desplazamiento de paralaje usando las transformaciones 2D de CSS3.

window.addEventListener('scroll', scrollFunc);

function scrollFunc() {

var windowScroll = this.scrollY;


 var $logo = document.getElementsByClassName('main')[0];

$logo.style.transform = 'translateY(' + windowScroll/2 + '%)';


var $backBird = document.getElementsByClassName('back-el')[0];

$backBird.style.transform = 'translateY(' + windowScroll/4 + '%)';


var $foreBird = document.getElementsByClassName('fore-el')[0];

$foreBird.style.transform = 'translateY(-' + windowScroll/100 + '%)';

}