Animacions CSS

EV Motion — Documentació i exemples

Aquesta pàgina mostra totes les classes disponibles i exemples reals (funcionen amb la llibreria instal·lada). Si no veus les icones: cal tenir Font Awesome 6 Pro (Light) carregat (fa-light).

Índex (anchors)

Nota: si reutilitzes aquest document en una altra URL, canvia /ca/animacions-css.html pels nous enllaços.

Setup (recordatori)

Recordatori ràpid del que cal tenir instal·lat:

SCSS: fitxer /_ev_motion.scss importat a dissenys/eventis/scss/app.scss
JS: /init_ev_anim.php inclòs al <head> del layout (clau perquè funcionin els ev-delay-* també “above-the-fold”).

Import SCSS

@import "css_moduls/ev_motion";

Include JS (al <head>)

<?php include_once('init_ev_anim.php'); ?>

Reveal (fade + direccions)

Base: .ev-anim + un tipus: ev-fade ev-from-left ev-from-right ev-from-top ev-from-bottom

Fade

Sóc un fade.

<div class="ev-anim ev-fade">...</div>

Des de l’esquerra

Entro des de l’esquerra.

<div class="ev-anim ev-from-left">...</div>

Des de la dreta

Entro des de la dreta.

<div class="ev-anim ev-from-right">...</div>

Des de dalt / baix

Entro de dalt.

Entro de baix.

<div class="ev-anim ev-from-top">...</div>
<div class="ev-anim ev-from-bottom">...</div>

Variants (zoom / blur / pop)

Combinables amb direcció o fade.

Zoom in

Zoom in suau.

<div class="ev-anim ev-from-bottom ev-zoom-in">...</div>

Blur

Entro amb blur i m’enfoco.

<div class="ev-anim ev-from-left ev-blur">...</div>

Pop (CTA / cards)

Botó “pop”

<a class="ev-anim ev-fade ev-pop" href="#">...</a>

Speed & Delay

Speed: ev-speed-xssmmdlgxl · Delay: ev-delay-0..8

Speed (XL)

Speed XL (més lent).

<div class="ev-anim ev-from-bottom ev-speed-xl">...</div>

Delay (6)

Delay 6 (entra tard).

<div class="ev-anim ev-fade ev-delay-6">...</div>

Variables CSS per element

Personalitza sense classes noves: --ev-anim-distance, --ev-anim-duration, --ev-anim-delay

Distància + duració + delay via variables.

<div class="ev-anim ev-from-right"
     style="--ev-anim-distance: 56px; --ev-anim-duration: 900ms; --ev-anim-delay: 140ms;">
  ...
</div>

Once / repetible

Per defecte és un cop. Per repetir quan surts i tornes a entrar: data-ev-once="false"

Sóc repetible (prova a pujar/baixar i tornar).

<div class="ev-anim ev-from-bottom" data-ev-once="false">...</div>

Stagger (llistats)

Contenidor: ev-stagger + ev-stagger-80 (o ev-stagger-120). Cada fill ha de tenir ev-anim.

Card 1

Card 2

Card 3

<div class="ev-stagger ev-stagger-80">
  <div class="ev-anim ev-from-bottom">Card 1</div>
  <div class="ev-anim ev-from-bottom">Card 2</div>
  <div class="ev-anim ev-from-bottom">Card 3</div>
</div>

Loops (float / bounce)

Recomanat: loop en wrapper intern per no xocar amb el transform del reveal.

Float

Icona flotant

<div class="ev-anim ev-fade">
  <div class="ev-loop ev-float">...</div>
</div>

Bounce + duració

Fes scroll

<div class="ev-anim ev-fade">
  <div class="ev-loop ev-bounce" style="--ev-loop-duration: 2600ms;">...</div>
</div>

Background scroll (toggle)

Classe: ev-bg-scroll. Variables: --ev-bg-from i --ev-bg-to. Opcional: data-ev-bg-once="true" (queda activat un cop entra).

Secció amb BG toggle

En entrar canvia el fons. En sortir torna (si no poses data-ev-bg-once="true").

<section class="ev-bg-scroll"
  style="--ev-bg-from: rgba(255,255,255,1); --ev-bg-to: rgba(30,140,255,.08);">
  <div class="ev-anim ev-fade">...</div>
</section>

Amb speed + delay al toggle

BG toggle amb speed + delay

El background respecta speed/delay.

<section class="ev-bg-scroll ev-speed-lg ev-delay-3"
  style="--ev-bg-to: rgba(255,210,120,.25);">
  ...
</section>

Background scroll (progressiu)

Afegeix data-ev-bg="progress". El color es barreja segons scroll (0..1). No és un “delay”, és continu.

BG progressiu

El fons evoluciona mentre fas scroll.

<section class="ev-bg-scroll" data-ev-bg="progress"
  style="--ev-bg-from: rgba(255,255,255,1); --ev-bg-to: rgba(255,245,200,1);">
  ...
</section>

Fi de la documentació. Tip: fes reload per repetir les animacions.