Codice

Come creare un semplice effetto di parallasse

In tutto il web, stanno nascendo dei siti, che usano quello che è noto come scroll di parallasse. In sostanza, lo scroll di parallasse è quando il contenuto scorre a velocità diverse, creando un senso di prospettiva e quindi di profondità.

È un effetto attraente e può essere applicato a tutti i livelli che vuoi. In questo articolo ho intenzione di introdurre i principi di base mostrandoti come costruire un semplice effetto di parallasse a due strati.

L'HTML

Per iniziare abbiamo bisogno di un po 'di HTML, includeremo del testo di riempimento da inserire in una sezione e poi in un'altra

che terrà il nostro background: 

Home page
We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
We offer the following services:
  • Branding
  • Logos
  • Websites
  • Web applications
  • Web development – HTML5, CSS, jQuery
  • Content Management Systems
  • Responsive Web Design
  • Illustration
  • Business cards
  • Letterheads and compliment slips
  • Flyers
  • Mailers
  • Appointment cards
Sub page
Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:
 
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.
 
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
  
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

Questo è tutto l'HTML di cui avremo bisogno. Tutto il testo serve solo a garantire che copriamo l'intera pagina in modo che lo scorrimento sia necessario. Passiamo al CSS:

Il CSS

Il CSS richiesto per creare un effetto di parallasse è in realtà piuttosto semplice se si capisce perché è scritto così com'è. Per prima cosa è necessario impostare l'immagine di sfondo del div .bg e quindi è necessario interrompere lo scorrimento dello scroll perché l'azione di scorrimento sarà applicata da jQuery; quindi dobbiamo impostare la sua posizione su fisso. Quindi impostiamo la larghezza al 100% e l'altezza al 300% per assicurarci che il div sia più grande dello schermo attuale. Lo posizioniamo in alto a sinistra e infine gli diamo uno z-index di -1 per assicurarci che sia visualizzato sotto il testo. 

.bg {background: url('bg.jpg') repeat;position: fixed;width: 100%;height: 300%;top:0;left:0;z-index: -1;}

Questo è tutto il CSS di cui abbiamo bisogno per il div bg, ora abbiamo solo bisogno di modificare il resto della nostra pagina (anche se questo è del tutto opzionale, non influenza lo scorrimento della parallasse): 

section {color: #fff;font-family: arial;width: 500px;margin: auto;line-height: 20px;font-size: 16px;}

Prova a scorrere la pagina ora e vedrai che il testo scorre ma lo sfondo rimane fisso, lo cambieremo con il nostro jQuery:

Il jQuery

Quello che vogliamo che jQuery sia fare è controllare quanto lontano l'utente ha fatto scorrere e spostare lo sfondo a una velocità inferiore. Creeremo una funzione chiamata parallasse e creeremo una variabile che manterrà il valore dei pixel che l'utente ha scostato: 

function parallax(){var scrolled = $(window).scrollTop();

Ora, per far scorrere lo sfondo alla stessa velocità del testo, impostiamo il valore superiore del div come il valore negativo dello scroll, quindi chiudiamo la funzione. Così: 

    $('.bg').css('top', -(scrolled) + 'px');}

Tuttavia il punto di scorrimento della parallasse è quello di muoversi a una velocità diversa, quindi per regolare la velocità si moltiplica il valore di una frazione, ad esempio 0,2 per il 20%: 

function parallax(){var scrolled = $(window).scrollTop();$('.bg').css('top', -(scrolled * 0.2) + 'px');}

C'è solo un'altra cosa da fare per ottenere l'effetto in esecuzione e questo è chiamare la funzione ogni volta che viene attivato l'evento di scorrimento: 

$(window).scroll(function(e){parallax();});

Fatto questo, il nostro codice è completo. Se esegui il test del file, lo vedrai funzionare. Per cambiare la velocità, abbiamo bisogno di cambiare la frazione nella funzione; le frazioni più piccole riducono la velocità e le frazioni più alte la aumentano. Puoi vedere il risultato finale di questo codice questa penna che ho creato.

Conclusione

Come puoi vedere, la creazione di un effetto di parallasse non è così difficile come potevi aspettarti. Ovviamente, questo è solo un semplice esempio, ma puoi costruire su questo per creare qualsiasi tipo di effetto di parallasse complesso che ti piace.

Hai usato un effetto di parallasse in un progetto? Hai un metodo migliore? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, immagine prospettica scorrevole via Shutterstock.

scorrimento di parallasse parallasse semplice parallasse come costruire un sito Web di parallasse

OdWebDesign.Net