I disse dager er flere og flere nettsteder utformet basert på enkeltsidet tilnærming (kjent som sider med en side eller en side). I denne artikkelen vil vi undersøke hvordan du oppretter en slik opplevelse for et demo-nettsted ved å utnytte fullPage.js. 

Ta en titt på hva vi skal bygge på denne Codepen-demoen. I tillegg kan alle filene for denne demoen finnes på dette Github-depotet.

Hva er fullPage.js?

fullPage.js er et jQuery-basert plugin som gir oss mulighet til å bygge nettsider med rullende sider. Laget av webutvikler Alvaro Trigo, som vi ser i de kommende seksjonene, kommer den med en rekke forskjellige tilpasningsalternativer. 

I tillegg gir denne pluginen velorganisert dokumentasjon med mange praktiske eksempler. 

Heldigvis fungerer det ikke bare i alle moderne nettlesere, men også i noen eldre eksempler som IE 8 og Opera 12.  

Til slutt vil du kanskje se på Wordpress-versjonen av den.

Komme i gang med fullPage.js

For å komme i gang med fullPage, må du laste ned og installere følgende filer i prosjektet ditt:

• JQuery-biblioteket (≥1.6.0)
• De jquery.fullPage.css CSS-fil
  
• De jquery.fullPage.js JS-fil eller den minifiserte versjonen (dvs.. jquery.fullPage.min.js)
  

Du kan ta en kopi av disse filene ved å besøke Github repo, ved å bruke en pakkeadministrator (for eksempel Bower), eller ved å laste nødvendige ressurser gjennom en CDN (for eksempel cdnjs). For denne opplæringen velger vi det siste alternativet.

Legg en lenke til CSS-filen i  av HTML-dokumentet ditt:

... og JS-skriptene før avslutningen stikkord:

Nå er vi klare til å dykke dypere inn i plugin!

Opprette fullstendige seksjoner

Først må vi spesifisere delene av nettstedet vårt. For å gjøre dette tildeler vi seksjon klasse til målelementene og pakk dem inn i en beholder som har en unik identifikator. Senere vil denne identifikatoren bli brukt til å initialisere en forekomst av fullPage.

Som standard betrakter plugin den første delen som den aktive. Men hvis vi vil, kan vi endre den oppførselen ved å legge til aktiv klasse til ønsket seksjon. 

Her er den nødvendige HTML-strukturen for vårt eksempel:

 
 
fullPage.js
 
Dette er den første delen
 
 
Hopp inn i siste lysbilde
  
 
  
 
  
 
  
 
  
 

Legg merke til at alle seksjoner deler et felles klassenavn (dvs.. vertikal rulling) som vi har valgt å være annerledes enn den forhåndsdefinerte (dvs.. seksjon). I så fall må vi informere pluginet om denne endringen under initialiseringsprosessen.

Opprette horisontale lysbilder

Hver av disse vertikalt stablede seksjoner kan eventuelt være en horisontal glidebryter med ett eller flere lysbilder. For å identifisere lysbildene bruker vi lysbilder klasse til målelementene og nest dem i den tilsvarende delen.

Videre er det viktig å nevne at den første lysbilden er teknisk sett lik den overordnede delen. Vi undersøker denne oppførselen snart nok!   

Tilbake til vårt eksempel viser kodestykket nedenfor hvordan vi oppretter to lysbilder i vår femte seksjon:

 
 
fullPage.js
 
Dette er den femte delen og den inneholder det første lysbildet
 
 
 
fullPage.js
 
Dette er det andre lysbildet
 
Takk skal du ha!
 
 

Igjen, som du kan se, har vi gitt våre lysbilder et egendefinert klassenavn (dvs.. horisontal rulling).

Kontrollere nettstedutseende

Vi kan kontrollere utseendet på våre seksjoner og lysbilder ved å benytte de tilgjengelige konfigureringsparametrene. En av disse parametrene er sectionColor eiendom som gir oss en enkel måte å definere CSS på bakgrunnsfarge eiendom for hver seksjon.

