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

Dochita Zenoveiov a scris

Touchpoints Workshop

Brandingul nu e doar numele si logo-ul. Este si despre touchpointuri. Saptamana trecuta un prospect mi-a dezvaluit ca s-a intalnit cu noi doar pentru ca un fost client de-al nostru a insistat sa ne cunoasca, [...]

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

Citeste tot articolul

Dochita Zenoveiov a scris

Nume evocativ

Cum isi construiesc asiaticii strategia de #naming. Cum isi aleg numele. Sa luam exemplul Samsung. E un nume descriptiv, evocativ sau abstract? Lee Byung-chull, fondatorul Samsung, a urmat cursurile Universitatii Waseda din Tokyo, Japonia, dar [...]

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

Citeste tot articolul

Dochita Zenoveiov a scris

Customer Journey Workshop

Acesta se refera la toate interactiunile si etapele prin care trece un client in timp ce interactioneaza cu un brand. Customer Journey-ul include toate punctele de contact si canalele prin care un client vine in [...]

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

Citeste tot articolul

Dochita Zenoveiov a scris

Customer experience

Saptamana trecuta m-a rugat un partener sa fac un workshop de brand cu echipa sa si cred ca a sosit momentul sa vorbesc despre workshopurile pe care le facem pentru ca sunt diverse, au obiective [...]

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

Citeste tot articolul