Animacions CSS
EV Motion — Documentació i demos
Desplaça’t cap avall per veure els exemples animar-se. La llibreria s’activa només si detecta elements amb .ev-anim / data-ev-anim / .ev-bg-scroll.
Índex
- 1) Setup (recordatori)
- 2) Reveal (fade + direccions)
- 3) Variants (zoom / blur / pop)
- 4) Speed & delay
- 5) Variables CSS per element
- 6) Un cop o repetible
- 7) Stagger (llistats)
- 8) Loops (float / bounce)
- 9) Background scroll (toggle)
- 10) Background scroll (progressiu)
- 11) Refresh (AJAX / contingut dinàmic)
- 12) Slick slider (si s’usa)
1) Setup (recordatori)
Ja ho tens instal·lat. Recordatori ràpid (per si algú de l’equip ho revisa):
- SCSS:
/_ev_motion.scssimportat adissenys/eventis/scss/app.scss - JS:
/init_ev_anim.php
@import "css_moduls/ev_motion";
2) Reveal (fade + direccions)
Classes base: .ev-anim + un tipus: .ev-fade / .ev-from-left / .ev-from-right / .ev-from-top / .ev-from-bottom
Fade
... Des de l’esquerra
... Des de la dreta
... Des de dalt / baix
... ... 3) Variants (zoom / blur / pop)
Són combinables amb direcció o fade.
Zoom in
... Blur
... 4) Speed & Delay
Speed: ev-speed-xs sm md lg xl — Delay: ev-delay-0..8
Speed (lent)
... Delay (retard)
... 5) Variables CSS per element
Personalitza sense crear noves classes.
... 6) Un cop o repetible
Per defecte el reveal és un cop. Per repetir quan surts i tornes a entrar: data-ev-once="false"
... 7) Stagger (llistats)
Posa ev-stagger al contenidor i cada fill amb ev-anim.
Card 1 Card 2 Card 3 8) Loops (float / bounce)
Recomanat: loop en un wrapper intern per no xocar amb el transform del reveal.
Float
... Bounce + duració
... 9) Background scroll (toggle)
Classe: .ev-bg-scroll — variables: --ev-bg-from --ev-bg-to — opcional: data-ev-bg-once="true"
Secció amb background toggle
En entrar a viewport, el fons canvia. En sortir, torna (si no tens data-ev-bg-once="true" ).
Tip: també pots aplicar ev-speed-* i ev-delay-* a ev-bg-scroll.
... BG toggle amb speed + delay
El canvi de fons respecta el delay/speed del component.
... 10) Background scroll (progressiu)
Afegeix data-ev-bg="progress". El color evoluciona segons scroll (0..1).
Secció amb background progressiu
A mida que fas scroll, el fons es barreja de --ev-bg-from a --ev-bg-to .
... 11) Refresh (AJAX / contingut dinàmic)
Si afegeixes HTML per AJAX (o carregues blocs dinàmics), refresca el sistema amb: window.evAnim.refresh(contenidor)
window.evAnim && window.evAnim.refresh(contenidorDOM);
Exemple (si acabes d’injectar un bloc dins #resultats ):
var root = document.getElementById('resultats');
window.evAnim && window.evAnim.refresh(root);
12) Slick slider (si s’usa)
Si tens Slick en una pàgina, quan canvia de slide pots refrescar el slide actiu:
if (window.evAnim) {
window.evAnim.refresh(document.querySelector('.slick-slide.slick-active'));
}
Exemple d’HTML dins slides:
Fi de la pàgina de demos. Tip: per tornar a veure les animacions, fes reload i torna a baixar.
del layout
