Aceste zile tot mai multe site-uri sunt proiectate pe baza abordării de o singură pagină (cunoscute sub numele de site-uri de o singură pagină sau de o pagină). În acest articol, vom explora modul de creare a unei astfel de experiențe pentru un demo site, profitând de fullPage.js. 

Aruncați o privire la ceea ce vom construi pe acest demo Codepen. În plus, toate fișierele pentru această demonstrație pot fi găsite în acest depozit Github.

Ce este fullPage.js?

fullPage.js este un plugin bazat pe jQuery, care ne permite să construim site-uri de navigare cu o singură pagină. Creat de dezvoltatorul web Alvaro Trigo, așa cum vom vedea în secțiunile viitoare, acesta vine cu un număr de opțiuni personalizate diferite. 

În plus, acest plugin oferă o documentație bine organizată, cu multe exemple practice. 

Din fericire, funcționează nu numai în toate browserele moderne, ci și în unele exemple mai vechi precum IE 8 și Opera 12.  

În cele din urmă, poate doriți să aruncați o privire la versiunea Wordpress a acesteia.

Noțiuni de bază cu fullPage.js

Pentru a începe cu fullPage, trebuie să descărcați și să instalați următoarele fișiere în proiectul dvs.:

• Biblioteca jQuery (≥1,6,0)
• jquery.fullPage.css Fișier CSS
  
• jquery.fullPage.js Fișierul JS sau versiunea sa minimizată (adică. jquery.fullPage.min.js)
  

Puteți obține o copie a acestor fișiere vizitând Gothub repo, utilizând un manager de pachete (de exemplu Bower) sau încărcând activele necesare printr-un CDN (de exemplu, cdnjs). Pentru acest tutorial, vom alege ultima opțiune.

Plasați un link la fișierul CSS în cadrul  din documentul dvs. HTML:

... și scripturile JS înainte de închidere etichetă:

Acum, suntem gata să ne aruncăm mai adânc în plugin!

Crearea secțiunilor de pagini complete

În primul rând, trebuie să specificăm secțiunile site-ului nostru. Pentru a face acest lucru, îi atribuim secțiune clasificați elementele țintă și le înfășurați într-un container care are un identificator unic. Mai târziu, acest identificator va fi folosit pentru a inițializa o instanță a fullPage.

Implicit, pluginul consideră prima secțiune a fi cea activă. Dar, dacă vrem, putem schimba acest comportament adăugând activ clasa la secțiunea dorită. 

Iată structura HTML necesară pentru exemplul nostru:

 
 
fullPage.js
 
Aceasta este prima secțiune
 
 
Salt în ultimul diapozitiv
  
 
  
 
  
 
  
 
  
 

Observați că toate secțiunile au un nume comun al clasei (adică,. vertical-defilare) pe care am ales să fie diferită de cea predefinită (adică,. secțiune). În acest caz, trebuie să informăm pluginul despre această modificare în timpul procesului de inițializare.

Crearea de diapozitive orizontale

Fiecare dintre aceste secțiuni așezate vertical poate fi, opțional, un glisor orizontal cu unul sau mai multe glisiere. Pentru a identifica diapozitivele, aplicăm slide-uri clasează elementele țintă și le cuibăresc în secțiunea corespunzătoare.

În plus, este important să menționăm că, din punct de vedere tehnic, primul slide este egal cu secțiunea mamă. Vom examina destul de repede acest comportament!   

Înapoi la exemplul nostru, fragmentul de cod de mai jos arată modul în care am creat două diapozitive în secțiunea a cincea:

 
 
fullPage.js
 
Aceasta este a cincea secțiune și conține primul diapozitiv
 
 
 
fullPage.js
 
Acesta este cel de-al doilea slide
 
Mulțumesc!
 
 

Din nou, după cum puteți vedea, am oferit diapozitivelor noastre un nume de clasă personalizat (adică. orizontal-defilare).

Controlul aspectului site-ului

Putem controla aspectul secțiunilor și al diapozitivelor noastre, profitând de parametrii de configurare disponibili. Unul dintre acești parametri este sectionColor proprietate care ne oferă o modalitate ușoară de a defini CSS culoare de fundal proprietate pentru fiecare secțiune.

