1ddd7b12d8
The new index.html is a 3-act scroll-driven storytelling intro:
Act 1 (Tarmac at sunset)
Sunset gradient sky, mountain silhouettes, hangar, runway with
centerline lights. Inline SVG cargo plane (MVA-branded gold tail)
sits on the ground while box emojis cycle up a loading ramp.
Act 2 (Take-off at dusk)
Dusk sky, two parallax cloud layers and distant mountains. The
plane translates diagonally up-and-right with a slight tilt and
a glowing contrail, sized down progressively.
Act 3 (Arrival at night)
Deep navy night sky with twinkling stars, a glowing moon, and
the Madagascar coastline silhouette. A small plane fades in
descending toward the island, then a centered CTA block reveals:
"Bienvenue à bord" with the gold "Accéder au site" button that
routes to accueil.html (the real homepage).
Implementation:
- Pure CSS layered scenes; no library
- Scroll progress driven by a single CSS custom property --scroll
(0→1) updated via rAF, layers transform off it
- Mouse-move parallax on layers via --mx/--my (skipped on touch)
- Inline SVG plane reused across the 3 scenes
- All text is i18n-driven with a new `intro` section in FR/EN/MG
Architecture changes:
- index.html → new parallax intro
- accueil.html → former index.html content (full homepage)
- All nav/logo/footer links updated index.html → accueil.html across
the 8 existing pages
- Mobile-nav on accueil.html now also includes Service Commande
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
267 lines
13 KiB
HTML
267 lines
13 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 : logo + skip + lang -->
|
|
<header class="parallax-header">
|
|
<a href="accueil.html" class="parallax-logo" aria-label="MVA Global Fret">
|
|
<img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret">
|
|
<span>MVA Global Fret</span>
|
|
</a>
|
|
<div class="parallax-header-right">
|
|
<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>
|
|
<a href="accueil.html" class="parallax-skip" data-i18n="intro.skip">Passer <i class="fa-solid fa-arrow-right"></i></a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ÉTAGE 1 — Tarmac : avion qui se charge -->
|
|
<section class="parallax-scene scene-tarmac" data-scene="1">
|
|
<!-- Ciel coucher de soleil -->
|
|
<div class="layer sky"></div>
|
|
<div class="layer sun"></div>
|
|
<div class="layer stars"></div>
|
|
<!-- Montagnes lointaines -->
|
|
<div class="layer mountains"></div>
|
|
<!-- Hangar arrière-plan -->
|
|
<div class="layer hangar"></div>
|
|
<!-- Tarmac -->
|
|
<div class="layer tarmac"></div>
|
|
|
|
<!-- Avion immobile au sol -->
|
|
<div class="plane-stage plane-loading">
|
|
<svg class="plane" viewBox="0 0 600 180" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<!-- Aile arrière -->
|
|
<path d="M 220 100 L 320 110 L 360 130 L 240 130 Z" fill="#d8d8e3" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<!-- Fuselage -->
|
|
<path d="M 60 100 Q 60 70 110 65 L 480 65 Q 540 65 555 85 Q 555 105 530 110 L 110 110 Q 60 110 60 100 Z" fill="#fafafa" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<!-- Bande dorée -->
|
|
<rect x="110" y="76" width="380" height="3" fill="#c5a55a"/>
|
|
<!-- Cockpit -->
|
|
<path d="M 75 88 Q 80 76 95 74 L 105 74 L 105 92 L 80 92 Z" fill="#1a1a3e"/>
|
|
<!-- Hublots -->
|
|
<g fill="#1a1a3e">
|
|
<circle cx="135" cy="88" r="3"/>
|
|
<circle cx="160" cy="88" r="3"/>
|
|
<circle cx="185" cy="88" r="3"/>
|
|
<circle cx="210" cy="88" r="3"/>
|
|
<circle cx="235" cy="88" r="3"/>
|
|
<circle cx="260" cy="88" r="3"/>
|
|
<circle cx="285" cy="88" r="3"/>
|
|
<circle cx="310" cy="88" r="3"/>
|
|
<circle cx="335" cy="88" r="3"/>
|
|
<circle cx="360" cy="88" r="3"/>
|
|
<circle cx="385" cy="88" r="3"/>
|
|
<circle cx="410" cy="88" r="3"/>
|
|
<circle cx="435" cy="88" r="3"/>
|
|
<circle cx="460" cy="88" r="3"/>
|
|
</g>
|
|
<!-- Porte cargo -->
|
|
<rect x="120" y="78" width="22" height="22" fill="none" stroke="#1a1a3e" stroke-width="1"/>
|
|
<!-- Aile principale + moteur -->
|
|
<path d="M 180 100 L 380 145 L 430 145 L 280 100 Z" fill="#e8e8ef" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<ellipse cx="320" cy="145" rx="22" ry="9" fill="#1a1a3e"/>
|
|
<ellipse cx="320" cy="145" rx="14" ry="5" fill="#3a3a5e"/>
|
|
<!-- Empennage vertical -->
|
|
<path d="M 480 65 L 510 25 L 540 25 L 555 65 Z" fill="#c5a55a" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<text x="510" y="50" font-family="Poppins, sans-serif" font-size="10" font-weight="700" fill="#1a1a3e">MVA</text>
|
|
<!-- Stabilisateur horizontal -->
|
|
<path d="M 510 70 L 580 50 L 580 65 L 530 80 Z" fill="#fafafa" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<!-- Train d'atterrissage -->
|
|
<line x1="220" y1="110" x2="220" y2="135" stroke="#1a1a3e" stroke-width="2"/>
|
|
<circle cx="220" cy="140" r="6" fill="#1a1a3e"/>
|
|
<line x1="450" y1="110" x2="450" y2="135" stroke="#1a1a3e" stroke-width="2"/>
|
|
<circle cx="450" cy="140" r="6" fill="#1a1a3e"/>
|
|
</svg>
|
|
|
|
<!-- Rampe de chargement -->
|
|
<div class="ramp"></div>
|
|
|
|
<!-- Boîtes qui se chargent -->
|
|
<div class="box box-1">📦</div>
|
|
<div class="box box-2">📦</div>
|
|
<div class="box box-3">📦</div>
|
|
|
|
<!-- Pile de boîtes au sol -->
|
|
<div class="ground-boxes">
|
|
<div class="ground-box gb-1"></div>
|
|
<div class="ground-box gb-2"></div>
|
|
<div class="ground-box gb-3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Texte hero -->
|
|
<div class="scene-text scene-text--hero">
|
|
<div class="hero-pretitle" data-i18n="intro.pretitle">Bienvenue chez</div>
|
|
<h1 class="hero-title">MVA Global Fret</h1>
|
|
<div class="hero-line"></div>
|
|
<p class="hero-subtitle" data-i18n="intro.subtitle">Le pont aérien entre Paris et Madagascar</p>
|
|
</div>
|
|
|
|
<!-- Indicateur de scroll -->
|
|
<div class="scroll-indicator">
|
|
<span data-i18n="intro.scrollHint">Faites défiler pour le voyage</span>
|
|
<div class="scroll-mouse"><span></span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ÉTAGE 2 — Décollage -->
|
|
<section class="parallax-scene scene-takeoff" data-scene="2">
|
|
<div class="layer sky-2"></div>
|
|
<div class="layer clouds-far"></div>
|
|
<div class="layer clouds-mid"></div>
|
|
<div class="layer mountains-2"></div>
|
|
|
|
<!-- Avion qui décolle -->
|
|
<div class="plane-stage plane-takeoff">
|
|
<svg class="plane" viewBox="0 0 600 180" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path d="M 220 100 L 320 110 L 360 130 L 240 130 Z" fill="#d8d8e3" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<path d="M 60 100 Q 60 70 110 65 L 480 65 Q 540 65 555 85 Q 555 105 530 110 L 110 110 Q 60 110 60 100 Z" fill="#fafafa" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<rect x="110" y="76" width="380" height="3" fill="#c5a55a"/>
|
|
<path d="M 75 88 Q 80 76 95 74 L 105 74 L 105 92 L 80 92 Z" fill="#1a1a3e"/>
|
|
<g fill="#1a1a3e">
|
|
<circle cx="135" cy="88" r="3"/><circle cx="160" cy="88" r="3"/><circle cx="185" cy="88" r="3"/>
|
|
<circle cx="210" cy="88" r="3"/><circle cx="235" cy="88" r="3"/><circle cx="260" cy="88" r="3"/>
|
|
<circle cx="285" cy="88" r="3"/><circle cx="310" cy="88" r="3"/><circle cx="335" cy="88" r="3"/>
|
|
<circle cx="360" cy="88" r="3"/><circle cx="385" cy="88" r="3"/><circle cx="410" cy="88" r="3"/>
|
|
<circle cx="435" cy="88" r="3"/><circle cx="460" cy="88" r="3"/>
|
|
</g>
|
|
<path d="M 180 100 L 380 145 L 430 145 L 280 100 Z" fill="#e8e8ef" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<ellipse cx="320" cy="145" rx="22" ry="9" fill="#1a1a3e"/>
|
|
<ellipse cx="320" cy="145" rx="14" ry="5" fill="#3a3a5e"/>
|
|
<path d="M 480 65 L 510 25 L 540 25 L 555 65 Z" fill="#c5a55a" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<text x="510" y="50" font-family="Poppins, sans-serif" font-size="10" font-weight="700" fill="#1a1a3e">MVA</text>
|
|
<path d="M 510 70 L 580 50 L 580 65 L 530 80 Z" fill="#fafafa" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
</svg>
|
|
<!-- Traînée de condensation -->
|
|
<div class="contrail"></div>
|
|
</div>
|
|
|
|
<!-- Texte étape 2 -->
|
|
<div class="scene-text scene-text--takeoff">
|
|
<div class="step-marker">02</div>
|
|
<h2 data-i18n="intro.step2Title">Décollage</h2>
|
|
<p data-i18n="intro.step2Desc">Cap sur l'océan Indien, direction Madagascar</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ÉTAGE 3 — Arrivée -->
|
|
<section class="parallax-scene scene-arrival" data-scene="3">
|
|
<div class="layer night-sky"></div>
|
|
<div class="layer night-stars"></div>
|
|
<div class="layer moon"></div>
|
|
<div class="layer madagascar-silhouette"></div>
|
|
|
|
<!-- Petit avion en approche -->
|
|
<div class="plane-stage plane-arrival">
|
|
<svg class="plane plane-small" viewBox="0 0 600 180" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path d="M 220 100 L 320 110 L 360 130 L 240 130 Z" fill="#d8d8e3" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<path d="M 60 100 Q 60 70 110 65 L 480 65 Q 540 65 555 85 Q 555 105 530 110 L 110 110 Q 60 110 60 100 Z" fill="#fafafa" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<rect x="110" y="76" width="380" height="3" fill="#c5a55a"/>
|
|
<path d="M 75 88 Q 80 76 95 74 L 105 74 L 105 92 L 80 92 Z" fill="#1a1a3e"/>
|
|
<path d="M 180 100 L 380 145 L 430 145 L 280 100 Z" fill="#e8e8ef" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<ellipse cx="320" cy="145" rx="22" ry="9" fill="#1a1a3e"/>
|
|
<path d="M 480 65 L 510 25 L 540 25 L 555 65 Z" fill="#c5a55a" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
<text x="510" y="50" font-family="Poppins, sans-serif" font-size="10" font-weight="700" fill="#1a1a3e">MVA</text>
|
|
<path d="M 510 70 L 580 50 L 580 65 L 530 80 Z" fill="#fafafa" stroke="#1a1a3e" stroke-width="1.5"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Bloc CTA final -->
|
|
<div class="parallax-cta-block">
|
|
<div class="cta-pretitle" data-i18n="intro.ctaPretitle">Antananarivo</div>
|
|
<h2 class="cta-title" data-i18n="intro.ctaTitle">Bienvenue à bord</h2>
|
|
<div class="hero-line"></div>
|
|
<p class="cta-subtitle" data-i18n="intro.ctaSubtitle">Découvrez nos services, nos tarifs et inscrivez-vous en quelques clics.</p>
|
|
<a href="accueil.html" class="parallax-cta-btn">
|
|
<span data-i18n="intro.ctaBtn">Accéder au site</span>
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
</a>
|
|
<div class="cta-meta">
|
|
<span><i class="fa-solid fa-plane"></i> <span data-i18n="intro.metaShipments">2 envois / semaine</span></span>
|
|
<span><i class="fa-solid fa-clock"></i> <span data-i18n="intro.metaDelay">2 semaines depuis Paris</span></span>
|
|
<span><i class="fa-solid fa-tag"></i> <span data-i18n="intro.metaPrice">70 000 Ar / kg</span></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="js/translations.js"></script>
|
|
<script>
|
|
// ── i18n minimal pour la page parallaxe ──────────────────────────────────
|
|
(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 scroll-driven ──────────────────────────────────────────────
|
|
(function () {
|
|
const root = document.documentElement;
|
|
let ticking = false;
|
|
|
|
function update() {
|
|
const max = document.body.scrollHeight - window.innerHeight;
|
|
const progress = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
|
|
root.style.setProperty('--scroll', progress.toFixed(4));
|
|
ticking = false;
|
|
}
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(update);
|
|
ticking = true;
|
|
}
|
|
}, { passive: true });
|
|
|
|
update();
|
|
})();
|
|
|
|
// ── Mouse parallaxe (depth effect) ───────────────────────────────────────
|
|
(function () {
|
|
if (window.matchMedia('(hover: none)').matches) return;
|
|
const root = document.documentElement;
|
|
window.addEventListener('mousemove', (e) => {
|
|
const x = (e.clientX / window.innerWidth - 0.5) * 2;
|
|
const y = (e.clientY / window.innerHeight - 0.5) * 2;
|
|
root.style.setProperty('--mx', x.toFixed(3));
|
|
root.style.setProperty('--my', y.toFixed(3));
|
|
}, { passive: true });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|