https://github.com/valentinmadiot/background-parallax-egypt_js
Animation parallax immersive sur fond de désert égyptien, combinant plusieurs calques animés au scroll pour créer un rendu visuel cinématographique. Design responsive, scroll fluide.
https://github.com/valentinmadiot/background-parallax-egypt_js
animated-title background-animation cinematic-effects creative-coding css-animations egypt gsap-alternative html-css landing-page minimalist-ui no-dependencies parallax portfolio-hero pure-css remixicons requestanimationframe responsive-design scroll-animations vanilla-javascript web-animation
Last synced: 8 months ago
JSON representation
Animation parallax immersive sur fond de désert égyptien, combinant plusieurs calques animés au scroll pour créer un rendu visuel cinématographique. Design responsive, scroll fluide.
- Host: GitHub
- URL: https://github.com/valentinmadiot/background-parallax-egypt_js
- Owner: ValentinMadiot
- Created: 2025-07-01T21:30:51.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-07-02T11:39:18.000Z (8 months ago)
- Last Synced: 2025-07-02T12:41:41.163Z (8 months ago)
- Topics: animated-title, background-animation, cinematic-effects, creative-coding, css-animations, egypt, gsap-alternative, html-css, landing-page, minimalist-ui, no-dependencies, parallax, portfolio-hero, pure-css, remixicons, requestanimationframe, responsive-design, scroll-animations, vanilla-javascript, web-animation
- Language: CSS
- Homepage: https://background-parallax-egypt.netlify.app/
- Size: 8.11 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🐪 Animation Parallax de Fond – Égypte
##
📌 Sommaire
🎨 [**Introduction**](#introduction)
🛠️ [**Technologies**](#technologies)
🎯 [**Fonctionnalités**](#fonctionnalités)
🚀 [**Installation**](#installation)
Plongez dans un paysage égyptien animé, où cinq calques (ciel, pyramide, rocher, voyageur, titre) défilent à des vitesses variées pour un effet parallax immersif.
Le mot « Égypte » glisse latéralement avec fluidité, toujours visible à l’écran. L’animation au scroll est optimisée via **requestAnimationFrame** pour un rendu fluide, même sur mobile.
- HTML5 sémantique et accessible
- CSS3 moderne avec clamp, media queries, reset minimal
- JavaScript ES6 clair et modulaire
- [Remix Icons](https://remixicon.com/) pour les icônes vectorielles
- API [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) pour des animations fluides
- Parallax multi-couches fluide en X et Y déclenché au scroll
- Titre animé en profondeur avec translation synchronisée
- Menu mobile responsive avec ouverture et fermeture fluide
- Affichage optimisé sur mobile, tablette et desktop
- Code léger en Vanilla JS, sans dépendances externes
- Palette harmonieuse avec des tons sable et brun antique
- Chargement propre, sans flash ni décalage de contenu
- Accessibilité avec titres, alt images et focus clair
### ✅ 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-egypt_js
cd background-parallax-egypt_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.