Mai mult decât atât, putem seta propriile stiluri pentru a personaliza în continuare paginile. De exemplu, imaginați-vă că vrem să aplicăm o imagine de fundal completă secțiunii a doua. Iată cum am putea realiza acest lucru:

secțiune: n-a-tip (2) background: url ('https://unsplash.it/1910/1221?image=626') centru / copertă fără repetare; 

Personalizarea opțiunilor de navigare

Pluginul oferă multe opțiuni încorporate pentru a vă deplasa prin secțiuni și diapozitive. Unele dintre aceste opțiuni sunt activate în mod prestabilit (de exemplu, rotița mouse-ului și tastatura), în timp ce altele sunt declanșate manual prin obiectul de configurare (de exemplu, cercuri de cerc). 

În proiectul nostru, dorim să adăugăm navigație suplimentară sub formă de puncte. În plus, alegem să ascundem săgețile stânga și dreapta care apar în mod normal pe cursor. Deci, după ce permitem navigarea cu puncte, putem schimba aspectul prin suprascrierea stilurilor implicite. Iată noile reguli:

# fp-nav ul li a span, .fp-diapozitiveNav ul li a span fundal: alb; lățime: 8px; înălțime: 8px; margine: -4px 0 0 -4px;  fp-nav ul a.active span, .fp-slidesNav ul li a.activ span, # fp-nav ul li: hover a.active span, .fp-slidesNav ul li: hover a.activ span lățime : 16px; înălțime: 16px; margine: -8px 0 0 -8px; fundal: transparent; box-size: caseta de margine; frontieră: 1px solid # 24221F; 

Și mai jos este o captură de ecran care demonstrează schimbările pe care le-am făcut:

Implicit, versus stiluri personalizate

Rețineți că includem regulile de mai sus în foaia de stil personalizată, evitând astfel modificarea fișierului CSS al pluginului.

Crearea de legături către secțiuni și diapozitive

fullPage.js ne permite să modificăm adresa URL a site-ului nostru pe măsură ce defilează diferitele secțiuni. Pentru a face acest lucru, folosim ancore parametru. Mai precis, acest parametru este o matrice care deține legăturile de ancorare care trebuie să fie afișate pe adresa URL pentru fiecare secțiune. De exemplu, în exemplul nostru specificăm următoarele link-uri de ancorare (care ar trebui să fie unice):

ancore: ["prima secțiune", "a doua secțiune", "a treia secțiune", "a patra secțiune", "a cincea secțiune"]

Acest lucru, când vom vizita prima secțiune, va avea adresa URL a site-ului #firstSection identificatorul la sfârșit, în al doilea rând URL-ul se va încheia #secondSection si asa mai departe.

În același mod, pluginul modifică, de asemenea, adresa URL în timp ce navigăm prin diapozitive. În acest moment, totuși, trebuie să reamintim că practic primul slide (care are un indice de 0) este secțiunea parentală asociată. În acest sens, în proiectul nostru, când suntem în primul slide al celei de-a cincea secțiuni, URL-ul se va termina în #fifthSection ancoră. Încărcarea celui de-al doilea diapozitiv din aceeași secțiune va declanșa o adresă URL care se termină # FifthSection / 1 deoarece al doilea diapozitiv (care are un indice de 1) este de fapt primul nostru diapozitiv.

Merită menționat faptul că putem modifica ancorele pentru diapozitivele noastre adăugând Date-ancoră să le atribuiți cu numele de ancoră dorit (care ar trebui să fie și unic), la fel ca în exemplul următor:

Notă: Pentru a vedea schimbarea adreselor URL pe măsură ce defilați, verificați afișarea Debug a demo-ului nostru.

Conectarea meniurilor la secțiuni și diapozitive

Pentru a înțelege mai bine modul în care putem conecta un meniu la fullPage, să aruncăm o privire la antetul nostru fix. Imaginea de mai jos arată cum apare:

Și HTML:

 
 Logo-ul dvs. 
      

Atâta timp cât este declanșată pictograma meniului hamburger, apare meniul principal al suprapusului:

Iată codul asociat acestui meniu:

Deci, pentru a lăsa fullPage să știe despre meniu, trebuie să o înregistrăm folosind meniul proprietate de configurare. Apoi trebuie să conectăm elementele de meniu la secțiunile relevante. Pentru a face acest lucru, adăugăm Date-menuanchor atribuiți articolelor noastre cu link-urile respective ca valori. Atâta timp cât aceste valori se potrivesc, pluginul adaugă activ (pe măsură ce defilați) la elementul de meniu corespunzător. 

