Tegenwoordig worden steeds meer sites ontworpen op basis van de single-page-aanpak (ook wel single-page of one-page sites genoemd). In dit artikel zullen we onderzoeken hoe we een dergelijke ervaring kunnen creëren voor een demosite door gebruik te maken van fullPage.js. 

Kijk eens naar wat we gaan bouwen aan deze Codepen-demo. Bovendien zijn alle bestanden voor deze demo te vinden op deze Github-repository.

Wat is fullPage.js?

fullPage.js is een plug-in op jQuery-basis waarmee we scrollen met één pagina websites kunnen bouwen. Gemaakt door webontwikkelaar Alvaro Trigo, zoals we zullen zien in de komende paragrafen, het wordt geleverd met een aantal verschillende aanpassingsopties. 

Bovendien biedt deze plug-in een overzichtelijke documentatie met veel praktische voorbeelden. 

Gelukkig werkt het niet alleen in alle moderne browsers, maar ook in sommige oudere voorbeelden zoals IE 8 en Opera 12.  

Ten slotte wilt u wellicht eens kijken naar de WordPress-versie ervan.

Aan de slag met fullPage.js

Om met fullPage te beginnen, moet u de volgende bestanden in uw project downloaden en installeren:

• De jQuery-bibliotheek (≥1.6.0)
• De jquery.fullPage.css CSS-bestand
  
• De jquery.fullPage.js JS-bestand of de verkleinde versie ervan (d.w.z.. jquery.fullPage.min.js)
  

U kunt een kopie van die bestanden nemen door de Github-repo te bezoeken, door een pakketbeheerder (bijvoorbeeld Bower) te gebruiken of door de benodigde items via een CDN (bijvoorbeeld cdnjs) te laden. Voor deze zelfstudie kiezen we de laatste optie.

Plaats een link naar het CSS-bestand in de  van uw HTML-document:

... en de JS-scripts vóór het sluiten label:

Nu zijn we klaar om dieper in de plug-in te duiken!

Volledige pagina secties maken

Eerst moeten we de secties van onze site specificeren. Om dit te doen, wijzen we de sectie klasse aan de doelelementen en verpak ze in een container met een unieke identifier. Later zal deze identifier worden gebruikt om een ​​exemplaar van fullPage te initialiseren.

Standaard beschouwt de plugin de eerste sectie als de actieve. Maar als we willen, kunnen we dat gedrag veranderen door de actief klasse naar de gewenste sectie. 

Dit is de vereiste HTML-structuur voor ons voorbeeld:

 
 
fullPage.js
 
Dit is de eerste sectie
 
 
Spring in de laatste dia
  
 
  
 
  
 
  
 
  
 

Merk op dat alle secties een gemeenschappelijke klassenaam delen (d.w.z.. Verticale scrolling) die we hebben gekozen om te verschillen van de vooraf gedefinieerde (d.w.z.. sectie). Als dat het geval is, moeten we de plug-in over deze wijziging informeren tijdens het initialisatieproces.

Horizontale dia's maken

Elk van deze verticaal gestapelde secties kan eventueel een horizontale schuif met een of meer schuiven zijn. Om de dia's te identificeren, passen we de slides klasse aan de doelelementen en nest ze in de overeenkomstige sectie.

Verder is het belangrijk om te vermelden dat, technisch gesproken, de eerste dia gelijk is aan de bovenliggende sectie. We zullen dit gedrag snel genoeg onderzoeken!   

Terug naar ons voorbeeld laat het onderstaande codefragment zien hoe we twee dia's in ons vijfde gedeelte hebben opgesteld:

 
 
fullPage.js
 
Dit is het vijfde gedeelte en het bevat de eerste dia
 
 
 
fullPage.js
 
Dit is de tweede dia
 
Dank je!
 
 

Nogmaals, zoals u kunt zien, hebben we onze dia's een aangepaste klassenaam gegeven (d.w.z.. horizontale scrolling).

De vormgeving van de site regelen

We kunnen het uiterlijk van onze secties en dia's bepalen door gebruik te maken van de beschikbare configuratieparameters. Een van die parameters is de sectionColor eigenschap die ons een eenvoudige manier biedt om de CSS te definiëren Achtergrond kleur eigendom voor elke sectie.

Bovendien kunnen we onze eigen stijlen instellen om de pagina's verder aan te passen. Stel u bijvoorbeeld voor dat we een volledige achtergrondafbeelding willen toepassen op de tweede sectie. Dit is hoe we het kunnen bereiken:

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

De navigatie-opties aanpassen

De plug-in biedt veel ingebouwde opties om door secties en dia's te bladeren. Sommige van die opties zijn standaard geactiveerd (bijvoorbeeld muiswiel en toetsenbord), terwijl andere handmatig worden geactiveerd via het configuratieobject (bijvoorbeeld cirkelpunten). 

In ons project willen we extra navigatie toevoegen in de vorm van punten. Daarnaast kiezen we ervoor om de linker- en rechterpijlen te verbergen die normaal op de schuifbalk verschijnen. Na het inschakelen van de puntnavigatie kunnen we het uiterlijk wijzigen door de standaardstijlen te overschrijven. Dit zijn de nieuwe regels:

# fp-nav ul li a span, .fp-slidesNav ul li a span background: white; breedte: 8px; hoogte: 8px; marge: -4px 0 0 -4px;  # fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, # fp-nav ul li: hover a.active span, .fp-slidesNav ul li: hover a.active span width : 16px; hoogte: 16 px; marge: -8px 0 0 -8px; achtergrond: transparant; box-sizing: border-box; rand: 1px vast # 24221F; 

En hieronder ziet u een schermafbeelding die de wijzigingen die we hebben aangebracht, laat zien:

Standaard, versus aangepaste stijlen

