In questi giorni sempre più siti sono progettati in base all'approccio a pagina singola (noto come siti a pagina singola o di una pagina). In questo articolo, esploreremo come creare una tale esperienza per un sito demo sfruttando fullPage.js. 

Dai un'occhiata a cosa costruiremo in questa demo di Codepen. Inoltre, tutti i file per questa demo possono essere trovati su questo repository Github.

Cos'è fullPage.js?

fullPage.js è un plugin basato su jQuery che ci consente di creare siti Web a scorrimento di una sola pagina. Creato dallo sviluppatore web Alvaro Trigo, come vedremo nelle prossime sezioni, viene fornito con una serie di diverse opzioni di personalizzazione. 

Inoltre, questo plugin fornisce una documentazione ben organizzata con molti esempi pratici. 

Fortunatamente, funziona non solo in tutti i browser moderni, ma anche in alcuni vecchi esempi come IE 8 e Opera 12.  

Infine, potresti voler dare un'occhiata alla versione di Wordpress.

Guida introduttiva a fullPage.js

Per iniziare con fullPage, devi scaricare e installare i seguenti file nel tuo progetto:

• La libreria jQuery (≥1.6.0)
• Il jquery.fullPage.css File CSS
  
• Il jquery.fullPage.js File JS o versione ridotta (ad es. jquery.fullPage.min.js)
  

Puoi prendere una copia di questi file visitando il repository Github, utilizzando un gestore di pacchetti (ad es. Bower) o caricando le risorse necessarie attraverso un CDN (ad esempio cdnjs). Per questo tutorial, sceglieremo l'ultima opzione.

Inserire un collegamento al file CSS all'interno del  del tuo documento HTML:

... e gli script JS prima della chiusura etichetta:

Ora siamo pronti per approfondire il plugin!

Creazione di sezioni a pagina intera

Per prima cosa, dobbiamo specificare le sezioni del nostro sito. Per fare questo, assegniamo il sezione classificare gli elementi di destinazione e avvolgerli in un contenitore che ha un identificatore univoco. Successivamente, questo identificatore verrà utilizzato per inizializzare un'istanza di fullPage.

Per impostazione predefinita, il plugin considera la prima sezione come attiva. Ma, se vogliamo, possiamo cambiare questo comportamento aggiungendo il attivo classe alla sezione desiderata. 

Ecco la struttura HTML richiesta per il nostro esempio:

 
 
fullPage.js
 
Questa è la prima sezione
 
 
Salta nell'ultima diapositiva
  
 
  
 
  
 
  
 
  
 

Si noti che tutte le sezioni condividono un nome di classe comune (ad es. verticale-scorrimento) che abbiamo scelto di essere diversi da quello predefinito (ad es. sezione). Stando così le cose, dobbiamo informare il plugin su questa modifica durante il processo di inizializzazione.

Creazione di diapositive orizzontali

Ciascuna di queste sezioni sovrapposte verticalmente può essere facoltativamente un cursore orizzontale con una o più diapositive. Per identificare le diapositive, applichiamo il scivoli classificare gli elementi di destinazione e annidarli all'interno della sezione corrispondente.

Inoltre, è importante ricordare che, tecnicamente parlando, la prima diapositiva è uguale alla sezione genitore. Esamineremo questo comportamento abbastanza presto!   

Tornando al nostro esempio, lo snippet di codice seguente mostra come abbiamo impostato due diapositive nella nostra quinta sezione:

 
 
fullPage.js
 
Questa è la quinta sezione e contiene la prima diapositiva
 
 
 
fullPage.js
 
Questa è la seconda diapositiva
 
Grazie!
 
 

Di nuovo, come puoi vedere, abbiamo assegnato alle nostre diapositive un nome di classe personalizzato (ad es. orizzontale-scorrimento).

Controllo dell'aspetto del sito

Possiamo controllare l'aspetto delle nostre sezioni e diapositive sfruttando i parametri di configurazione disponibili. Uno di questi parametri è il sectionColor proprietà che ci offre un modo semplice per definire il CSS colore di sfondo proprietà per ogni sezione.