Rețineți că pluginul nu adaugă încă activ clasa la diapozitive. Pentru a rezolva aceasta, putem folosi fie jQuery (cea mai bună soluție), fie CSS. În exemplul nostru, rezolvăm această problemă adăugând următoarea regulă CSS:

body.fp-viewing-fifthSection-1 #menu li: ultimul-copil a background: # 453659; 

Vedeți rezultatul de mai jos:

În realitate, nu am adăugat activ clasa la al doilea diapozitiv. Profitând de cele diferite corp clase pe care pluginul le adaugă fiecărei secțiuni și diapozitiv, noi le dăm doar acest element stiluri din activ clasă.

Notă: Nu ne vom concentra mai departe asupra modului în care funcționează acest meniu, deoarece depășește domeniul de aplicare al acestui tutorial.

Întoarcerea apelurilor pentru secțiuni

postsarcină apelul de apel este declanșat odată ce o secțiune este încărcată și la plecare apel invers după ce un utilizator îl lasă.

În proiectul nostru, ascundem navigația cu puncte verticale atunci când este încărcată cea de-a cincea secțiune:

Secțiunea 4, apoi Secțiunea 5 fără puncte

Iată cum o realizăm:

dupăLoad: funcție (anchorLink, index) if (index == 5) $ ('# fp-nav').  onLeave: funcție (index, nextIndex, direcție) if (index == 5) $ ('# fp-nav'). 

Redirecționări de apel pentru diapozitive

afterSlideLoad inversarea apelului este declanșată atunci când este încărcat un diapozitiv și onSlideLeave apel invers atunci când utilizatorul îl lasă.

În cazul nostru, ne concentrăm asupra al doilea slide pentru a efectua o serie de acțiuni diferite. De exemplu, odată ce slide-ul este încărcat, dezactivăm posibilitatea derulării. În plus, schimbăm culoare de fundal proprietatea acestui diapozitiv, precum și aspectul elementelor care îi aparțin.

O parte din codul pe care îl folosim este prezentat mai jos:

dupăSlideLoad: funcție (anchorLink, index, slideAnchor, slideIndex) if (anchorLink == 'fifthsection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (false, 'up'); $ (acest) .css ('fundal', '# 374140'); $ (acest) .find ('h2'). css ('culoare', 'alb'); $ (acest) .find ('h3'). css ('culoare', 'alb'); css ('color': '# DC3522', 'opacitate': 1, 'transform': 'translateY (0)');  onSlideLeave: funcția (anchorLink, index, slideIndex, direcția) if (anchorLink == 'fifthSection' && slideIndex == 1) $ .fn.fullpage.setAllowScrolling (true, 'up'); 

Inițializarea pluginului

Acesta este ultimul pas necesar pentru a declanșa funcționalitatea fullPage. Aici, trecem ca parte a obiectului de configurare toate particularizările noastre. Uitați-vă la fragmentul de cod corespunzător de mai jos:

$ fullpage (sectionSelector: '.vertical-scrolling', slideSelector: '. horizontal-scrolling', controlArrows: false // mai multe opțiuni aici);

Concluzie

În acest tutorial, ne-am bucurat de un tur rapid al pluginului fullPage.js jQuery și am învățat cum să construim un site de derulare a paginilor cu reacție rapidă. Este important să înțelegeți că acest tip de site nu este potrivit pentru toate cazurile. Pe lângă designul atrăgător, au multe restricții, iar întreținerea lor poate fi dificilă, în special pentru site-uri dinamice. În plus, acest format poate provoca complicații cu SEO.

Pasii urmatori

Dacă doriți să utilizați site-ul demo ca bază pentru experimentarea pluginului, vă sugerez următoarele provocări:

• Includeți biblioteca excelentă animate.css în proiect și încercați să creați animații bazate pe scroll.
• Utilizați cunoștințele jQuery pentru a activa funcția activ clasa la al doilea diapozitiv (a se vedea Conectarea meniului la secțiuni și diapozitive secțiune).

În cele din urmă, dacă aveți experiență cu site-urile de o singură pagină, nu ezitați să vă împărtășiți gândurile cu noi în comentariile de mai jos!