La INOVEO intotdeauna cautam metode inovative si frumoase de a crea website-uri moderne si dinamice. Experimentarea in crearea de animatii CSS si JS este ceva ce eu fac saptamanal pentru a ma familiariza cu tehnologii noi sau sa invat sa creez lucruri ce mi-au placut la alte website-uri.
In acest articol vom crea animatii legate la scroll de pagina pentru a face “reveal” la continutul paginii incarcate sau a unei sectiuni din pagini. La final veti putea vedea rezultatul si veti putea citi codul sursa scris intr-un codepen.
1. Codul HTMl este unul simplu in care vom avea un wrapper ce va fi folosit in setarea inaltimea sectiunii cu un div pozitionat fixed ce va contine contentul si elementele ce le vom anima.
In acest caz am ales un supergrafic de forma unui dreptunghi creat prin CSS, dar acesta poate fi inlocuit cu un SVG sau alt timp de element. In partea superioara am adaugat un div ce va creste de la 0 la 100% in lungime ce va reprezenta pozitia scroll-ului in pagina.
2. Codul CSS va fi folosit pentru stilizare, pozitionare si stabilirea dimensiunilor initiale a elementelor.
3. Codul JS va detecta initial evenimentele de scroll facute in pagina. Cand se face scroll functia va prelua inaltimea paginii (setata de mine la de 2 ori inaltimea unui ecran in acest caz) si pozitia scroll-ului.
Cu aceste doua valori vom calcula procentajul pentru scalarea elementului “loader” pe axa X prin formula “inaltime website/inaltime ecran”. In exemplul nostru scroll-ul va fi intotdeuna maxim inaltimea ecranului, dar aceasta formula se va modifica in functie de website pentru a calcula corect procentajul.
In acelasi timp vom mari supergraficul din fata pozei astfel incat gaura din mijloc sa permita vizualizarea completa a tot ce este in spate. Inainte de finalizarea scroll-ului am adauga o animatie in care poza din background sa se mareasca putin.
Puteti sa va jucati cu aceasta animatie aici (dati scroll):
See the Pen
Cool JS and CSS animations on scroll by Puiu (@Puiu)
on CodePen.
Astfel de animatii sunt foarte flexibile, adaptabile si pot fi folosite in multe moduri intr-un website. Voi mai prezenta si alte tipuri de animatii in viitoare articole care sper sa va inspire.
