ca8538b331
Previous SVG illustrations and emojis were dropped per user feedback.
The new intro is a single fixed viewport (no scroll) where every
layer reacts to mouse movement only:
Layer 1 — Real photo: Earth at night from space (NASA / Unsplash),
slow parallax (-18px max).
Layer 2 — Navy gradient tint to anchor the brand palette and
ensure central card legibility.
Layer 3 — Real photo: aerial sunset clouds (Unsplash), 28%
opacity with mix-blend-mode soft-light, faster
parallax (-32px max).
Layer 4 — Gold radial glow that follows the cursor (mix-blend
screen), giving an interactive "spotlight" feel.
Layer 5 — 12 floating gold particles with continuous CSS
animation, fastest parallax (-55px max).
Center card (glassmorphism, navy + gold border, blur 24px) tilts in
the OPPOSITE direction (+12px) for a 3D depth illusion. The CTA
button has a continuous pulse ring, hover lift + shine sweep, and
routes to accueil.html.
Mobile: device-orientation events drive the parallax instead of
mouse. prefers-reduced-motion kills all animations.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
141 lines
5.7 KiB
HTML
141 lines
5.7 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. Bienvenue à bord.">
|
|
<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 minimal -->
|
|
<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>
|
|
|
|
<!-- Stage parallaxe : tout est sur une seule page, contrôlé par la souris -->
|
|
<main class="stage">
|
|
|
|
<!-- Couche 1 : Terre vue depuis l'espace (la plus loin, parallaxe la plus lente) -->
|
|
<div class="layer layer-earth"></div>
|
|
|
|
<!-- Couche 2 : voile bleu pour assombrir + assurer la lisibilité -->
|
|
<div class="layer layer-tint"></div>
|
|
|
|
<!-- Couche 3 : nuages aériens au coucher de soleil (blend mode pour fusionner) -->
|
|
<div class="layer layer-clouds"></div>
|
|
|
|
<!-- Couche 4 : halo doré central -->
|
|
<div class="layer layer-glow"></div>
|
|
|
|
<!-- Couche 5 : particules dorées flottantes (la plus rapide) -->
|
|
<div class="layer layer-particles">
|
|
<span class="particle p1"></span>
|
|
<span class="particle p2"></span>
|
|
<span class="particle p3"></span>
|
|
<span class="particle p4"></span>
|
|
<span class="particle p5"></span>
|
|
<span class="particle p6"></span>
|
|
<span class="particle p7"></span>
|
|
<span class="particle p8"></span>
|
|
<span class="particle p9"></span>
|
|
<span class="particle p10"></span>
|
|
<span class="particle p11"></span>
|
|
<span class="particle p12"></span>
|
|
</div>
|
|
|
|
<!-- Carte centrale : CTA -->
|
|
<div class="center-card">
|
|
<div class="card-pretitle" data-i18n="intro.pretitle">Bienvenue chez</div>
|
|
<h1 class="card-title">MVA Global Fret</h1>
|
|
<div class="card-line"></div>
|
|
<p class="card-subtitle" data-i18n="intro.subtitle">Le pont aérien entre Paris et Madagascar</p>
|
|
|
|
<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>
|
|
|
|
<div class="card-meta">
|
|
<span><i class="fa-solid fa-plane"></i> <span data-i18n="intro.metaShipments">2 envois / semaine</span></span>
|
|
<span class="meta-sep">·</span>
|
|
<span><i class="fa-solid fa-clock"></i> <span data-i18n="intro.metaDelay">2 semaines depuis Paris</span></span>
|
|
<span class="meta-sep">·</span>
|
|
<span><i class="fa-solid fa-tag"></i> <span data-i18n="intro.metaPrice">70 000 Ar / kg</span></span>
|
|
</div>
|
|
</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;
|
|
});
|
|
}
|
|
})();
|
|
|
|
// ── Mouse parallaxe avec easing fluide ───────────────────────────────────
|
|
(function () {
|
|
const root = document.documentElement;
|
|
let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
|
|
const ease = 0.07;
|
|
|
|
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 });
|
|
|
|
// Mobile : effet basé sur l'orientation de l'appareil
|
|
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>
|