83b61debae
Three iterations on the entrance animation: - Edit the dotLottie animation in place: drop the "parcel" and "clouds_comp" layers so only the parachute itself remains. Save the result as plain JSON (parachute.json, 15 KB) instead of zipped .lottie since PowerShell's Compress-Archive produces a ZIP that the dotlottie player can't decode. - Replace the five CSS cloud puffs with a single cloud illustration from the user (cloud.png, transparent background) sat behind the CTA text. Bigger, less abstract, more on-brand. - Stretch the drop keyframes from 1.6s to 3.4s — still well below the ~7s the parachute boxes in the background video take to land. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
112 lines
4.2 KiB
HTML
112 lines
4.2 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">
|
|
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.6.2/dist/dotlottie-wc.js" type="module"></script>
|
|
</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>
|
|
|
|
<div class="cta-stack">
|
|
<dotlottie-wc class="cta-parachute"
|
|
src="assets/parachute.json"
|
|
autoplay loop></dotlottie-wc>
|
|
<a href="accueil.html" class="cta-btn cloud-btn">
|
|
<img class="cloud-bg" src="assets/cloud.png" alt="">
|
|
<span class="cloud-content">
|
|
<span data-i18n="intro.ctaBtn">Accéder au site</span>
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
</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>
|