5756669c67
Swap the rotating Earth backdrop for an AI-generated golden-hour shot of Antananarivo's skyline with navy cardboard boxes parachuting in from across the frame. The hero box at center gets the MVA Global Fret shield overlaid for the last second of the loop, so each cycle ends on a brand reveal. Pipeline: source video cropped (bottom 150px) to remove the HeyGen watermark, audio stripped, MVA logo composited on the foreground box from t=4 to t=5 with a 0.3s alpha fade-in, re-encoded to H.264 at CRF 22 (1.1 MB total). Tint overlay softened — the original navy gradient was tuned for the dark space backdrop and was crushing the golden hour light. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
104 lines
3.9 KiB
HTML
104 lines
3.9 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">
|
|
|
|
<video class="layer layer-video" id="introVideo"
|
|
autoplay loop muted playsinline preload="auto"
|
|
poster="videos/parachute-poster.jpg">
|
|
<source src="videos/parachute-drop.mp4" type="video/mp4">
|
|
</video>
|
|
|
|
<div class="layer layer-tint"></div>
|
|
|
|
<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;
|
|
});
|
|
}
|
|
})();
|
|
|
|
/* Parallaxe souris : la vidéo et le bouton se décalent légèrement.
|
|
--mx, --my sont des floats dans [-1, +1] mappés sur la position
|
|
souris, avec easing. Sur mobile, on utilise l'orientation du device. */
|
|
(function () {
|
|
const root = document.documentElement;
|
|
let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
|
|
const ease = 0.08;
|
|
|
|
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>
|