Inoltre, possiamo impostare i nostri stili in modo da personalizzare ulteriormente le pagine. Ad esempio, immagina di voler applicare un'immagine di sfondo completa alla seconda sezione. Ecco come potremmo realizzarlo:

sezione: nth-of-type (2) background: url ('https://unsplash.it/1910/1221?image=626') centro / copertina senza ripetizione; 

Personalizzazione delle opzioni di navigazione

Il plugin offre molte opzioni integrate per lo spostamento attraverso sezioni e diapositive. Alcune di queste opzioni sono attivate di default (ad esempio rotella del mouse e tastiera), mentre altre vengono attivate manualmente tramite l'oggetto di configurazione (ad esempio punti di cerchio). 

Nel nostro progetto, vogliamo aggiungere ulteriore navigazione sotto forma di punti. Inoltre, scegliamo di nascondere le frecce sinistra e destra che normalmente appaiono sul cursore. Quindi, dopo aver abilitato la navigazione con punti, possiamo cambiare il suo aspetto sovrascrivendo gli stili di default. Ecco le nuove regole:

# fp-nav ul li a span, .fp-slidesNav ul li a span background: white; larghezza: 8px; altezza: 8px; margine: -4px 0 0 -4px;  # fp-nav ul li a.attivo span, .fp-slidesNav ul li a. span attivo, # fp-nav ul li: al passaggio del mouse su spaziatura attiva, .fp-slidesNav ul li: al passaggio del mouse su spaziatura attiva. : 16px; altezza: 16px; margine: -8px 0 0 -8px; sfondo: trasparente; dimensionamento della scatola: border-box; border: 1px solid # 24221F; 

E sotto c'è uno screenshot che dimostra le modifiche che abbiamo apportato:

Predefinito, vs stili personalizzati

Si prega di notare che includiamo le regole sopra nel nostro foglio di stile personalizzato, evitando così le modifiche al file CSS del plugin.

Creare collegamenti a sezioni e diapositive

fullPage.js ci consente di modificare l'URL del nostro sito mentre scorro le diverse sezioni. Per fare ciò, usiamo il ancoraggi parametro. Più specificamente, questo parametro è un array che contiene i link di ancoraggio che devono essere mostrati nell'URL per ciascuna sezione. Ad esempio, nel nostro esempio specifichiamo i seguenti link di ancoraggio (che dovrebbero essere unici):

ancore: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

Fatto ciò, quando visiteremo la prima sezione, l'URL del sito avrà il #firstSection identificatore alla fine, nel secondo l'URL finirà in #secondSection e così via.

Allo stesso modo, il plugin modifica anche l'URL mentre scorgiamo le diapositive. A questo punto, però, dobbiamo ricordare che fondamentalmente la prima diapositiva (che ha un indice di 0) è la sezione genitore correlata. Con questo in mente, nel nostro progetto quando siamo nella prima diapositiva della quinta sezione, l'URL finirà nel #fifthSection collegamento di ancoraggio. Il caricamento della seconda diapositiva della stessa sezione attiverà un URL che termina in # FifthSection / 1 perché la seconda diapositiva (che ha un indice di 1) è in realtà la nostra "prima" diapositiva.

Vale la pena ricordare che possiamo modificare le ancore per le nostre diapositive aggiungendo il Dati-anchor attribuiscili con i nomi di ancoraggio desiderati (che dovrebbero anche essere unici), proprio come nell'esempio seguente:

Nota: Per vedere gli URL che cambiano mentre scorri, controlla la Vista di Debug della nostra demo.

Collegamento di menu a sezioni e diapositive

Per capire meglio come possiamo collegare un menu a fullPage, diamo un'occhiata alla nostra intestazione fissa. Lo screenshot qui sotto mostra come appare:

E l'HTML:

 
 Il tuo logo 
      

Finché l'icona del menu hamburger viene attivata, viene visualizzato il menu principale sovrapposto:

Ecco il codice relativo a questo menu:

