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

Evaluarea brandului

Stiu, e perioada Galelor, a Premiilor, a Bilanturilor de final de an, a Petrecerilor de Craciun… dar scriu ce ma inspira din munca mea de zi cu zi… Dupa filmarile de saptamana trecuta la INOVEO, [...]

Read More... from Animatie JS si CSS pentru prezentarea de continut la scroll

Citeste tot articolul

INOVEO a scris

Comunicarea fluenta dintre departamentele de Marketing si Financiar

Adesea ni se intampla sa avem nevoie de limbi straine… Sau limbaj strain in cadrul aceleiasi limbi, daca vorbim de business. Da, in bugetare e nevoie sa fii poliglot. Comunicarea fluenta dintre departamentele de Marketing [...]

Read More... from Animatie JS si CSS pentru prezentarea de continut la scroll

Citeste tot articolul

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 [...]

Read More... 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 [...]

Read More... from Animatie JS si CSS pentru prezentarea de continut la scroll

Citeste tot articolul