Add classy scroll animations — staggered reveals, underline titles, counter highlights, card stacks, smooth hero entrance
This commit is contained in:
Kato
+235
-3
@@ -71,6 +71,77 @@
|
||||
to { width: 200px; height: 200px; opacity: 0; }
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
CLASSY SCROLL ANIMATIONS — Premium Motion Design
|
||||
======================================== */
|
||||
|
||||
/* Parallax-style subtle depth shift */
|
||||
@keyframes depthShift {
|
||||
0% { transform: translateZ(0px) scale(1); }
|
||||
100% { transform: translateZ(20px) scale(1.01); }
|
||||
}
|
||||
|
||||
/* Smooth scale entry */
|
||||
@keyframes scaleEntry {
|
||||
from { opacity: 0; transform: scale(0.92) translateY(30px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
/* Subtle glow pulse */
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { box-shadow: 0 2px 8px rgba(24, 119, 242, 0.08); }
|
||||
50% { box-shadow: 0 4px 20px rgba(24, 119, 242, 0.15); }
|
||||
}
|
||||
|
||||
/* Smooth counter highlight */
|
||||
@keyframes counterHighlight {
|
||||
0% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(24, 119, 242, 0); }
|
||||
25% { transform: scale(1.12); color: #fff; text-shadow: 0 0 20px rgba(24, 119, 242, 0.4); }
|
||||
50% { transform: scale(0.97); }
|
||||
100% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(24, 119, 242, 0); }
|
||||
}
|
||||
|
||||
/* Smooth reveal from sides */
|
||||
@keyframes revealLeft {
|
||||
from { opacity: 0; transform: translateX(-40px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes revealRight {
|
||||
from { opacity: 0; transform: translateX(40px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Smooth divider line animation */
|
||||
@keyframes lineExpand {
|
||||
from { width: 0; }
|
||||
to { width: 60px; }
|
||||
}
|
||||
|
||||
/* Smooth badge entrance */
|
||||
@keyframes badgeDrop {
|
||||
from { opacity: 0; transform: translateY(-10px) scale(0.9); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
/* Smooth card stack entrance */
|
||||
@keyframes cardStack {
|
||||
from { opacity: 0; transform: translateY(40px) rotateX(8deg); }
|
||||
to { opacity: 1; transform: translateY(0) rotateX(0deg); }
|
||||
}
|
||||
|
||||
/* Smooth text underline reveal */
|
||||
@keyframes underlineReveal {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
/* Smooth progress indicator */
|
||||
@keyframes progressFill {
|
||||
from { width: 0%; }
|
||||
to { width: var(--progress); }
|
||||
}
|
||||
|
||||
/* Scroll reveal visible state */
|
||||
.fade-in-section.visible,
|
||||
.section.visible {
|
||||
@@ -94,13 +165,174 @@
|
||||
.stagger-3 { animation-delay: 0.24s !important; }
|
||||
.stagger-4 { animation-delay: 0.32s !important; }
|
||||
|
||||
/* Scroll reveal base state */
|
||||
/* Scroll reveal base state — elegant entrance */
|
||||
.fade-in-section {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* Scroll reveal visible — premium motion */
|
||||
.fade-in-section.visible,
|
||||
.section.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
animation: scaleEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* Section titles — slide in with underline */
|
||||
.section-title {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
|
||||
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
|
||||
}
|
||||
.section-title.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
position: relative;
|
||||
}
|
||||
.section-title.visible::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #1877f2, #42b0ff);
|
||||
border-radius: 2px;
|
||||
animation: lineExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
|
||||
}
|
||||
|
||||
/* Hero stats — staggered counter entry */
|
||||
.stat {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.stat.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
.stat.visible .stat-number {
|
||||
animation: counterHighlight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* About cards — staggered stack */
|
||||
.about-card {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.about-card.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
animation: cardStack 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* Wiki cards — staggered entrance */
|
||||
.wiki-card-new {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.wiki-card-new.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* Member cards — staggered entrance */
|
||||
.member-card {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.member-card.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* Date cards — staggered entrance */
|
||||
.date-card {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.date-card.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* Newsletter card — elegant scale */
|
||||
.newsletter-card {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.newsletter-card.visible {
|
||||
opacity: 1 !important;
|
||||
transform: scale(1) !important;
|
||||
animation: scaleEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
/* Hero CTA — smooth entrance */
|
||||
.btn-cta {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
|
||||
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
|
||||
}
|
||||
.btn-cta.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* Hero title — smooth reveal */
|
||||
.hero-title {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
|
||||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
|
||||
}
|
||||
.hero-title.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* Hero subtitle — smooth reveal */
|
||||
.hero-subtitle {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s,
|
||||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
|
||||
}
|
||||
.hero-subtitle.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* About card staggered delays */
|
||||
.about-card.stagger-1 { transition-delay: 0s !important; }
|
||||
.about-card.stagger-2 { transition-delay: 0.1s !important; }
|
||||
.about-card.stagger-3 { transition-delay: 0.2s !important; }
|
||||
.about-card.stagger-4 { transition-delay: 0.3s !important; }
|
||||
|
||||
/* Wiki card staggered delays */
|
||||
.wiki-card-new.stagger-1 { transition-delay: 0s !important; }
|
||||
.wiki-card-new.stagger-2 { transition-delay: 0.08s !important; }
|
||||
.wiki-card-new.stagger-3 { transition-delay: 0.16s !important; }
|
||||
.wiki-card-new.stagger-4 { transition-delay: 0.24s !important; }
|
||||
|
||||
/* ========================================
|
||||
BASE
|
||||
|
||||
Reference in New Issue
Block a user