Quindi, per far conoscere a FullPage il menu, dobbiamo registrarlo usando il menu proprietà di configurazione. Quindi dobbiamo collegare le voci di menu alle sezioni pertinenti. Per fare ciò, aggiungiamo il Dati-menuanchor attributo ai nostri articoli con i rispettivi link come valori. Finché quei valori corrispondono, il plugin aggiunge il attivo classe (mentre scorriamo) alla voce di menu corrispondente. 

Si noti che il plugin non aggiunge ancora il attivo classe alle diapositive. Per risolvere questo problema, possiamo utilizzare jQuery (soluzione migliore) o CSS. Nel nostro esempio, risolviamo questo problema aggiungendo la seguente regola CSS:

body.fp-viewing-fifthSection-1 #menu li: last-child a background: # 453659; 

Vedi il risultato qui sotto:

In realtà, non abbiamo aggiunto il attivo classe alla seconda diapositiva. Approfittando del diverso corpo classi che il plugin aggiunge ad ogni sezione e diapositive, semplicemente diamo questo elemento stili del attivo classe.

Nota: Non ci concentreremo ulteriormente su come funziona questo menu perché è oltre lo scopo di questo tutorial.

Richiamare callback per sezioni

Il postcarico la richiamata viene attivata una volta caricata una sezione e il in ferie richiamata una volta che un utente lo lascia.

Nel nostro progetto, nascondiamo il punto di navigazione verticale quando viene caricata la quinta sezione:

Sezione 4, quindi Sezione 5 senza punti

Ecco come lo realizziamo:

afterLoad: function (anchorLink, index) if (index == 5) $ ('# fp-nav'). hide ();  onLeave: function (index, nextIndex, direction) if (index == 5) $ ('# fp-nav'). show (); 

Richiamare callback per diapositive

Il afterSlideLoad la richiamata viene attivata quando viene caricata una diapositiva e il onSlideLeave richiamata quando l'utente la lascia.

Nel nostro caso, ci concentriamo sulla seconda diapositiva per eseguire una serie di azioni diverse. Ad esempio, una volta caricata la diapositiva, disabilitiamo la possibilità di scorrere verso l'alto. Inoltre, cambiamo il colore di sfondo proprietà di questa diapositiva nonché l'aspetto degli elementi che le appartengono.

Parte del codice che usiamo è mostrato di seguito:

afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (false, 'up'); $ (this) .css ('background', '# 374140'); $ (this) .find ('h2'). css ('color', 'white'); $ (this) .find ('h3'). css ('color', 'white'); $ (this) .find ('p'). css ('color': '# DC3522', 'opacity': 1, 'transform': 'translateY (0)');  onSlideLeave: function (anchorLink, index, slideIndex, direction) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (true, 'up'); 

Inizializzazione del plugin

Questo è l'ultimo passaggio necessario per attivare la funzionalità di fullPage. Qui, passiamo come parte dell'oggetto di configurazione a tutte le nostre personalizzazioni. Guarda lo snippet di codice pertinente di seguito:

$ ('# fullpage'). fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '.horizontal-scrolling', controlArrows: false // più opzioni qui);

Conclusione

In questo tutorial, ci siamo goduti un breve tour del plugin jQuery di fullPage.js e abbiamo imparato come creare un sito di scrolling a pagina intera reattivo. È importante capire che questo tipo di sito Web non è adatto a tutti i casi. Oltre al loro design accattivante, hanno molte restrizioni e la loro manutenibilità può essere difficile, specialmente per i siti dinamici. Inoltre, questo formato può causare complicazioni con SEO.

Prossimi passi

Se desideri utilizzare il sito demo come base per sperimentare il plug-in, ti suggerisco le seguenti sfide:

• Incorporare l'eccellente libreria animate.css nel progetto e provare a creare animazioni basate su scroll.
• Usa la tua conoscenza di jQuery per abilitare il attivo classe alla seconda diapositiva (vedi Collegamento di menu a sezioni e diapositive sezione).

Infine, se hai esperienza con siti di una pagina, sentiti libero di condividere i tuoi pensieri con noi nei commenti qui sotto!