Idag är fler och fler webbplatser utformade utifrån ensidig inställning (känd som sidor med en sida eller en sida). I den här artikeln undersöker vi hur du skapar en sådan upplevelse för en demo-webbplats genom att utnyttja fullPage.js. 

Ta en titt på vad vi ska bygga på den här Codepen-demo. Dessutom kan alla filer för den här demoen hittas på det här Github-arkivet.

Vad är fullPage.js?

fullPage.js är ett jQuery-baserat plugin som gör det möjligt för oss att bygga sidor som rullar på en sida. Skapad av webbutvecklare Alvaro Trigo, som vi ser i de kommande avsnitten, kommer den med ett antal olika anpassningsalternativ. 

Dessutom ger detta plugin en välorganiserad dokumentation med många praktiska exempel. 

Lyckligtvis fungerar det inte bara i alla moderna webbläsare, men också i några äldre exempel som IE 8 och Opera 12.  

Slutligen kanske du vill titta på Wordpress-versionen av den.

Komma igång med fullPage.js

För att komma igång med fullPage måste du hämta och installera följande filer i ditt projekt:

• JQuery-biblioteket (≥1.6.0)
• De jquery.fullPage.css CSS-fil
  
• De jquery.fullPage.js JS-fil eller dess minifierade version (dvs.. jquery.fullPage.min.js)
  

Du kan ta en kopia av dessa filer genom att besöka Github repo, genom att använda en pakethanterare (t.ex. Bower) eller genom att ladda de nödvändiga tillgångarna via en CDN (t ex cdnjs). För den här handledningen väljer vi det sista alternativet.

Placera en länk till CSS-filen inom  av ditt HTML-dokument:

... och JS-skript före stängningen märka:

Nu är vi redo att dyka djupare in i plugin!

Skapa sidor för hela sidan

Först måste vi ange delarna på vår webbplats. För att göra detta tilldelar vi sektion klass till målelementen och linda dem i en behållare som har en unik identifierare. Senare kommer denna identifierare att användas för att initiera en instans av fullPage.

Som standard betraktar plugin den första sektionen som den aktiva. Men om vi vill kan vi ändra det beteendet genom att lägga till aktiva klass till önskad sektion. 

Här är den nödvändiga HTML-strukturen för vårt exempel:

 
 
fullPage.js
 
Detta är den första delen
 
 
Hoppa in i sista bilden
  
 
  
 
  
 
  
 
  
 

Observera att alla sektioner delar ett gemensamt klassnamn (dvs.. vertikal-rullning) som vi har valt att vara annorlunda än den fördefinierade (dvs.. sektion). I så fall måste vi informera pluginet om denna förändring under initialiseringsprocessen.

Skapa horisontella bilder

Var och en av dessa vertikalt staplade sektioner kan valfritt vara en horisontell glidare med en eller flera glidbanor. För att identifiera bilderna tillämpar vi diabilder klass till målelementen och bo i dem i motsvarande avsnitt.

Vidare är det viktigt att nämna att tekniskt taget är den första bilden lika med föräldrasektionen. Vi kommer snart att undersöka detta beteende!   

Tillbaka till vårt exempel visar kodfliken nedan hur vi ställer in två bilder i vår femte sektion:

 
 
fullPage.js
 
Detta är den femte delen och den innehåller den första bilden
 
 
 
fullPage.js
 
Detta är den andra bilden
 
Tack!
 
 

Återigen, som du kan se, har vi gett våra bilder ett anpassat klassnamn (dvs.. horisontell rullning).

Kontroll av webbplatsutseende

Vi kan styra utseendet på våra sektioner och bilder genom att utnyttja de tillgängliga konfigurationsparametrarna. En av dessa parametrar är sectionColor egendom som ger oss ett enkelt sätt att definiera CSS bakgrundsfärg egendom för varje sektion.

Dessutom kan vi ställa in våra egna stilar för att ytterligare anpassa sidorna. Tänk dig att vi vill tillämpa en hel bakgrundsbild till den andra sektionen. Så här kan vi göra det:

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

Anpassa navigationsalternativen

Pluggen erbjuder många inbyggda alternativ för att flytta igenom sektioner och diabilder. Några av dessa alternativ aktiveras som standard (t ex mushjul och tangentbord) medan andra manuellt utlöses via konfigurationsobjektet (t ex cirkelpunkter). 

I vårt projekt vill vi lägga till extra navigering i form av prickar. Dessutom väljer vi att gömma vänster och högerpil som normalt visas på reglaget. Så, efter att ha aktiverat punktnavigering kan vi ändra sitt utseende genom att skriva över standardstilarna. Här är de nya reglerna:

# fp-nav ul li span, .fp-slidesNav ul li a span bakgrund: white; bredd: 8px; höjd: 8px; marginal: -4px 0 0 -4px;  # fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, # fp-nav ul li: sväng a.active span, .fp-slidesNav ul li: sväng a.active span width : 16px; höjd: 16px; marginal: -8px 0 0 -8px; bakgrund: transparent; box-dimensionering: gränsvärde; gräns: 1px fast # 24221F; 

Och nedan är en skärmdump som visar de förändringar vi har gjort:

Standard, kontra anpassade stilar

Observera att vi inkluderar reglerna ovan i vårt anpassade formatark, så att du undviker ändringar i plugins CSS-fil.

Skapa länkar till sektioner och bilder

