Tecniche JavaScript

Per creare l'effetto Parallax, il metodo più popolare utilizza JavaScript. Da questo capitolo in poi discuteremo i concetti di JavaScript e alcune delle librerie usate per ottenere lo scorrimento Parallax.

L'utilizzo di JavaScript puro ha senso per mantenere ottimali le prestazioni del sito web. Ci sono molti altri vantaggi nell'usare le librerie da un aspetto delle prestazioni. Tuttavia, per comprendere meglio l'organizzazione del codice, inizieremo con l'implementazione della parallasse JavaScript pura. Fatto divertente, a volte viene anche chiamato JavaScript purovanilla JavaScript.

Parallax Scrolling utilizzando Pure JavaScript

Innanzitutto, crea il file HTML principale con il codice mostrato di seguito. La pagina HTML sarà composta solo da quattro titoli di testo.

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
      <script src = "myscripts.js"></script>  
   </head>  
   
   <body>  
      <section class = "parallax">  
         <h1>The First Scroll</h1>
      </section>       
      
      <section class = "parallax">  
         <h1>The Second One</h1>
      </section>       
      
      <section class = "parallax">  
         <h1>GoingOn !!</h1>
      </section>       
      
      <section class = "parallax">  
         <h1>And we've reached the bottom!!</h1>
      </section>  
   </body>
   
</html>

Osserva che nella riga numero 4, per questo esempio, stiamo usando myscripts.js file che verrà archiviato nella stessa cartella del file HTML e del file CSS.

Ora, prepariamo il nostro file CSS come mostrato di seguito.

header {  
   height: 4em;  
   background: #845;  
}  

.parallax {  
   background-repeat: no-repeat;  
   background-size: cover;  
}
  
.parallax h1 {  
   text-align: center;  
   margin: 0;  
   font-size: 2.5em;  
   letter-spacing: .2em;  
   color: red;    
   padding: 10rem 0;  
   mix-blend-mode: exclusion;  
} 
 
.parallax:nth-of-type(1) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
}  

.parallax:nth-of-type(1) h1 {  
   padding: 15rem 0;  
}  

.parallax:nth-of-type(2) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
} 
 
.parallax:nth-of-type(2) h1 {  
   padding: 12rem 0;  
} 
 
.parallax:nth-of-type(3) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
}  

.parallax:nth-of-type(4) {  
   background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);  
}

Ora arriva la parte JavaScript, crea un file nel blocco note e salvalo come myscripts.js .

function $$(selector, context) {  
   context = context || document;  
   var elements = context.querySelectorAll(selector);  
   return Array.prototype.slice.call(elements);  
}   
window.addEventListener("scroll", function() {  
   var scrolledHeight= window.pageYOffset;  
   
   $$(".parallax").forEach(function(el,index,array) {   
      var limit = el.offsetTop+ el.offsetHeight;  
      
      if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {  
         el.style.backgroundPositionY=  (scrolledHeight - el.offsetTop) /1.5+ "px";  
      } else {  
         el.style.backgroundPositionY=  "0";  
      }  
   });  
});

Analisi del codice

Analizziamo il codice JavaScript.

Codice da line number 1 to 4 rappresenta la funzione di supporto.

Nella riga 6, selezioniamo il nostro elemento di parallasse e aggiungiamo scrollevento alla finestra. Per determinare quanta area viene fatta scorrere, stiamo usandoscrolledHeightproprietà. Mentre lo schermo scorre verso il basso,backgroundPositionY viene aggiornato per l'elemento di parallasse.

Per rallentare l'effetto di parallasse, abbiamo diviso per 1,5, questo numero può essere modificato in qualsiasi numero desideri.

Ora sarai in grado di vedere la pagina scorrere verso il basso come previsto nello screenshot sottostante.

Utilizzo della libreria JavaScript ScrollMagic

Come discusso nella sezione precedente, mentre possiamo usare JavaScript puro per creare un effetto di parallasse, ci sono alcune potenti librerie JavaScript che miglioreranno l'esperienza dell'utente. ScrollMagic è una di queste librerie per la creazione di interazioni di scorrimento con parallasse.

Discutiamo di più su questo con l'aiuto di un esempio come indicato di seguito:

Note- In questo esempio, per mantenerlo semplice, avremo il CSS memorizzato nel file HTML. Inoltre, il codice JavaScript sarà presente nello stesso documento. In poche parole, creeremo un solo file HTML e avrà le librerie ScrollMagic referenziate insieme al CSS richiesto.

