🏔️ Animation Parallax de Fond  –  Montagne

📌 Sommaire

    🎨   Introduction
    🛠️   Technologies
    🎯   Fonctionnalités
    🚀   Installation

🎨 Introduction

Plongez dans un panorama 3D inspiré des pics des chaînes montagneuses chinoises. Chaque couche, montagnes, nappes de brume et typographie se déplace subtilement en réponse aux mouvements du curseur, créant un effet parallax profondément immersif.

L’environnement se redimensionne automatiquement pour remplir tout le viewport sans jamais masquer le titre, assurant une expérience visuelle fluide sur desktop, tablette ou mobile. L’immersion atteint toutefois son apogée sur les grands écrans, où la profondeur et les détails sont sublimés.

Parfaite pour magnifier un portfolio, une page d’accueil ou toute présentation créative qui veut captiver dès le premier regard.

🛠️ Technologies

• HTML5 sémantique et accessible
• CSS3 moderne avec clamp, backdrop-filter, media queries
• JavaScript ES6 clair et modulaire
• GSAP pour les animations fluides
• API PointerEvent pour créer un effet parallax

🎯 Fonctionnalités

• Animation parallax en X, Y, Z avec rotation
• Titres animés avec entrée fluide via GSAP
• Rendu plein écran centrée et scalée dynamiquement
• Responsive sur mobile, tablette et desktop
• Vignette sombre pour renforcer le contraste
• Code optimisé, sans dépendance inutile
• Chargement fluide, sans flash initial
• Compatible HD et écrans 4K
• Effet de profondeur actif même sans scroll

🚀 Installation

✅ Prérequis

• Google Chrome  —  Navigateur moderne
• Visual Studio Code  —  Éditeur de code
• Live Server  —  Extension VS Code

📥 Cloner le projet

git clone https://github.com/ValentinMadiot/background-parallax-mountain_js
cd background-parallax-mountain_js

▶️ Lancer le projet

Il suffit d’ouvrir le fichier index.html dans un navigateur, ou d’utiliser l’extension Live Server sur VS Code pour un aperçu dynamique.