Efectul de Smooth Scroll in CSS
Ce este efectul de Smooth Scroll?
Cum ii sugereaza si numele creaza un efect de scroll lent al paginii web. Comportamentul de scroll ca si setare de default este abrupt, fiind setat pe “auto”.
In exemplul de mai jos o exemplificare a efectului.
Cand este util?
Pentru ancore si pagini one page
Cel mai des se utilizeaza cand avem ancore cu nume: link-uri in cadrul aceleasi pagini sau de la o pagina la alta pentru navigarea intre sectiuni.
Este un efect care nu trebuie sa lipseasca din site-urile one page in care link-urile din meniul de navigare poarta la sectiuni di aceeasi pagina. Aici un exemplu de site onepage in care este implementat efectul Smooth Scroll.
Astfel efectul de navigare intre sectiuni nu este brusc, ci face o navigare mai lenta, care pe parcursul avansarii arata continutul dintre sectiuni.
Cum se creaza efectul Smooth Scroll?
1. Se creaza sectiunile si fiecarei sectiuni i se atribuie un ID CSS (un id distinct pentru fiecare sectiune, id-ul trebuie sa fie unic in pagina). Acest id se va folosi pentru a identifica sectiunea in link.
2. Se configureaza link-urile la variile sectiuni folosind id-urile setate. Vezi acest articol pentru configurarea ancorelor cu nume.
3. Pentru a seta efectul de tranzitie smooth scroll intre sectiuni se seteaza regula pentru elementul principal al paginii, si anume tag-ul HTML.
html {scroll-behavior: smooth;}
Setarea proprietatii pentru tag-ul HTML va produce efectul de smooth scroll pentru INTREAGA PAGINA. Asta pentru ca toate elementele paginii (care sunt in mod obligatoriu continute in interiorul tag-ului HTML) vor mosteni proprietatea de la elementul parinte. Daca avem nevoie de acest efect doar pentru o pagina anume sau un container specific (ce prezinta in interiorul sau o structura navigabila interna) atunci vom da aceasta proprietate doar container-ului respectiv.
Suportul in browser pentru efectul de Smooth Scroll
In graficul de mai jos (generat de site-ul CanIUse) se pot vedea detaliile compatibilitatii cu variile versiuni de browser.
Invata sa realizezi site-uri web cu tehnologia momentului: WordPress
Cursul online pentru WordPress este compus din 76 de videoclipuri in format HD.
Curs WordPress Online
245.00 lei145.00 leiInvata cum sa construiesti site-uri web dinamice complete in mod rapid cu cea mai utilizata tehnologie la nivel mondial | 76 videoclipuri on demand HD | fise pdf descarcabile