<html>  
   <head>  
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>  
   </head>  
   
   <body>   
      <style type = "text/css">  
         .parallaxParent {  
            height: 100vh;  
            overflow: hidden;  
         }  
         .parallaxParent > * {  
            height: 200%;  
            position: relative;  
            top: -100%;  
         }  
      </style>  
      <div class = "spacing0"></div>  
      
      <div id = "parallax1" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      
      <div class = "spacing1">  
         <div style = "background-color:cyan">  
         <p>These are bricks</p>  
         </div>  
      </div>
      
      <div class = "spacing0"></div>  
      <div id="parallax2" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      
      <div class = "spacing1">  
         <div style = "background-color:yellow">  
            <p>Some More Bricks</p>  
         </div>  
      </div>  
      
      <div class = "spacing0"></div>  
      <div id = "parallax3" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      <div class = "spacing2"></div>  
      
      <script>  
         // init controller  
         var controller = new ScrollMagic.Controller({
            globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});  

         // build scenes  
         new ScrollMagic.Scene({triggerElement: "#parallax1"})  
            .setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})  
            .addIndicators()  
            .addTo(controller);  

         new ScrollMagic.Scene({triggerElement: "#parallax2"})  
            .setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})  
            .addIndicators()  
            .addTo(controller);  

         new ScrollMagic.Scene({triggerElement: "#parallax3"})  
            .setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})  
            .addIndicators()  
            .addTo(controller);  
      </script>  
   </body>
   
</html>

Come mostrato nel codice sopra, abbiamo richiesto riferimenti a librerie JavaScript da line 3 to 6. Il codice CSS è specificato dalla riga 9 alla 19.

Rete di distribuzione dei contenuti

I riferimenti agli script dalla riga 3 alla 6 puntano agli URL ScrollMagic Content Delivery Network (CDN). L'utilizzo di una CDN ha senso nello sviluppo di siti Web moderni, poiché puoi caricare le librerie richieste senza rallentare il tuo sito Web.

Se sono necessarie personalizzazioni nelle librerie, è necessario ospitare le librerie sui rispettivi server per utilizzare questi effetti. Se stai utilizzando le funzionalità di base di una libreria, è efficiente utilizzare l'URL CDN.

Il codice HTML sopra mostra un'immagine separata da 2 divisioni. La prima divisione appare con un'intestazione -These are bricks e la seconda divisione appare con - Some More Bricks.

Si noti che nel codice CSS dalla riga 9 alla 19, stiamo specificando solo la posizione e lo stile per il rispettivo div di parallasse.

Il lavoro per creare questo morbido parallasse sceneè fatto dalla libreria ScrollMagic. Se fai riferimento al codice dello script dalla riga 43 alla 62, ScrollMagiccontroller viene invocato e un file scene è creato.

Le scene guidano il DOM per creare un effetto di parallasse quando l'80% dello schermo è occupato. JavaScript viene utilizzato per comprendere il trigger di scorrimento. Di conseguenza, ciò che ottieni è un'esperienza fluttuante su questa pagina.

Note - Considerando l'immagine sopra come un'immagine GIF, non potrai osservare l'effetto uniforme delle divisioni del testo.

Attiva animazioni

Le possibilità di creare un'esperienza utente varia sono infinite con ScrollMagic Library. Osserva gli snippet di codice riportati di seguito per attivare le animazioni durante lo scorrimento.

Nota che per questo hai bisogno di due file * meno; un file HTML e un file CSS.

Crea file HTML con il codice mostrato di seguito -

<html>  
   <head>  
      <link rel = "stylesheet" href = "style.css">  
   
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>  
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>  
   </head>  
   
   <body>   
      <div class = "spacing0"></div>  
      <div id = "parallax1" class = "parallaxParent">  
         <div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>  
      </div>  
      
      <div style = "height:450px;"></div>  
      <div id = "square" class = "square">This is it!</div>  
      <div style = "height:450px;"></div>  
      
      <script>  
         var controller = new ScrollMagic.Controller();  
         var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})  
            .setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})  
            .addTo(controller);   
         
         var scene = new ScrollMagic.Scene({triggerElement: '.square'})  
            .setClassToggle('.square', 'show')  
            .addTo(controller);  
      </script>  
   </body>
   
</html>

Ora, crea un file CSS con il seguente codice al suo interno.

.square {  
   background: aqua;  
   margin: 0 auto;  
   display: block;  
   padding: 40px 0;  
   text-align: center;  
   color: #000;  
   font-size: 40px;  
   font-weight: bold;  
   opacity: 0;  
   transition: .3s;  
   width: 0%;  
}  
.square.show{  
   opacity: 1;  
   width: 100%;  
}  
.parallaxParent {  
   height: 100vh;  
   overflow: hidden;  
}  
.parallaxParent > * {  
   height: 200%;  
   position: relative;  
   top: -100%;  
}

