• seguici su feed rss
  • seguici su twitter
  • seguici su linkedin
  • seguici su facebook
  • cerca

SEI GIA' REGISTRATO? EFFETTUA ADESSO IL LOGIN.



ricordami per 365 giorni

HAI DIMENTICATO LA PASSWORD? CLICCA QUI

NON SEI ANCORA REGISTRATO ? CLICCA QUI E REGISTRATI !

Come realizzare una pagina web con effetto Parallax in javascript

di :: 08 giugno 2022
Come realizzare una pagina web con effetto Parallax in javascript

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!

Documenti

Potrebbe interessarti

 
 
 
 
pay per script

Hai bisogno di uno script PHP personalizzato, di una particolare configurazione su Linux, di una gestione dei tuoi server Linux, o di una consulenza per il tuo progetto?

x

ATTENZIONE