ff8baab8a0
- Background video: aerial cloudscape (Pexels free video, 7.4 MB SD) autoplay, loop, muted; fastest mouse parallax (-45px). Hue-shifted toward navy and slightly desaturated. - Earth-from-space photo overlaid in screen blend mode at 78% opacity so the cloud motion shows through; medium parallax. - Navy night tint preserves brand palette and central legibility. - New SVG route layer: thin red gradient stroke (1.5px) curving Paris → Antananarivo, with a glow filter, a soft halo path beneath, two fixed pin markers at each endpoint, and a white pulse traveling along the path on a 3.6s loop. - Centered card content was stripped to JUST the gold "Accéder au site" button (continuous pulse ring + hover shine + lift). The full text block (welcome / subtitle / 3 meta stats) is gone. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
164 lines
6.8 KiB
HTML
164 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MVA Global Fret — Bienvenue</title>
|
|
<meta name="description" content="MVA Global Fret — Le pont aérien entre Paris et Antananarivo.">
|
|
<link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/parallax.css">
|
|
</head>
|
|
<body class="parallax-body">
|
|
|
|
<header class="parallax-header">
|
|
<div class="parallax-logo" aria-label="MVA Global Fret">
|
|
<img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret">
|
|
<span>MVA Global Fret</span>
|
|
</div>
|
|
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="stage">
|
|
|
|
<!-- Couche 1 : vidéo de nuages aériens (parallaxe la plus marquée) -->
|
|
<video class="layer layer-video"
|
|
autoplay loop muted playsinline preload="auto"
|
|
poster="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&q=70">
|
|
<source src="https://videos.pexels.com/video-files/2098989/2098989-sd_960_540_30fps.mp4" type="video/mp4">
|
|
</video>
|
|
|
|
<!-- Couche 2 : Terre vue depuis l'espace (par-dessus la vidéo, blend) -->
|
|
<div class="layer layer-earth"></div>
|
|
|
|
<!-- Couche 3 : voile bleu pour cohérence palette + lisibilité -->
|
|
<div class="layer layer-tint"></div>
|
|
|
|
<!-- Couche 4 : route Paris ↔ Antananarivo (ligne rouge brillante + pulse) -->
|
|
<div class="layer layer-route">
|
|
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter id="redGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="5" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<linearGradient id="redLine" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ff5b6e" stop-opacity="0.55"/>
|
|
<stop offset="50%" stop-color="#ff2a3d" stop-opacity="1"/>
|
|
<stop offset="100%" stop-color="#ff5b6e" stop-opacity="0.55"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Halo flou autour de la ligne -->
|
|
<path d="M 430 270 Q 620 90 910 600"
|
|
stroke="#ff2a3d" stroke-width="10" fill="none"
|
|
opacity="0.25" filter="url(#redGlow)"/>
|
|
|
|
<!-- Ligne fine principale -->
|
|
<path id="routePath" d="M 430 270 Q 620 90 910 600"
|
|
stroke="url(#redLine)" stroke-width="1.5" fill="none"
|
|
stroke-linecap="round"/>
|
|
|
|
<!-- Pulse qui voyage de Paris vers Tana -->
|
|
<circle r="5" fill="#fff" filter="url(#redGlow)">
|
|
<animateMotion dur="3.6s" repeatCount="indefinite">
|
|
<mpath href="#routePath"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="3.6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="11" fill="#ff2a3d" opacity="0.6" filter="url(#redGlow)">
|
|
<animateMotion dur="3.6s" repeatCount="indefinite">
|
|
<mpath href="#routePath"/>
|
|
</animateMotion>
|
|
<animate attributeName="opacity" values="0;0.6;0.6;0" keyTimes="0;0.1;0.9;1" dur="3.6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Points fixes Paris et Antananarivo -->
|
|
<g transform="translate(430 270)">
|
|
<circle r="14" fill="#ff2a3d" opacity="0.18"/>
|
|
<circle r="6" fill="#ff2a3d" opacity="0.45" filter="url(#redGlow)"/>
|
|
<circle r="3" fill="#fff"/>
|
|
</g>
|
|
<g transform="translate(910 600)">
|
|
<circle r="14" fill="#ff2a3d" opacity="0.18"/>
|
|
<circle r="6" fill="#ff2a3d" opacity="0.45" filter="url(#redGlow)"/>
|
|
<circle r="3" fill="#fff"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Bouton centré : juste "Accéder au site" -->
|
|
<a href="accueil.html" class="cta-btn">
|
|
<span class="cta-btn-shine"></span>
|
|
<span data-i18n="intro.ctaBtn">Accéder au site</span>
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
</a>
|
|
|
|
</main>
|
|
|
|
<script src="js/translations.js"></script>
|
|
<script>
|
|
// ── i18n minimal ─────────────────────────────────────────────────────────
|
|
(function () {
|
|
const lang = localStorage.getItem('mva-lang') || 'fr';
|
|
applyLang(lang);
|
|
document.querySelectorAll('.lang-switcher button').forEach(btn => {
|
|
btn.addEventListener('click', () => applyLang(btn.dataset.lang));
|
|
});
|
|
function applyLang(l) {
|
|
document.documentElement.lang = l;
|
|
localStorage.setItem('mva-lang', l);
|
|
document.querySelectorAll('.lang-switcher button').forEach(b =>
|
|
b.classList.toggle('active', b.dataset.lang === l)
|
|
);
|
|
const t = window.translations?.[l];
|
|
if (!t) return;
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
const keys = el.dataset.i18n.split('.');
|
|
let v = t;
|
|
for (const k of keys) v = v?.[k];
|
|
if (v != null) el.textContent = v;
|
|
});
|
|
}
|
|
})();
|
|
|
|
// ── Mouse parallaxe avec easing ──────────────────────────────────────────
|
|
(function () {
|
|
const root = document.documentElement;
|
|
let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
|
|
const ease = 0.06;
|
|
|
|
function loop() {
|
|
currentX += (targetX - currentX) * ease;
|
|
currentY += (targetY - currentY) * ease;
|
|
root.style.setProperty('--mx', currentX.toFixed(4));
|
|
root.style.setProperty('--my', currentY.toFixed(4));
|
|
requestAnimationFrame(loop);
|
|
}
|
|
loop();
|
|
|
|
window.addEventListener('mousemove', (e) => {
|
|
targetX = (e.clientX / window.innerWidth - 0.5) * 2;
|
|
targetY = (e.clientY / window.innerHeight - 0.5) * 2;
|
|
}, { passive: true });
|
|
|
|
window.addEventListener('deviceorientation', (e) => {
|
|
if (e.gamma == null || e.beta == null) return;
|
|
targetX = Math.max(-1, Math.min(1, e.gamma / 30));
|
|
targetY = Math.max(-1, Math.min(1, (e.beta - 45) / 30));
|
|
}, { passive: true });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|