Intro: bouton 'Accéder au site' visible immédiatement, sans animation
- Retire l'état caché (scale 0.05 / opacity 0 / offset -27vh) - Retire les transitions de révélation (transform/opacity 2.2s) - Retire l'animation de pulse halo (.cta-btn::after) - Retire le déclenchement JS via la classe .revealed (l'avion qui croise le centre n'a plus d'effet sur le bouton) Le bouton est désormais centré au milieu du viewport dès le chargement, toujours cliquable. Hover conserve le scale 1.04 + shine effect. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
8ba9fc9161
commit
422690c194
@ -118,22 +118,12 @@ html, body {
|
|||||||
.layer-three { display: block; z-index: 2; }
|
.layer-three { display: block; z-index: 2; }
|
||||||
|
|
||||||
/* ── BOUTON CTA centré ────────────────────────────────────────────────────
|
/* ── BOUTON CTA centré ────────────────────────────────────────────────────
|
||||||
État caché : positionné là où l'avion est au centre de sa course
|
Visible immédiatement au chargement, parfaitement centré, sans animation. */
|
||||||
(~27% au-dessus du centre du viewport), à scale ≈ 0. Quand le JS
|
|
||||||
ajoute la classe `.revealed` (au moment où l'avion atteint p ≥ 0.5),
|
|
||||||
les variables CSS basculent et le bouton « sort » de l'avion en
|
|
||||||
grossissant jusqu'à sa taille finale au centre. */
|
|
||||||
.cta-btn {
|
.cta-btn {
|
||||||
--cta-y: -27vh; /* offset vertical : 0 = centré */
|
|
||||||
--cta-scale: 0.05;
|
|
||||||
--cta-opacity: 0;
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, calc(-50% + var(--cta-y))) scale(var(--cta-scale));
|
transform: translate(-50%, -50%);
|
||||||
opacity: var(--cta-opacity);
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -151,30 +141,13 @@ html, body {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 20px 60px rgba(197, 165, 90, 0.55),
|
0 20px 60px rgba(197, 165, 90, 0.55),
|
||||||
0 0 0 0 rgba(197, 165, 90, 0.4),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||||||
transition:
|
|
||||||
transform 2.2s cubic-bezier(0.34, 1.4, 0.64, 1),
|
|
||||||
opacity 0.9s ease 0.1s,
|
|
||||||
box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-btn.revealed {
|
.cta-btn:hover {
|
||||||
--cta-y: 0vh;
|
transform: translate(-50%, -50%) scale(1.04);
|
||||||
--cta-scale: 1;
|
|
||||||
--cta-opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover seulement après la révélation, avec une transition rapide */
|
|
||||||
.cta-btn.revealed:hover {
|
|
||||||
--cta-scale: 1.04;
|
|
||||||
transition:
|
|
||||||
transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
||||||
box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 28px 75px rgba(197, 165, 90, 0.7),
|
0 28px 75px rgba(197, 165, 90, 0.7),
|
||||||
0 0 0 12px rgba(197, 165, 90, 0.12),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -195,23 +168,6 @@ html, body {
|
|||||||
}
|
}
|
||||||
.cta-btn:hover i { transform: translateX(8px); }
|
.cta-btn:hover i { transform: translateX(8px); }
|
||||||
|
|
||||||
.cta-btn::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: -3px;
|
|
||||||
border-radius: 50px;
|
|
||||||
border: 2px solid rgba(197, 165, 90, 0.55);
|
|
||||||
animation: none; /* halo dormant tant que le bouton n'est pas révélé */
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.cta-btn.revealed::after {
|
|
||||||
animation: ctaPulse 2.8s ease-out 1s infinite; /* démarre après l'arrivée du bouton */
|
|
||||||
}
|
|
||||||
@keyframes ctaPulse {
|
|
||||||
0% { transform: scale(1); opacity: 0.7; }
|
|
||||||
100% { transform: scale(1.18); opacity: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
|
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.parallax-header { padding: 14px 18px; }
|
.parallax-header { padding: 14px 18px; }
|
||||||
|
|||||||
@ -281,12 +281,7 @@ window.addEventListener('touchcancel', endTouch, { passive: true });
|
|||||||
|
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
|
|
||||||
/* ── Révélation du CTA ─────────────────────────────────────────────────
|
/* Le bouton CTA est désormais visible et centré dès le chargement. */
|
||||||
Quand l'avion arrive au centre de l'écran (p ≥ 0.5), on bascule la
|
|
||||||
classe `.revealed` sur le bouton. La CSS gère l'animation (translate
|
|
||||||
du haut vers le centre + scale 0.05 → 1, ~1.2 s). */
|
|
||||||
const ctaBtn = document.querySelector('.cta-btn');
|
|
||||||
let ctaRevealed = false;
|
|
||||||
|
|
||||||
/* ── Render loop ───────────────────────────────────────────────────────── */
|
/* ── Render loop ───────────────────────────────────────────────────────── */
|
||||||
const clock = new THREE.Clock();
|
const clock = new THREE.Clock();
|
||||||
@ -328,13 +323,6 @@ function tick() {
|
|||||||
}
|
}
|
||||||
updateParcels(dt, t);
|
updateParcels(dt, t);
|
||||||
|
|
||||||
/* Au moment où l'avion atteint le centre, on déclenche la sortie du
|
|
||||||
CTA (l'animation CSS s'en occupe ensuite). One-shot. */
|
|
||||||
if (!ctaRevealed && p >= 0.5) {
|
|
||||||
ctaRevealed = true;
|
|
||||||
ctaBtn?.classList.add('revealed');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Avec nez à -X et up = +Y :
|
/* Avec nez à -X et up = +Y :
|
||||||
- rotation.z = PITCH (négatif = nez en l'air)
|
- rotation.z = PITCH (négatif = nez en l'air)
|
||||||
- rotation.x = ROLL
|
- rotation.x = ROLL
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user