Ho cercato abbastanza in giro tanto da incazzarmi nel non trovare una guida teorica/pratica veloce per capire questa meravigliosa tecnica.
Il parallax è una tecnica che negli ultimi tempi si sta espandendo molto, non riesco nemmeno a contare tutti i siti che la usano. Un classico esempio è il 404 di github che utilizza un parallax, non sullo scroll (come vi esporrò in questa guida) ma sul movimento del mouse (Il concetto è lo stesso).
Il termine deriva dal greco παράλλαξις (paràllaxis), che significava originariamente accavallamento
So che non vi interessa ma mi sembrava carino copiarlo da wikipedia scriverlo.
E’ veramente semplice; questo effetto si basa sul “rallentare il background mentre scrolliamo” quindi basterà dare un evento onScroll con all’interno qualche operazioncina che faccia diminuire il background-position nel mentre scrolliamo.
Lo stesso accade se abbiamo più wrapper, basterà solamente diminuire il background-position di ognuno scalando dal primo all’ultimo o vice versa.
Eheh, è davvero molto molto semplice, ma un esempio è bene farlo lo stesso.
Prendiamo la nostra testata, le nuvolette, se qualcuno di voi l’avesse notato c’è un leggerissimo parallax, giusto per dare un tocco di dinamicità al sito.
home.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hParallax</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="main"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="main.js"></script> </body> </html>
.main sarà il wrapper per il nostro parallax, passiamo al semplice CSS di base:
main.css
body {
height: 2000px
}
.main {
width: 100%;
min-height: 300px;
margin-top: 10em;
background-image: url('https://aitch.me/wp-content/themes/aitchWP/img/bgi.png');
background-repeat: no-repeat;
}
E’ solo un CSS di esempio per una stupida pagina di esempio, al wrapper assegniamo un background statico.
Ma vediamo il vero core:
main.js
$(document).ready(function() {
$(window).scroll(function() {
$('.main').css('background-position', '0 -' + ($(window).scrollTop() / 2) + 'px');
});
});
Questo è il centro del nostro script: il background del wrapper ad ogni nostro scroll effettuerà un movimento contrario lungo la metà di quanto abbiamo scrollato. Semplice ma efficace.
Potete vedere una veloce demo su codepen QUI
Questa stupida guida è davvermo MOLTO basilare, ma ho voluto farla per la semplice ragione di far capire a tutti questo effetto nel più semplice dei modi.