Videre kan vi sette våre egne stiler for å tilpasse sidene videre. For eksempel, tenk at vi vil bruke et fullt bakgrunnsbilde til den andre delen. Slik gjør vi det:

seksjon: nth-of-type (2) bakgrunn: url ('https://unsplash.it/1910/1221?image=626') no-repeat center / cover; 

Tilpasse navigasjonsalternativene

Pluggen inneholder mange innebygde alternativer for å bevege seg gjennom seksjoner og lysbilder. Noen av disse alternativene aktiveres som standard (for eksempel mushjul og tastatur), mens andre manuelt utløses via konfigurasjonsobjektet (for eksempel sirkelpunkter). 

I vårt prosjekt vil vi legge til ekstra navigasjon i form av prikker. I tillegg velger vi å skjule venstre og høyre piler som normalt vises på glidebryteren. Så, etter at du har aktivert punktnavigasjonen, kan vi endre utseendet ved å overskrive standardstilene. Her er de nye reglene:

# fp-nav ul li a span, .fp-slidesNav ul li a span bakgrunn: hvit; bredde: 8px; høyde: 8px; margin: -4px 0 0 -4px;  # fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, # fp-nav ul li: sveve a.active span, .fp-slidesNav ul li: sveve a.active span width : 16px; høyde: 16px; margin: -8px 0 0 -8px; bakgrunn: gjennomsiktig; boks-størrelse: border-box; grense: 1px solid # 24221F; 

Og under er et skjermbilde som demonstrerer endringene vi har gjort:

Standard, versus tilpassede stiler

Vær oppmerksom på at vi inkluderer reglene ovenfor i vårt tilpassede stilark, og dermed unngår endringer i pluginens CSS-fil.

Opprette lenker til seksjoner og lysbilder

fullPage.js gjør det mulig for oss å endre nettadressen til nettstedet vårt mens vi ruller gjennom de forskjellige seksjonene. For å gjøre det bruker vi ankere parameter. Mer spesifikt er denne parameteren en matrise som holder ankerlinkene som må vises på nettadressen for hver seksjon. For eksempel, i vårt eksempel spesifiserer vi følgende ankerforbindelser (som skal være unike):

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

Det gjøres, når vi besøker den første delen, vil nettadressen til nettstedet ha #firstSection identifikator på slutten, på den andre URL-adressen vil ende i #secondSection og så videre.

På samme måte endrer plugin også nettadressen mens vi ruller gjennom lysbildene. På dette punktet må vi imidlertid huske at i utgangspunktet er det første lysbildet (som har en indeks på 0) det tilhørende foreldreseksjonen. Med det i tankene, i prosjektet når vi er i første lysbilde i femte delen, slutter URL-adressen i #fifthSection ankerlänk. Hvis du legger inn det andre lysbildet i samme seksjon, utløses en URL som slutter # FifthSection / 1 fordi det andre lysbildet (som har en indeks på 1) er faktisk vår "første" lysbilde.

Det er verdt å nevne at vi kan endre ankrene for våre lysbilder ved å legge til data-anker Tilordne dem med de ønskede ankernavnene (som også skal være unike), akkurat som følgende eksempel:

Merk: Hvis du vil se nettadressene som endres mens du ruller, kan du sjekke ut Debug View av vår demo.

Koble menyer til seksjoner og lysbilder

For bedre å forstå hvordan vi kan knytte en meny til fullPage, la oss se på vår faste overskrift. Skjermbildet nedenfor viser hvordan det ser ut:

Og HTML:

 
 Din logo 
      

Så lenge hamburger-menyikonet utløses, vises hovedmenyoverlegget:

Her er koden knyttet til denne menyen:

Så, for å la fullPage vite om menyen, må vi registrere det ved å bruke Meny konfigurasjonsegenskap. Deretter må vi koble menyelementene til de aktuelle delene. For å gjøre dette legger vi til data-menuanchor Tilordne elementene våre med de respektive linkene som verdiene. Så lenge disse verdiene samsvarer, legger plugin-modulen til aktiv klasse (som vi ruller) til det tilsvarende menyelementet. 

