Revert "Add 3D plane fly-by intro that reveals the CTA on landing"

This reverts commit d1ea4d696c.
This commit is contained in:
MVA Global Fret 2026-05-05 10:17:57 +02:00
parent d1ea4d696c
commit 6f6cb672ac
3 changed files with 1 additions and 52 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

View File

@ -115,41 +115,6 @@ html, body {
linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%); 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é ──────────────────────────────────────────────────── */ /* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
.cta-btn { .cta-btn {
position: absolute; position: absolute;
@ -161,9 +126,6 @@ html, body {
calc(-50% + var(--my) * 8px) calc(-50% + var(--my) * 8px)
); );
z-index: 10; 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; display: inline-flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
@ -220,8 +182,7 @@ html, body {
inset: -3px; inset: -3px;
border-radius: 50px; border-radius: 50px;
border: 2px solid rgba(197, 165, 90, 0.55); border: 2px solid rgba(197, 165, 90, 0.55);
/* Démarre le halo après la révélation du bouton (3.2s + 0.7s) */ animation: ctaPulse 2.8s ease-out infinite;
animation: ctaPulse 2.8s ease-out 3.9s infinite;
pointer-events: none; pointer-events: none;
} }
@keyframes ctaPulse { @keyframes ctaPulse {
@ -229,11 +190,6 @@ html, body {
100% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; }
} }
@keyframes cta-reveal {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) { @media (max-width: 768px) {
.parallax-header { padding: 14px 18px; } .parallax-header { padding: 14px 18px; }
@ -245,12 +201,8 @@ html, body {
padding: 16px 36px; padding: 16px 36px;
font-size: 0.98rem; font-size: 0.98rem;
} }
.hero-plane { width: 220px; }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.cta-btn::after { animation: none; } .cta-btn::after { animation: none; }
.hero-plane { display: none; }
.cta-btn { opacity: 1; animation: none; }
} }

View File

@ -36,9 +36,6 @@
<div class="layer layer-tint"></div> <div class="layer layer-tint"></div>
<!-- Avion qui traverse l'écran à l'arrivée — masque/révèle le CTA -->
<img class="hero-plane" src="assets/plane.png" alt="" aria-hidden="true">
<a href="accueil.html" class="cta-btn"> <a href="accueil.html" class="cta-btn">
<span class="cta-btn-shine"></span> <span class="cta-btn-shine"></span>
<span data-i18n="intro.ctaBtn">Accéder au site</span> <span data-i18n="intro.ctaBtn">Accéder au site</span>