Animaciones de entrada
Los títulos aparecen con fundido y el visual del hero entra rotando al cargar, con las animaciones propias de Elementor.
EL CONTEXTO
Una empresa de software que vende conexión.
El cliente, una empresa del Reino Unido, ofrece software y servicios de expertos para equipos de compliance, seguridad e instalaciones, en torno a una idea: conectar todo lo de compliance en un solo lugar. El sitio tenía que mostrar esa idea, no solo decirla.
EL DESAFÍO
Un sitio B2B tiene mucho para explicar y aun así tiene que sentirse como una sola cosa conectada. Los objetivos:
- Darle a la home un fondo que reaccione a quien visita, con código a medida liviano
- Convertir el ecosistema de siete módulos en un diagrama que se pueda explorar, no en una imagen estática
- Que todo funcione en tablet y celular, con versiones más simples donde no existe el hover
MI ROL
Armarlo y programar lo que el constructor no puede.
- Desarrollo WordPress con Elementor
- HTML, CSS y JavaScript a medida para las partes interactivas
- Versiones responsive para tablet y celular
El diseño visual lo entregó Three Lemurs en PDF. El armado y el código a medida son míos.
STACK
- WordPress
- Elementor
- HTML
- CSS
- JavaScript
- Filtros SVG
- Video WebM / MOV
- Carrusel de imágenes
- YouTube embebido
- Responsive
PROBLEMAS Y SOLUCIONES
Cuatro piezas de comportamiento a medida.
01
Un fondo que sigue al cursor
EL PROBLEMA
Un hero estático no dice “conectado”. Quería que la primera pantalla reaccionara a quien visita sin volver lenta la página.
LO QUE HICE
- Cinco manchas suaves de gradiente van detrás del título. Un filtro SVG “goo” (desenfoque más una matriz de color) las fusiona como si fueran líquido.
- Una de las manchas sigue al mouse: un script corto la mueve a la posición del cursor en cada mousemove.
- Unas diez líneas de JavaScript, sin librerías de animación, dentro de un widget HTML de Elementor.
02
Un ecosistema para explorar
EL PROBLEMA
El producto del cliente tiene siete módulos conectados. Un diagrama estático no puede mostrar qué hace cada uno.
LO QUE HICE
- Una imagen base con siete círculos interactivos encima, uno por módulo.
- Al pasar el mouse o hacer clic en un círculo, cambia la imagen del diagrama y aparece un panel de texto con un enlace a ese módulo.
- Al salir del diagrama se vuelve a la vista base. En tablet y celular la página muestra un diagrama estático.
03
Video de marca en el hero
EL PROBLEMA
Una animación del logo tenía que reproducirse detrás del hero sin competir con el título ni fallar en Safari.
LO QUE HICE
- El video se reproduce solo, en bucle y sin sonido, al 30% de opacidad para que el título se lea bien.
- Dos formatos: MOV para Safari y WebM para los demás navegadores, para que funcione en todos.
- Se oculta en tablet y celular, donde lo reemplaza una ilustración SVG estática.
04
Piezas responsive
EL PROBLEMA
Una tira de logos de clientes y tres bloques de valor tenían que aguantar desde la compu hasta el celular.
LO QUE HICE
- Un carrusel de logos que avanza solo, en bucle y se pausa al pasar el mouse: 6 logos por vista en compu, 3 en tablet y 2 en celular.
- Bloques “Por qué elegirnos” con íconos SVG verdes propios, armados en Elementor.
- Un video de YouTube embebido que carga de forma diferida, para no pesar en la primera carga.
TAMBIÉN ARMÉ
El resto del sitio.
Páginas de módulo
Cada panel del ecosistema enlaza a su propia página del sitio.
Cambio responsive
El video y el diagrama son solo para compu, con versiones más livianas en tablet y celular.
Primero el constructor, después el código
Armado en Elementor, con código a medida solo donde el constructor no llegaba.