https://github.com/valentinmadiot/background-parallax-mountain_js
Landing page immersive avec effet parallax 3D réactif aux mouvements du curseur. Responsive complet, animations fluides, profondeur visuelle, et design centré sur l’impact visuel en plein écran.
https://github.com/valentinmadiot/background-parallax-mountain_js
3d-animation creative-coding css front-end gsap html immersive-experience interactive-background javascript landing-page motion-design mouse-tracking mousemove parallax pointer-events responsive-design scroll-effects ui-design visual-storytelling web-animation
Last synced: 22 days ago
JSON representation
Landing page immersive avec effet parallax 3D réactif aux mouvements du curseur. Responsive complet, animations fluides, profondeur visuelle, et design centré sur l’impact visuel en plein écran.
- Host: GitHub
- URL: https://github.com/valentinmadiot/background-parallax-mountain_js
- Owner: ValentinMadiot
- Created: 2025-02-18T15:55:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T09:25:07.000Z (11 months ago)
- Last Synced: 2025-10-27T09:27:12.661Z (7 months ago)
- Topics: 3d-animation, creative-coding, css, front-end, gsap, html, immersive-experience, interactive-background, javascript, landing-page, motion-design, mouse-tracking, mousemove, parallax, pointer-events, responsive-design, scroll-effects, ui-design, visual-storytelling, web-animation
- Language: HTML
- Homepage: https://background-parallax-mountain.netlify.app/
- Size: 64.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🏔️ Animation Parallax de Fond – Montagne
##
📌 Sommaire
🎨 [**Introduction**](#introduction)
🛠️ [**Technologies**](#technologies)
🎯 [**Fonctionnalités**](#fonctionnalités)
🚀 [**Installation**](#installation)
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.
- HTML5 sémantique et accessible
- CSS3 moderne avec clamp, backdrop-filter, media queries
- JavaScript ES6 clair et modulaire
- [GSAP](https://greensock.com/gsap/) pour les animations fluides
- API [PointerEvent](https://developer.mozilla.org/fr/docs/Web/API/PointerEvent) pour créer un effet parallax
- 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
### ✅ Prérequis
- [Google Chrome](https://www.google.com/) — Navigateur moderne
- [Visual Studio Code](https://code.visualstudio.com/) — Éditeur de code
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) — Extension VS Code
### 📥 Cloner le projet
```bash
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.