Drop the parachute, scale cloud up to 520x360, fit text inside
The Lottie parachute was floating above the cloud as an extra layer, which felt busy. Strip it out — the dotlottie player script tag, the .cta-stack wrapper, the .cta-parachute rule, and assets/parachute.json all go. The cloud is now the only landing element. Bumped width 360→520 and height 200→360 so the Fluent cloud renders much larger; bumped font size 1.15→1.4rem; added a small negative margin-top to seat the text on the cloud's "body" (Fluent's base is heavy, the body sits a bit above the geometric center). Drop animation moved off the wrapper onto the button itself, with the :hover rule overriding animation:none + applying the centered scale transform so hover doesn't fight the keyframe. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret
parent
b4bc2959e2
commit
90e5ff7116
File diff suppressed because one or more lines are too long
@ -117,61 +117,43 @@ html, body {
|
||||
linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%);
|
||||
}
|
||||
|
||||
/* ── PARACHUTE + BOUTON-NUAGE ────────────────────────────────────────────
|
||||
Le bloc tombe du haut de l'écran jusqu'au centre via translateY animé,
|
||||
plus rapide que les parachutes de la vidéo (~1.6s vs 7s). Après l'atter-
|
||||
rissage, le parachute Lottie continue à boucler doucement au-dessus
|
||||
du nuage. Aucune parallaxe souris sur ce groupe — la chute est l'effet. */
|
||||
.cta-stack {
|
||||
/* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
|
||||
Le nuage tombe du haut jusqu'au centre via animation, ~3.4s avec léger
|
||||
overshoot. Une fois posé, hover scale léger. */
|
||||
.cloud-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: parachute-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
width: 520px;
|
||||
height: 360px;
|
||||
color: var(--navy);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.4px;
|
||||
white-space: nowrap;
|
||||
filter: drop-shadow(0 28px 38px rgba(20, 20, 50, 0.45));
|
||||
animation: cloud-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both;
|
||||
}
|
||||
.cta-stack > * { pointer-events: auto; }
|
||||
|
||||
@keyframes parachute-drop {
|
||||
@keyframes cloud-drop {
|
||||
0% { transform: translate(-50%, -130vh); opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
85% { transform: translate(-50%, -42%); opacity: 1; }
|
||||
100% { transform: translate(-50%, -50%); }
|
||||
}
|
||||
|
||||
.cta-parachute {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin-bottom: -22px;
|
||||
filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
|
||||
pointer-events: none;
|
||||
.cloud-btn:hover {
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
/* hover désactive l'animation de chute pour que scale ne saute pas */
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
|
||||
Image de nuage 3D en fond, débordant le texte. Le texte est devant. */
|
||||
.cloud-btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
width: 360px;
|
||||
height: 200px;
|
||||
color: var(--navy);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: 0.4px;
|
||||
white-space: nowrap;
|
||||
filter: drop-shadow(0 22px 30px rgba(20, 20, 50, 0.45));
|
||||
transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.cloud-btn:hover { transform: scale(1.05); }
|
||||
|
||||
.cloud-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@ -183,17 +165,20 @@ html, body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Texte centré sur le « cœur » du nuage (légèrement plus haut que le centre
|
||||
géométrique de l'image, parce que le nuage Fluent a une grosse base et un
|
||||
sommet bombé). */
|
||||
.cloud-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding-top: 8px; /* aligne sur le « cœur » du nuage */
|
||||
text-shadow: 0 1px 2px rgba(255,255,255,0.7);
|
||||
margin-top: -10px;
|
||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.cloud-content i {
|
||||
font-size: 0.95rem;
|
||||
font-size: 1.05rem;
|
||||
transition: transform 0.32s ease;
|
||||
}
|
||||
.cloud-btn:hover .cloud-content i { transform: translateX(6px); }
|
||||
@ -205,10 +190,9 @@ html, body {
|
||||
.parallax-logo img { height: 38px; }
|
||||
.lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
|
||||
|
||||
.cta-parachute { width: 130px; height: 130px; margin-bottom: -16px; }
|
||||
.cloud-btn { width: 280px; height: 160px; font-size: 1rem; }
|
||||
.cloud-btn { width: 360px; height: 250px; font-size: 1.05rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cta-stack { animation: none; }
|
||||
.cloud-btn { animation: none; }
|
||||
}
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
<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">
|
||||
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.6.2/dist/dotlottie-wc.js" type="module"></script>
|
||||
</head>
|
||||
<body class="parallax-body">
|
||||
|
||||
@ -37,10 +36,6 @@
|
||||
|
||||
<div class="layer layer-tint"></div>
|
||||
|
||||
<div class="cta-stack">
|
||||
<dotlottie-wc class="cta-parachute"
|
||||
src="assets/parachute.json"
|
||||
autoplay loop></dotlottie-wc>
|
||||
<a href="accueil.html" class="cta-btn cloud-btn">
|
||||
<img class="cloud-bg" src="assets/cloud.png" alt="">
|
||||
<span class="cloud-content">
|
||||
@ -48,7 +43,6 @@
|
||||
<i class="fa-solid fa-arrow-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user