Scris de Marius Chiriac

Animatie JS si CSS pentru prezentarea de continut la scroll

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.

Mai multe articole

INOVEO a scris

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul „one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

Citeste tot articolul from Animatie JS si CSS pentru prezentarea de continut la scroll

Citeste tot articolul

INOVEO a scris

Beneficiile de a avea un blog pe website-ul tau

In era digitala in care traim, un website bine dezvoltat nu mai este suficient pentru a atrage si retine atentia publicului. Un blog pe website-ul unei companii poate aduce numeroase beneficii, de la cresterea prezentei [...]

Citeste tot articolul from Animatie JS si CSS pentru prezentarea de continut la scroll

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

Citeste tot articolul from Animatie JS si CSS pentru prezentarea de continut la scroll

Citeste tot articolul

INOVEO a scris

Optimizarea portofoliului de branduri

Optimizarea unui portofoliu de brand implica gestionarea si organizarea strategica a ofertei de produse ale unei companii pentru a maximiza valoarea globala a marcii si cota de piata. Pentru a optimiza portofoliul de marci pentru [...]

Citeste tot articolul from Animatie JS si CSS pentru prezentarea de continut la scroll

Citeste tot articolul