Come realizzare una pagina web con effetto Parallax in javascript
di Giulio di Bari
::
08 giugno 2022
In un articolo precedente ti ho mostrato come realizzare un pagine con effetto parallax utilizzando solo i css.
In parallax, lo sfondo, presente in vari blocchi di contenuto, si sposta molto più lentamente rispetto allo scorrimento della pagina, creando così un effetto molto particolare.
Oggi ti illusto un esempio, che ho trovato in questi sito, di come ottenere questo effetto utilizzando una libreria javascript e jQuery.
Guarda l'effetto che otterrai in questo video. Dopo ti illustrerò il codice html.
Per ottenere questa pagina, viene utilizzata anche la libreria Bootstrap, ma volendo, se siete esperti di css, potreste farne a meno.
Nella root del nostro progetto creiamo la index.html, inoltre, visto che amiamo l'ordine, creiamo le seguenti directory
- css: al cui interno inseriamo i file "style.css" che definisce gli stili della pagina, ed il file "bootstrap.css" (o il file "bootstrap.min.css" se volete usare il file compresso)
- js: al cui interno inseriamo la libreria "parallax.js" (o la "parallax.min.js" se volete usare il file compresso), e il file "bootstrap.js" (o la "bootstrap.min.js" se volete usare il file compresso)
- img: al cui interno inseriamo le quattro immagini della nostra pagina
Bene, adesso vediamo il codice della index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Come creare l'effetto parallax con la libreria Parallax.js</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
$('#ios-notice').removeClass('hidden');
$('.parallax-container').height( $(window).height() * 0.5 | 0 );
} else {
$(window).resize(function(){
var parallaxHeight = Math.max($(window).height() * 0.7, 200) | 0;
$('.parallax-container').height(parallaxHeight);
}).trigger('resize');
}
});
</script>
<script src="js/parallax.min.js"></script>
</head>
<body>
<section>
<div class="container">
<div id="ios-notice" class="alert alert-info hidden"><p><strong>Notice:</strong> Hello mobile user. Unfortunately, this parallax effect is not reliably achieved on mobile devices, so all you will see on this demo page are static backgrounds. Please visit this page on a desktop browser to see its full effect.</p></div>
<h1>Esempio di effetto Parallax</small></h1>
<p>Utilizzando il parallax, lo sfondo presente nei vari blocchi di contenuto si sposta molto più lentamente rispetto allo scorrimento della pagina, creando così un effetto molto particolare.</p>
</div>
</section>
<div class="parallax-container" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="img/stellar-spire-eagle-nebula-1400x900.jpg" data-natural-width="1400" data-natural-height="900"></div>
<section>
<div class="container">
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
</div>
</section>
<div class="parallax-container" data-parallax="scroll" data-bleed="10" data-speed="0.2" data-image-src="img/helix-nebula-1400x1400.jpg" data-natural-width="1400" data-natural-height="1400"></div>
<section>
<div class="container">
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
</div>
</section>
<div class="parallax-container" data-parallax="scroll" data-bleed="10" data-image-src="img/spiral-galaxy-1400x900.jpg" data-natural-width="1400" data-natural-height="900"></div>
<div class="parallax-container" data-parallax="scroll" data-bleed="10" data-image-src="img/reflection-nebula-750x763.jpg" data-natural-width="750" data-natural-height="763"></div>
<footer>
<div class="container">
Prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova
</div>
</footer>
</body>
</html>Nella <head> ci sono i link ai vari file css e js, e il link alla libreria jQuery (utilizziamo la CDN di Google).
Nel <body> troviamo alcuni <div>
- <div> con classe "container", dove inseriamo i blocchi di testo
- <div> con classe "parallax-container" che contengono le immagini su cui agirà il parallax
Come vedi il codice è semplice, non devi fare altro. La libreria parallax.js si occuperà di iniettare il codice necessario per ottenere l'effetto parallax.
Nota: questo script non funziona su device mobili. Nell'esempio è presente uno script nella <head> che rimuove la classe "hidden" presente del div che ti riporto di seguito e che quindi ne visualizza il suo contenuto: "l'effetto parallax non è usabile su dispositivi mobili".
<div id="ios-notice" class="alert alert-info hidden">
<p><strong>Notice:</strong> Hello mobile user.
Unfortunately, this parallax effect is not reliably achieved on mobile devices, so all you will see on this demo page are static backgrounds.
Please visit this page on a desktop browser to see its full effect.
</p></div>Spero di esserti stato di auto. A fondo articolo potrai scaricare il codice completo di questo esempio.
Stay tuned!
