serge/site-mva-global-fret
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Switch parallax intro to Earth-from-space video, drop static photo overlay

Browse Source 
Replace clouds video (Pexels 2098989) with actual Earth-from-space footage
(Pexels 854275 — Europe/Africa visible + orbiting satellite) and remove
the static Unsplash Earth photo layer that was overlaying the video.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret 2026-05-04 23:08:28 +02:00
parent ff8baab8a0
commit e23cc9ee33
2 changed files with 8 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/parallax.css
View File

@ -1,6 +1,6 @@
/* ========================================================================= /* =========================================================================
PARALLAX INTRO — MVA Global Fret PARALLAX INTRO — MVA Global Fret
Page unique, fixe (pas de scroll). Vidéo de fond + Terre + ligne rouge Page unique, fixe (pas de scroll). Vidéo Terre depuis l'espace + ligne rouge
Paris↔Antananarivo + bouton centré. Bouge à la souris. Paris↔Antananarivo + bouton centré. Bouge à la souris.
========================================================================= */ ========================================================================= */
@ -100,7 +100,7 @@ html, body {
} }
/* ────────────────────────────────────────────────────────────────────────── /* ──────────────────────────────────────────────────────────────────────────
COUCHE 1 — VIDÉO de nuages aériens (Pexels, libre) COUCHE 1 — VIDÉO Terre depuis l'espace (Pexels 854275, libre)
Bouge le PLUS à la souris (effet de profondeur). Bouge le PLUS à la souris (effet de profondeur).
────────────────────────────────────────────────────────────────────────── */ ────────────────────────────────────────────────────────────────────────── */
.layer-video { .layer-video {
@ -113,18 +113,7 @@ html, body {
} }
/* ────────────────────────────────────────────────────────────────────────── /* ──────────────────────────────────────────────────────────────────────────
COUCHE 2 — TERRE depuis l'espace (photo NASA / Unsplash) COUCHE 2 — Voile bleu nuit (palette MVA)
Superposée à la vidéo en mode screen → on voit la motion en transparence.
────────────────────────────────────────────────────────────────────────── */
.layer-earth {
background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=2400&q=85') center/cover no-repeat;
opacity: 0.78;
mix-blend-mode: screen;
transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)) scale(1.04);
}
/* ──────────────────────────────────────────────────────────────────────────
COUCHE 3 — Voile bleu nuit (palette MVA)
────────────────────────────────────────────────────────────────────────── */ ────────────────────────────────────────────────────────────────────────── */
.layer-tint { .layer-tint {
background: background:
@ -233,5 +222,5 @@ html, body {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.cta-btn::after { animation: none; } .cta-btn::after { animation: none; }
.layer-video, .layer-earth, .layer-route, .cta-btn { transition: none; } .layer-video, .layer-route, .cta-btn { transition: none; }
} }

11
index.html
View File

@ -28,17 +28,14 @@
<main class="stage"> <main class="stage">
<!-- Couche 1 : vidéo de nuages aériens (parallaxe la plus marquée) --> <!-- Couche 1 : vidéo Terre depuis l'espace (parallaxe la plus marquée) -->
<video class="layer layer-video" <video class="layer layer-video"
autoplay loop muted playsinline preload="auto" autoplay loop muted playsinline preload="auto"
poster="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&q=70"> poster="https://images.pexels.com/videos/854275/free-video-854275.jpg">
<source src="https://videos.pexels.com/video-files/2098989/2098989-sd_960_540_30fps.mp4" type="video/mp4"> <source src="https://videos.pexels.com/video-files/854275/854275-sd_960_540_30fps.mp4" type="video/mp4">
</video> </video>
<!-- Couche 2 : Terre vue depuis l'espace (par-dessus la vidéo, blend) --> <!-- Couche 2 : voile bleu pour cohérence palette + lisibilité -->
<div class="layer layer-earth"></div>
<!-- Couche 3 : voile bleu pour cohérence palette + lisibilité -->
<div class="layer layer-tint"></div> <div class="layer layer-tint"></div>
<!-- Couche 4 : route Paris ↔ Antananarivo (ligne rouge brillante + pulse) --> <!-- Couche 4 : route Paris ↔ Antananarivo (ligne rouge brillante + pulse) -->