Analisi del codice

Facendo riferimento al codice HTML, il codice ScrollMagic inizia da line 17 e continua fino a line 25. In questa sezione, creiamo due scene ScrollMagic. La prima scena è per l'immagine del mattone e l'altra è per l'animazione del banner.

Come specificato in setTween funzione attiva line 20, quando l'azione di scorrimento avviene al 40% delle dimensioni dello schermo, inizia la scena successiva che mostra il banner Questo è tutto!

L'opacità del div con id - square è controllato nel file CSS su line 10 e line 15.

Di conseguenza, vedrai l'animazione di seguito nella pagina.

Scorrimento orizzontale

Possiamo anche applicare lo scorrimento della parallasse e ottenere uno scorrimento orizzontale. La libreria ScrollMagic può essere utilizzata per creare un effetto di scorrimento orizzontale. Vedi il codice qui sotto.

Sebbene il codice sia diretto per creare un effetto di scorrimento orizzontale, avremo bisogno del riferimento jquery per ottenere il movimento orizzontale degli schermi. I dettagli di jQuery sono forniti nel prossimo capitolo, per ora basta seguire il codice come indicato di seguito.

Creeremo tre file separati: file HTML per il codice principale, file CSS per gli stili e file JS per le chiamate di funzione ScrollMagic.

Ecco il codice per il documento HTML.

<html>  
   <head>  
      <link rel = "stylesheet" href = "style.css">  
   </head>  
   
   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  
   <script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>  
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script> 
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script> 
   <script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>  
   <script src = "animation.js"></script>  
   
   <body>  
      <div class = "wrapper" id = "js-wrapper">  
         <div class = "sections" id = "js-slideContainer">  
            <section class = "section">  
               <span class = "section__title" id = "title1">Scroll Once</span>  
               <span id = "trigger--title1"></span>  
            </section>  
            
            <section class = "section">  
               <span class = "section__title" id = "title2">Do It Again</span>  
               <span id = "trigger--title2"></span>  
            </section>  
            
            <section class = "section">  
            <span class = "section__title" id = "title3">Thank You!</span>  
            <span id = "trigger--title3"></span>  
         </div>  
      </div>  
   </body> 
   
</html>

Osserva che abbiamo tre sezioni, che appariranno dopo lo scorrimento. Le tre sezioni sono denotate dagli id ​​titolo1, titolo2 e titolo3 rispettivamente alle righe 15, 19 e 23.

Il codice per il documento CSS è fornito di seguito:

body {  
   font-family: serif;  
}  

body, html {  
   height: 100%;  
} 
 
.wrapper {  
   width: 100%;  
   height: 100%; 
   overflow: hidden;  
}  

.section {  
   height: 100%;  
   width: calc( 100% / 5 );  
   float: left;  
   position: relative;  
}  

.section:nth-child(1) {  
   background: green;  
}  

.section:nth-child(2) {  
   background: orange;  
}  

.section:nth-child(3) {  
   background: red;  
}  

.sections {  
   width: 500%;  
   height: 100%;  
}  

.section__title {  
   position: absolute;  
   top: 50%;  
   left: 50%;  
   font-size: 30px;  
   color: #fff;  
}

Analisi del codice

I colori di sfondo per le tre schermate (o sezioni) vengono forniti lines 10, 22 e 25.

Stiamo calcolando la larghezza relativa di ogni schermata nel codice a partire da line 13.

Il codice JavaScript per ScrollMagic è fornito di seguito:

$(function () {   
   var controller = new ScrollMagic.Controller();  
   var horizontalSlide = new TimelineMax()  
      .to("#js-slideContainer", 1,   {x: "-20%"})     
      .to("#js-slideContainer", 1,   {x: "-40%"})  
   
   new ScrollMagic.Scene({  
      triggerElement: "#js-wrapper",  
      triggerHook: "onLeave",  
      duration: "400%"  
   })  
   .setPin("#js-wrapper")  
   .setTween(horizontalSlide)  
   .addTo(controller);    
});

Notare il triggerHookproprietà sulla riga 8. Questa proprietà è responsabile di fornire l'effetto di scorrimento quando l'utente raggiunge il completamento dell'evento di scorrimento. La funzioneTimelineMax è responsabile di fornire l'effetto di scorrimento orizzontale ai nostri schermi.

Una volta creati i rispettivi file, sarai in grado di vedere l'animazione di scorrimento orizzontale come mostrato di seguito.