Projet client Sites web

Le site d’un festival du fromage : une landing page animée

Une landing page pour la refonte visuelle d’un festival du fromage à Kostroma : un programme de trois jours en onglets, les fromageries participantes, les souvenirs, la billetterie, les questions fréquentes et un plan des lieux. Le jaune chaud et le brun chocolat de l’identité visuelle, une typographie généreuse et de l’animation sur chaque écran. Des versions pour ordinateur et pour téléphone, ainsi que des enregistrements du défilement pour la présentation du projet.

12: sections sur une seule page
3: jours de programme en onglets
2: versions : ordinateur et téléphone

Discuter d’une tâche similaire Toutes les réalisations : sites web

Le site d’un festival du fromage : une landing page animée — Un enregistrement du site en ligne : le défilement, les animations et les transitions tels que les voit un visiteur. Basculez entre ordinateur et téléphone ; les sections à droite renvoient à l’endroit correspondant de la page. La touche Espace met en pause, les touches fléchées font passer d’une section à l’autre.

La tâche

Montrer la nouvelle identité du festival sur un site web : tout ce dont un visiteur a besoin sur une seule page, plus une courte vidéo du site animé pour la présentation du projet.

Ce que j’ai fait

Une landing page de douze sections : présentation, programme, fromageries, Kostroma, souvenirs, photos des éditions précédentes, billetterie, questions, plan et newsletter
Le premier écran prend vie : le fromage tombe dans le cadre et rebondit, les trous et les lettres apparaissent un à un, puis les dates et la ville apparaissent en glissant
Animation avec GSAP et ScrollTrigger : blocs qui apparaissent au défilement, bandeau défilant, parallaxe sur les photos, en-tête qui passe au jaune après le premier écran
Le programme des trois jours en onglets, des réponses qui se déplient, des cartes qui se soulèvent sous le pointeur
Le plan des lieux est dessiné en SVG : scènes, stands, quai et points numérotés
La version mobile : une seule colonne, un menu burger, de grands boutons
Les enregistrements du défilement sont capturés image par image : l’horloge de la page avance exactement d’une image à la fois, si bien que l’animation ne saccade jamais

Preuves

La page diffuse un enregistrement du site sur ordinateur et sur téléphone ; un clic permet de passer à n’importe quelle section

Visuels

11 · Cliquez sur un élément pour l’agrandir

Ce que vous pouvez aussi me confier

Une landing page pour un service ou une formation, avec formulaire de réservation
Un site catalogue : réalisations ou produits par rubrique, chacun avec sa page et un formulaire de commande
Terminer ou refaire un site commencé par quelqu’un d’autre
Connecter les formulaires d’un site WordPress, Tilda ou Bitrix à un CRM et à Telegram
Modèles d’e-mails HTML pour les envois depuis le CRM
Accélérer un site, corriger la version mobile, réaliser un audit SEO

Discuter d’une tâche similaire