Koukaki

Intégration d'un menu burger qui s'ouvre en full screen au format smartphone :

• Au clic du burger, il se transforme en croix.
• Le menu s’ouvre en fade.
• Animations des images de background
• Les liens sont animés au survol

Intégration et configuration d’un carrousel avec la bibliothèque Swiper JS en utilisant l’effet 'coverflow'. Le carrousel affiche plusieurs slides simultanément, avec un défilement automatique inversé (de droite à gauche) toutes les 2 secondes, même après interaction. L’effet coverflow applique une rotation et un décalage aux slides pour un rendu dynamique. Le nombre de slides visibles et les espacements s’adaptent en fonction de la largeur de l’écran pour une expérience responsive optimale.

Intégration d’une vidéo en arrière-plan pour la section hero avec un effet de parallaxe entre le logo et l’image de fond.
Au défilement, le logo reste fixe tandis que la vidéo monte. Lorsqu’il atteint la limite de l’image d’arrière-plan, il suit le scroll et monte à son tour.

Mise en place d’une image de fallback pour remplacer la vidéo en cas de connexion lente.

Animation du logo avec une effet de flottement.

Sur mobile, la vidéo est remplacée par une image statique.

Intégration d'une animation au titre de chaque section. Le contenu apparait avec un effet de fade-up au scroll.

Intégration de rotation et de flottements des images de background de toutes les sections.

Animation des nuages dans la section 'Lieu' avec un effet de parallaxe horizontal. Au défilement, les nuages se déplacent latéralement de droite à gauche sur une distance proportionnelle au scroll, jusqu'à 300 px. Le grand nuage se déplace plus lentement, tandis que le petit nuage a une vitesse légèrement supérieure pour créer un effet de profondeur.