Fondo (gradiente y patrones)
Un fondo de gradiente radial interactivo cuya luz sigue al puntero, con un patrón opcional por encima — una cuadrícula de puntos, una red, líneas diagonales o diamantes — que también puede ir desplazándose lentamente en bucle. Úsalo en secciones y contenedores grandes.
Necesita que el módulo Gradient background esté activado en Animation settings primero.
El gradiente se pinta hacia afuera desde un punto focal que se desplaza suavemente hacia donde esté el puntero en cada momento, y se queda donde estuvo el puntero por última vez en cuanto este sale. Empieza centrado.
Míralo en acción: Gradient background animations en fancyanimations.com.
Ajustes
| Ajuste | Efecto |
|---|---|
| Gradient background | Activa el efecto (obligatorio para todo lo demás) |
| Pattern | None, net, dots, diagonal lines, o diamonds |
| Animate pattern | Hace que el patrón elegido vaya desplazándose lentamente en bucle |
Solo un patrón por elemento — el patrón en sí se dibuja detrás del contenido del elemento.
Variables que puedes definir
| Variable | Por defecto | Qué controla |
|---|---|---|
| Background colour | #1F1F33 | El color exterior del gradiente |
| Focus colour | #2D2D76 | El color en la posición del puntero |
| Gradient size | 60vw | El radio del gradiente |
| Pattern colour | #ffffff | Color de las líneas/puntos del patrón |
| Pattern size | 30px | El tamaño de cada celda del patrón |
| Pattern opacity | 0.1 | Cuán visible es el patrón (0–1) |
| Dot size | 1px | Radio de cada punto (solo en el patrón de puntos) |
| Drift X / Drift Y | 100%, 100% | Cuánto se desplaza el patrón por cada bucle (0%, 100% o -100%) |
| Drift duration | 20s | Cuánto dura un bucle de desplazamiento |
- Bricks
- Etch
- Gutenberg
Disponible en los elementos Section, Container, Block y Div: pestaña Style → Gradient background animations. Todas las variables de arriba son controles nativos de color/tamaño/ número en el mismo panel.
El panel de fondo degradado en Bricks.
Añade las clases desde el panel Fancy → Gradient, que escribe las variables como estilos en línea en el elemento por ti.
Con el módulo activado, el panel Gradient Background de la barra lateral del bloque tiene el interruptor de activación, la elección de patrón, el interruptor de desplazamiento, y cada variable de arriba como su propio campo.
Vídeo explicativo
Problemas comunes
- El gradiente no se muestra en absoluto. El elemento ya tiene su propio color de fondo, imagen o gradiente fijado en otro sitio, lo que sobrescribe por completo el fondo del plugin. Elimínalo y usa en su lugar las variables de Background colour/Focus colour.
- El patrón falta, o tu propia decoración
::beforeen el mismo elemento se rompe. Tanto el patrón como muchas técnicas decorativas usan el pseudo-elemento::beforedel elemento — mueve tu propia decoración a un elemento hijo en su lugar. - El elemento ahora se apila de forma rara por encima o por debajo de sus vecinos. Activar
esto fija
position: relative; z-index: 1en el elemento. Fija explícitamente el z-index que realmente necesites. - El patrón es demasiado intenso, o invisible. La opacidad por defecto es 0.1 y el color de patrón por defecto es blanco — sobre un fondo claro, fija el color del patrón en un tono oscuro en su lugar.