Legg merke til at pluginet ennå ikke legger til aktiv klassen til lysbildene. For å fikse dette, kan vi bruke enten jQuery (best løsning) eller CSS. I vårt eksempel løser vi dette problemet ved å legge til følgende CSS-regel:

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

Se resultatet nedenfor:

Faktisk har vi ikke lagt til aktiv klassen til det andre lysbildet. Ved å utnytte de forskjellige kropp klasser at pluginet legger til hver seksjon og lysbilde, gir vi bare dette elementet stiler av aktiv klasse.

Merk: Vi vil ikke fokusere lenger på hvordan denne menyen virker fordi den er utenfor omfanget av denne opplæringen.

Firing tilbakeringinger for seksjoner

De afterload tilbakeringing er avbrutt når en seksjon er lastet og på ferie tilbakeringing når en bruker forlater den.

I prosjektet skjuler vi den vertikale punktnavigasjonen når den femte delen er lastet:

Seksjon 4, deretter Seksjon 5 uten punkter

Slik gjør vi det:

afterLoad: funksjon (ankerLink, indeks) if (index == 5) $ ('# fp-nav'). skjul ();  onLeave: funksjon (indeks, nextIndex, retning) if (index == 5) $ ('# fp-nav'). 

Firing tilbakeringinger for lysbilder

De afterSlideLoad tilbakeringing utløses når et lysbilde er lastet og onSlideLeave tilbakeringing når brukeren forlater det.

I vårt tilfelle fokuserer vi på det andre lysbildet for å utføre en rekke forskjellige handlinger. For eksempel, når lysbildet er lastet, deaktiverer vi muligheten for å rulle opp. I tillegg endrer vi bakgrunnsfarge egenskapen til dette lysbildet, samt utseendet på elementene som tilhører det.

En del av koden vi bruker er vist nedenfor:

afterSlideLoad: funksjon (ankerLink, indeks, slideAnchor, slideIndex) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (false, 'up'); $ (dette) .css ('bakgrunn', '# 374140'); $ (dette) .find ('h2'). css ('farge', 'hvit'); $ (dette) .find ('h3'). css ('farge', 'hvit'); $ (dette) .find ('p'). css ('farge': '# DC3522', 'opacity': 1, 'transform': 'translateY (0)');  onSlideLeave: funksjon (ankerLink, indeks, slideIndex, retning) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (true, 'up'); 

Initialiser plugin

Dette er det siste nødvendige trinnet for å utløse funksjonaliteten til fullPage. Her sender vi alle våre tilpasninger som en del av konfigurasjonsobjektet. Se på den aktuelle kodestykket nedenfor:

$ ('# fullpage'). fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '. horizontal scrolling', controlArrows: false // flere alternativer her);

Konklusjon

I denne opplæringen likte vi en rask gjennomgang av fullPage.js jQuery-plugin-modulen og lærte å bygge en responsiv nettside for rulling. Det er viktig å forstå at denne typen nettside ikke passer for alle tilfellene. Foruten deres attraktive design har de mange restriksjoner, og vedlikeholdsbarheten kan være vanskelig, spesielt for dynamiske steder. Plus, dette formatet kan forårsake komplikasjoner med SEO.

Neste skritt

Hvis du vil bruke demo-siden som grunnlag for å eksperimentere med pluginet, foreslår jeg følgende utfordringer:

• Ta med det gode animate.css-biblioteket inn i prosjektet, og prøv å lage skrollbaserte animasjoner.
• Bruk jQuery kunnskapen din til å aktivere aktiv klasse til andre lysbilde (se Koblingsmeny til seksjoner og lysbilder seksjon).

Til slutt, hvis du har noen erfaring med nettsider, kan du dele dine tanker med oss ​​i kommentarene nedenfor!