fullPage.js tillåter oss att ändra webbadressen till vår webbplats när vi rullar igenom de olika sektionerna. För att göra så använder vi ankare parameter. Mer specifikt är denna parameter en array som innehåller ankarlänkarna som måste visas på webbadressen för varje avsnitt. Till exempel, i vårt exempel anger vi följande ankarlänkar (som borde vara unika):

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

Det görs, när vi besöker den första sektionen, kommer webbadressen att ha #firstSection identifieraren i slutet, den andra kommer webbadressen att sluta #secondSection och så vidare.

På samma sätt ändrar plugin också URL-adressen medan vi rullar igenom bilderna. Vid denna tidpunkt måste vi dock komma ihåg att i princip den första bilden (som har ett index på 0) är den relaterade föräldraavdelningen. Med det i åtanke, i vårt projekt när vi befinner oss i den första bilden i femte delen, slutar URL: n i #fifthSection ankare länk. När du laddar den andra bilden i samma avsnitt kommer den att utlösa en URL som slutar i # FifthSection / 1 eftersom den andra bilden (som har ett index på 1) är faktiskt vår "första" bildruta.

Det är värt att nämna att vi kan ändra ankrarna för våra bilder genom att lägga till data ankare attribut till dem med önskade ankare namn (vilket också bör vara unikt), precis som följande exempel:

Notera: För att se hur webbadresserna ändras när du bläddrar, kolla in Debug View of our demo.

Länka menyer till sektioner och diabilder

För att bättre förstå hur vi kan länka en meny till fullPage, låt oss ta en titt på vår fasta rubrik. Skärmbilden nedan visar hur det visas:

Och HTML:

 
 Din logotyp 
      

Så länge som menyikonen för hamburgaren utlöses kommer huvudmenyöverläggningen att visas:

Här är koden relaterad till den här menyn:

Så, för att låta fullPage veta om menyn, måste vi registrera det med hjälp av meny konfigurationsegenskap. Nästa måste vi länka menyalternativen till relevanta avsnitt. För att göra detta lägger vi till data menuanchor attribut till våra objekt med respektive länkar som värdena. Så länge som dessa värden matchar, läggs plugin till aktiva klass (som vi rullar) till motsvarande menyalternativ. 

Observera att plugin ännu inte lägger till aktiva klassen till bilderna. För att åtgärda detta kan vi använda antingen jQuery (bästa lösningen) eller CSS. I vårt exempel löser vi detta problem genom att lägga till följande CSS-regel:

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

Se resultatet nedan:

I själva verket lade vi inte till aktiva klass till den andra bilden. Genom att utnyttja de olika kropp klassificerar att pluginet lägger till varje avsnitt och glider, ger vi bara den här artikeln stilar av aktiva klass.

Notera: Vi kommer inte fokusera längre på hur denna meny fungerar eftersom den ligger utanför omfattningen av denna handledning.

Avbringa återuppringningar för sektioner

De afterload Återuppringning avfyras när en sektion är laddad och onLeave återuppringning när en användare lämnar den.

I vårt projekt döljer vi den vertikala punktnavigeringen när den femte sektionen är laddad:

Section4, sedan Section5 utan punkter

Så här gör vi det:

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

Ringa återuppringningar för bilder

De afterSlideLoad återuppringning utlöses när en bild är laddad och onSlideLeave återuppringning när användaren lämnar den.

I vårt fall fokuserar vi på den andra bilden för att utföra ett antal olika åtgärder. Till exempel, när bilden är laddad stänger vi av möjligheten att rulla upp. Dessutom ändrar vi bakgrundsfärg egenskapen för den här bilden och utseendet på de element som hör till det.

En del av koden vi använder visas nedan:

afterSlideLoad: funktion (anchorLink, index, slideAnchor, slideIndex) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (false, 'up'); $ (detta) .css ('bakgrund', '# 374140'); $ (this) .find ('h2'). css ('färg', 'vit'); $ (this) .find ('h3'). css ('färg', 'vit'); $ (detta) .find ('p'). css ('färg': '# DC3522', 'opacitet': 1, 'transform': 'translateY (0)');  onSlideLeave: funktion (anchorLink, index, slideIndex, riktning) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (true, 'up'); 

Initiering av plugin

Detta är det sista nödvändiga steget för att utlösa funktionaliteten för fullPage. Här skickar vi alla våra anpassningar som en del av konfigurationsobjektet. Titta på koden nedan:

$ ('# fullpage'). fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '. horizontal scrolling', controlArrows: false // flera alternativ här);

Slutsats

I den här handledningen har vi haft en snabb rundtur i fullPage.js jQuery-plugin och lärt oss hur man bygger en lyhörd rullningssida för hela sidan. Det är viktigt att förstå att denna typ av webbplats inte är lämplig för alla fall. Förutom deras attraktiva design har de många restriktioner och deras underhåll kan vara svårt, särskilt för dynamiska platser. Plus, detta format kan orsaka komplikationer med SEO.

Nästa steg

Om du vill använda demo-webbplatsen som grund för att experimentera med pluginet föreslår jag följande utmaningar:

• Inkorporera det utmärkta animate.css-biblioteket i projektet och försök att skapa rullningsbaserade animeringar.
• Använd din jQuery kunskap för att aktivera aktiva klass till andra bilden (se Linking Menu till sektioner och bilder sektion).

Slutligen, om du har någon erfarenhet av sidor med en sida, kan du dela med dig av dina tankar i kommentarerna nedan!