Enhance website appearance with animations and smooth scrolling effects
Integrates Lenis and GSAP for advanced scrolling animations, parallax effects, and dynamic UI elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: 298b9878-6940-427f-99ca-03452da5b40f Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/MFdA8rN
This commit is contained in:
abhiramtx
@@ -31,6 +31,29 @@ body {
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 40%),
|
||||
radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.03) 0%, transparent 40%),
|
||||
radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
animation: float-background 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float-background {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
33% { transform: translate(2%, -2%) rotate(1deg); }
|
||||
66% { transform: translate(-2%, 2%) rotate(-1deg); }
|
||||
}
|
||||
|
||||
nav {
|
||||
@@ -41,6 +64,12 @@ nav {
|
||||
z-index: 1000;
|
||||
width: calc(100% - 40px);
|
||||
max-width: 1200px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
nav.scrolled {
|
||||
top: 10px;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
@@ -1192,4 +1221,406 @@ span.emoji:hover::after {
|
||||
.competition-year {
|
||||
margin-top: 25px !important;
|
||||
font-weight: 100 !important;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 16px;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.nav-container:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stats-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
rgba(59, 130, 246, 0.1),
|
||||
transparent
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
transition: all 0.6s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.stats-card:hover::before {
|
||||
opacity: 1;
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
.card,
|
||||
.card-sponsors,
|
||||
.member-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card::after,
|
||||
.card-sponsors::after,
|
||||
.member-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
}
|
||||
|
||||
.card:hover::after,
|
||||
.card-sponsors:hover::after,
|
||||
.member-card:hover::after {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
}
|
||||
|
||||
.hero-image-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-image-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
|
||||
.hero-image-section:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stats-button,
|
||||
.bottom-center-button,
|
||||
#sponsors-more-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.stats-button::before,
|
||||
.bottom-center-button::before,
|
||||
#sponsors-more-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.4s ease, height 0.4s ease;
|
||||
}
|
||||
|
||||
.stats-button:hover::before,
|
||||
.bottom-center-button:hover::before,
|
||||
#sponsors-more-button:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.stats-card-header {
|
||||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-shift 3s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
.heading {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
|
||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.heading:hover::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.robo-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.robo-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.robo-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.competition-card {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.sponsors-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sponsors-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -5px;
|
||||
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
|
||||
border-radius: 8px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
filter: blur(20px);
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.sponsors-card:hover::after {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.overlay-container .overlay {
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
hr::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.member-image {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.home-but {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-but::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(59, 130, 246, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.3s ease, height 0.3s ease;
|
||||
}
|
||||
|
||||
.home-but:hover::before {
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||
z-index: 9999;
|
||||
transform-origin: left;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
* {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a, button, .stats-card, .card, .member-card {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
body {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.custom-cursor {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #3b82f6;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
transition: all 0.15s ease;
|
||||
transform: translate(-50%, -50%);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
.custom-cursor-follower {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.custom-cursor.hover {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.custom-cursor,
|
||||
.custom-cursor-follower {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-header,
|
||||
.hero-title {
|
||||
background: linear-gradient(135deg, #ffffff, #a0a0a0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.border-triangle {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user