Revert "Add 3D plane fly-by intro that reveals the CTA on landing"
This reverts commit d1ea4d696c.
This commit is contained in:
parent
d1ea4d696c
commit
6f6cb672ac
BIN
assets/plane.png
BIN
assets/plane.png
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
@ -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; }
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user