Referencia de clases de animación
Todo lo que hacen los paneles de este plugin se reduce a clases CSS normales aplicadas a un elemento — los paneles son solo una forma cómoda de escribirlas (ver Primeros pasos). Esta página es para el sentido contrario: si ya sabes qué clase buscas (leyendo el marcado de otra persona, escribiendo una clase a mano en un bloque de código, o buscándola con Yabe Bricks Plain Classes), aquí tienes qué significa cada prefijo y dónde está su documentación completa.
| Prefijo | Familia | Referencia completa |
|---|---|---|
fb-anim-- | Entrada | Animaciones de entrada |
fb-anim--text- | Texto | Animaciones de texto |
fb-hover-- | Hover | Animaciones hover |
fa-- | ScrollTrigger (incluye fa--iparent, fa--parent, fa--reverse, las clases de porcentaje de disparo fa--NN, fa--no-mobile, fa--no-tablet) | Animaciones ScrollTrigger |
fa--mouse- (fa--mouse-follow, fa--mouse-move, fa--mouse-3d, fa--mouse--bounce, fa--mouse-3d__inner) | Mouse | Animaciones de ratón |
fa-radial-bg / fa-radial-bg-- | Fondo degradado | Animaciones de fondo |
La lista autorizada y siempre actualizada es la que el propio plugin trae consigo
(build/builder-selectors.json en los archivos del plugin) — esta tabla es un mapa de los
prefijos, no una copia de cada clase individual, porque esas ya están listadas por completo en la
página de cada familia.
En Bricks, escribir un prefijo como fb-anim-- en el campo de clase lista las clases coincidentes.
Vídeos explicativos
Estos tres vídeos son de la versión 2.0 (julio de 2024) y añaden cada animación escribiendo clases a mano. Todavía funciona, pero es el método lento y propenso a errores: hoy consigues el mismo resultado eligiendo opciones en los paneles de tu constructor, sin tener que recordar ningún nombre de clase. Empieza por Familias de animación, y usa estos vídeos solo si ya trabajas con clases.