Houd er rekening mee dat we de bovenstaande regels opnemen in ons aangepaste stylesheet, waardoor wijzigingen aan het CSS-bestand van de plug-in worden vermeden.

Koppelingen naar secties en presentaties maken

fullPage.js stelt ons in staat om de URL van onze site te wijzigen terwijl we door de verschillende secties scrollen. Om dit te doen, gebruiken we de ankers parameter. Meer specifiek is deze parameter een array die de ankerlinks bevat die voor elke sectie op de URL moeten worden weergegeven. In ons voorbeeld specificeren we bijvoorbeeld de volgende ankerlinks (die uniek zouden moeten zijn):

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

Dat gedaan, wanneer we de eerste sectie bezoeken, heeft de site-URL de #eerste deel ID aan het einde, op de tweede plaats waar de URL eindigt #secondSection enzovoorts.

Op dezelfde manier wijzigt de plug-in ook de URL terwijl we door de dia's bladeren. Op dit punt echter moeten we ons herinneren dat in feite de eerste dia (die een index van 0 heeft) de gerelateerde oudersectie is. Met dat in gedachten, in ons project wanneer we ons in de eerste dia van het vijfde gedeelte bevinden, eindigt de URL in het #fifthSection anker link. Als u de tweede dia van dezelfde sectie laadt, wordt een URL geactiveerd die eindigt # FifthSection / 1 omdat de tweede dia (die een index van 1 heeft) eigenlijk onze "eerste" dia is.

Vermeldenswaardig is dat we de ankers voor onze dia's kunnen aanpassen door de data-anker ken ze toe met de gewenste ankernamen (die ook uniek zouden moeten zijn), net als in het volgende voorbeeld:

Notitie: Om de URL's te zien veranderen tijdens het scrollen, bekijk de Debug View van onze demo.

Menu's koppelen aan secties en dia's

Om beter te begrijpen hoe we een menu kunnen koppelen aan de volledige pagina, laten we eens kijken naar onze vaste header. De onderstaande schermafbeelding laat zien hoe het verschijnt:

En de HTML:

 
 Uw logo 
      

Zolang het hamburgermenupictogram geactiveerd is, verschijnt de overlay van het hoofdmenu:

Hier is de code met betrekking tot dit menu:

Dus, om fullPage op de hoogte te stellen van het menu, moeten we het registreren met behulp van de menu configuratie-eigenschap. Vervolgens moeten we de menu-items koppelen aan de relevante secties. Om dit te doen, voegen we de data-menuanchor attributen aan onze items met de respectieve links als de waarden. Zolang die waarden overeenkomen, voegt de plug-in de actief klas (als we scrollen) naar het bijbehorende menu-item. 

Merk op dat de plug-in de app nog niet toevoegt actief klasse voor de dia's. Om dit te verhelpen, kunnen we jQuery (beste oplossing) of CSS gebruiken. In ons voorbeeld lossen we dit probleem op door de volgende CSS-regel toe te voegen:

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

Zie het resultaat hieronder:

In feite hebben we het niet toegevoegd actief klasse naar de tweede dia. Door gebruik te maken van de verschillende lichaam klassen die de plug-in toevoegt aan elke sectie en dia, geven we alleen dit item het stijlen van de actief klasse.

Notitie: We zullen niet verder focussen op hoe dit menu werkt, omdat het buiten het bestek van deze tutorial valt.

Vuren van terugbellen voor secties

De afterload terugbellen wordt gestart zodra een sectie is geladen en de met verlof terugbellen zodra een gebruiker het verlaat.

In ons project verbergen we de verticale puntnavigatie wanneer het vijfde deel is geladen:

Sectie 4, dan Sectie 5 zonder punten

Dit is hoe we het bereiken:

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

Vuren van callbacks voor dia's

De afterSlideLoad callback wordt geactiveerd wanneer een dia wordt geladen en de onSlideLeave terugbellen wanneer de gebruiker het verlaat.

In ons geval richten we ons op de tweede dia om een ​​aantal verschillende acties uit te voeren. Zodra de dia is geladen, wordt de mogelijkheid om naar boven te scrollen uitgeschakeld. Bovendien veranderen we de Achtergrond kleur eigenschap van deze dia evenals het uiterlijk van de elementen die erbij horen.

Een deel van de code die we gebruiken, wordt hieronder weergegeven:

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'); 

De plug-in initialiseren

Dit is de laatste vereiste stap om de functionaliteit van fullPage te activeren. Hier geven we al onze aanpassingen als onderdeel van het configuratieobject door. Bekijk het relevante codefragment hieronder:

$ ('# fullpage'). fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '.horizontal-scrolling', controlArrows: false // meer opties hier);

Conclusie

In deze zelfstudie hebben we genoten van een korte rondleiding door de plug-in fullPage.js jQuery en hebben we geleerd hoe je een responsieve scrolwebsite met volledige pagina's kunt bouwen. Het is belangrijk om te begrijpen dat dit type website niet geschikt is voor alle cases. Naast hun aantrekkelijke ontwerp hebben ze veel beperkingen en hun onderhoudbaarheid kan moeilijk zijn, vooral voor dynamische sites. Bovendien kan dit formaat complicaties met SEO veroorzaken.

Volgende stappen

Als u de demosite wilt gebruiken als basis voor het experimenteren met de plug-in, stel ik de volgende uitdagingen voor:

• Neem de uitstekende bibliotheek animate.css op in het project en probeer op scrollen gebaseerde animaties te maken.
• Gebruik uw kennis van jQuery om de actief klasse naar de tweede dia (zie Menu koppelen aan secties en dia's sectie).

Tenslotte, als u enige ervaring heeft met sites van één pagina, aarzel dan niet om uw mening met ons te delen in de onderstaande opmerkingen!