eba88207c4
User-supplied aerial illustration of Antananarivo (Lake Anosy + Rova hill + surrounding city, 1920px wide JPG, 241 KB) replaces the parachute-drop video as the static intro backdrop. The video files are deleted from /videos. The plane no longer orbits a scroll timeline. Now: - Page is a single viewport, no scroll, no act labels, no scroll hint. - Mouse X (0..1) drives plane.position.x from -16 (offscreen left) to +16 (offscreen right), with plane.position.y descending from +5 to -2 — so the plane enters from the upper-left and exits lower-right. - Pitch/roll/yaw lerp toward small targets that depend on mouse X, so the plane banks naturally as it crosses. - Background image gets a softer mouse parallax (-16/-10px) via the existing --mx/--my CSS vars, now updated from intro-scene.js. - Three.js cloud spheres are gone; the photo is the entire backdrop. - ScrollTrigger + the GSAP timeline are removed; the page no longer needs gsap at all (the script tag stayed for now in case it comes back, but the dependency could be dropped on a future pass). - CTA button is back to plain visible/centered, no reveal animation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Crédits :
|
|
- Modèle 3D « Airplane » par Poly by Google, licence CC-BY 3.0
|
|
Source : https://poly.pizza/m/a3XrQkLNna9
|
|
https://creativecommons.org/licenses/by/3.0/
|
|
-->
|
|
<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">
|
|
|
|
<!-- Three.js (ESM via importmap) + addons (GLTFLoader) -->
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/"
|
|
}
|
|
}
|
|
</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">
|
|
|
|
<!-- Photo aérienne d'Antananarivo en fond -->
|
|
<img class="layer layer-bg" src="assets/antananarivo-bg.jpg" alt="" aria-hidden="true">
|
|
|
|
<!-- Voile très léger pour la lisibilité du bouton -->
|
|
<div class="layer layer-tint"></div>
|
|
|
|
<!-- Canvas Three.js : avion piloté par la souris -->
|
|
<canvas id="three-canvas" class="layer layer-three"></canvas>
|
|
|
|
<!-- Bouton CTA centré -->
|
|
<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;
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<script type="module" src="js/intro-scene.js"></script>
|
|
</body>
|
|
</html>
|