diff --git a/assets/plane.png b/assets/plane.png new file mode 100644 index 0000000..8a1bc42 Binary files /dev/null and b/assets/plane.png differ diff --git a/css/parallax.css b/css/parallax.css index 6dc8109..ea5d594 100644 --- a/css/parallax.css +++ b/css/parallax.css @@ -115,6 +115,41 @@ html, body { linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%); } +/* ── HERO PLANE — vol traversant qui révèle le CTA ────────────────────── + L'avion vient du bas-gauche en grimpant (vol décollage), traverse + l'écran en passant au centre, puis sort en haut-droite. Pendant ce + temps, le bouton reste caché. À la sortie de l'avion, le bouton + apparaît en fade. */ +.hero-plane { + position: absolute; + top: 50%; + left: 50%; + width: 360px; + height: auto; + z-index: 20; + pointer-events: none; + filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); + transform-origin: 50% 50%; + animation: plane-flyby 3.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.3s forwards; +} + +@keyframes plane-flyby { + 0% { + transform: translate(-160vw, 50vh) rotate(-15deg) scale(0.45); + opacity: 0; + } + 12% { opacity: 1; } + 50% { + transform: translate(-50%, -50%) rotate(-8deg) scale(1.0); + opacity: 1; + } + 88% { opacity: 1; } + 100% { + transform: translate(120vw, -120vh) rotate(-22deg) scale(0.65); + opacity: 0; + } +} + /* ── BOUTON CTA centré ──────────────────────────────────────────────────── */ .cta-btn { position: absolute; @@ -126,6 +161,9 @@ html, body { calc(-50% + var(--my) * 8px) ); z-index: 10; + /* Caché jusqu'à la sortie de l'avion, puis fade in */ + opacity: 0; + animation: cta-reveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 3.2s forwards; display: inline-flex; align-items: center; gap: 16px; @@ -182,7 +220,8 @@ html, body { inset: -3px; border-radius: 50px; border: 2px solid rgba(197, 165, 90, 0.55); - animation: ctaPulse 2.8s ease-out infinite; + /* Démarre le halo après la révélation du bouton (3.2s + 0.7s) */ + animation: ctaPulse 2.8s ease-out 3.9s infinite; pointer-events: none; } @keyframes ctaPulse { @@ -190,6 +229,11 @@ html, body { 100% { transform: scale(1.18); opacity: 0; } } +@keyframes cta-reveal { + from { opacity: 0; } + to { opacity: 1; } +} + /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .parallax-header { padding: 14px 18px; } @@ -201,8 +245,12 @@ html, body { padding: 16px 36px; font-size: 0.98rem; } + + .hero-plane { width: 220px; } } @media (prefers-reduced-motion: reduce) { .cta-btn::after { animation: none; } + .hero-plane { display: none; } + .cta-btn { opacity: 1; animation: none; } } diff --git a/index.html b/index.html index 3e14ffd..a6e9e42 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,9 @@
+ + + Accéder au site