Encargo de cliente Sitios web

Sitio web de un festival del queso: una landing page animada

Una landing page para el rediseño de un festival del queso en Kostroma: un programa de tres días en pestañas, las queserías, los souvenirs, las entradas, preguntas y respuestas, y un mapa del recinto. El amarillo cálido y el marrón chocolate de la identidad visual, tipografía grande y animación en cada pantalla. Versiones para escritorio y móvil, además de grabaciones de scroll para la presentación del proyecto.

12: secciones en una sola página
3: días de programa en pestañas
2: versiones: escritorio y móvil

Hablemos de una tarea similar Todos los trabajos: sitios web

Sitio web de un festival del queso: una landing page animada — Una grabación del sitio real: el desplazamiento, las animaciones y las transiciones tal como los ve un visitante. Alterne entre escritorio y móvil; las secciones de la derecha llevan a ese punto de la página. Espacio pone en pausa y las flechas pasan de una sección a otra.

La tarea

Mostrar la nueva identidad del festival en un sitio web: todo lo que necesita un visitante en una sola página, más un vídeo corto del sitio animado para la presentación del proyecto.

Qué hice

Una landing page de doce secciones: sobre el festival, programa, queserías, Kostroma, souvenirs, fotos de ediciones anteriores, entradas, preguntas, mapa y boletín
La primera pantalla cobra vida: el queso cae en el encuadre y rebota, los agujeros y las letras aparecen uno a uno, y después entran deslizándose las fechas y la ciudad
Animación con GSAP y ScrollTrigger: los bloques aparecen al hacer scroll, una cinta de texto en movimiento, parallax en las fotos y la cabecera que se vuelve amarilla al pasar la primera pantalla
El programa de tres días en pestañas, respuestas desplegables y tarjetas que se elevan bajo el puntero
El mapa del recinto, dibujado en SVG: escenarios, puestos, el paseo fluvial y puntos numerados
La versión móvil: una sola columna, menú hamburguesa y botones grandes
Las grabaciones de scroll se capturan fotograma a fotograma: el reloj de la página avanza exactamente un fotograma cada vez, así que la animación nunca se entrecorta

Pruebas

La página reproduce una grabación del sitio en escritorio y en móvil; con un clic se salta a cualquier sección

Materiales

11 · Haga clic en un elemento para ampliarlo

Qué más puede encargarme

Una landing page para un servicio o un curso, con formulario de reserva
Un sitio catálogo: trabajos o productos por secciones, cada uno con su página y un formulario de pedido
Terminar o reconstruir un sitio que empezó otra persona
Conectar los formularios de un sitio en WordPress, Tilda o Bitrix a un CRM y a Telegram
Plantillas de email HTML para envíos desde el CRM
Acelerar un sitio, arreglar la versión móvil, hacer una auditoría SEO

Hablemos de una tarea similar