scroll reveals
This commit is contained in:
DylanBarnes
parent
4fce8a3377
commit
69795a2912
2 changed files with 238 additions and 22 deletions
236
css/style.css
236
css/style.css
|
|
@ -15,16 +15,19 @@ body {
|
|||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
background-color: #f8fafc;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* ====================== HEADER & NAVIGATION ====================== */
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
|
||||
0 0 40px rgba(102, 126, 234, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
|
|
@ -152,6 +155,7 @@ header {
|
|||
.nav-menu a:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
|
||||
}
|
||||
|
||||
.nav-menu a:hover::after {
|
||||
|
|
@ -161,6 +165,7 @@ header {
|
|||
.nav-menu a.active {
|
||||
color: #fbbf24;
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
box-shadow: 0 0 15px rgba(251, 191, 36, 0.15);
|
||||
}
|
||||
|
||||
.nav-menu a.active::after {
|
||||
|
|
@ -328,12 +333,14 @@ main {
|
|||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-title .word {
|
||||
display: inline-block;
|
||||
animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
animation-delay: calc(var(--index) * 0.1s);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
|
|
@ -349,7 +356,7 @@ main {
|
|||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 2rem;
|
||||
animation: fadeInUp 0.8s ease 0.4s both;
|
||||
|
|
@ -401,6 +408,28 @@ main {
|
|||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #2563eb;
|
||||
border: 2px solid rgba(37, 99, 235, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.page-header:hover {
|
||||
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
|
||||
border-color: rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.page-header:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
|
|
@ -422,6 +451,13 @@ main {
|
|||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.content-section:hover {
|
||||
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
|
|
@ -457,12 +493,13 @@ main {
|
|||
a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
transition: color 0.3s ease, text-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #1e40af;
|
||||
text-decoration: underline;
|
||||
text-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
/* ====================== FEATURE GRID ====================== */
|
||||
|
|
@ -481,11 +518,30 @@ a:hover {
|
|||
border-left: 4px solid #2563eb;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(37, 99, 235, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2),
|
||||
0 0 30px rgba(37, 99, 235, 0.15);
|
||||
border-color: rgba(37, 99, 235, 0.5);
|
||||
}
|
||||
|
||||
.feature-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
|
|
@ -525,7 +581,7 @@ a:hover {
|
|||
|
||||
.kinetic-card {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
border: 2px solid transparent;
|
||||
|
|
@ -534,6 +590,8 @@ a:hover {
|
|||
overflow: hidden;
|
||||
animation: slideInCard 0.8s ease both;
|
||||
animation-delay: calc(var(--index) * 0.15s);
|
||||
backdrop-filter: blur(10px);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@keyframes slideInCard {
|
||||
|
|
@ -549,20 +607,30 @@ a:hover {
|
|||
|
||||
.kinetic-card:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
|
||||
0 0 40px rgba(var(--color-r), var(--color-g), var(--color-b), 0.2);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.kinetic-card:nth-child(1) {
|
||||
--accent-color: #00d4ff;
|
||||
--color-r: 0;
|
||||
--color-g: 212;
|
||||
--color-b: 255;
|
||||
}
|
||||
|
||||
.kinetic-card:nth-child(2) {
|
||||
--accent-color: #ff006e;
|
||||
--color-r: 255;
|
||||
--color-g: 0;
|
||||
--color-b: 110;
|
||||
}
|
||||
|
||||
.kinetic-card:nth-child(3) {
|
||||
--accent-color: #ffc300;
|
||||
--color-r: 255;
|
||||
--color-g: 195;
|
||||
--color-b: 0;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
|
|
@ -651,6 +719,27 @@ a:hover {
|
|||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn:active::after {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
|
|
@ -661,7 +750,8 @@ a:hover {
|
|||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
|
||||
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5),
|
||||
0 0 30px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
|
|
@ -672,6 +762,7 @@ a:hover {
|
|||
|
||||
.btn-secondary:hover {
|
||||
background: #f0f9ff;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
|
|
@ -681,6 +772,10 @@ a:hover {
|
|||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
margin: 3rem 0;
|
||||
box-shadow: 0 10px 40px rgba(37, 99, 235, 0.2),
|
||||
0 0 40px rgba(37, 99, 235, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
|
|
@ -698,7 +793,10 @@ a:hover {
|
|||
border-radius: 16px;
|
||||
padding: 4rem 2rem;
|
||||
margin: 4rem 0;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
|
||||
0 0 60px rgba(102, 126, 234, 0.2);
|
||||
border: 2px solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.cta-background {
|
||||
|
|
@ -798,9 +896,29 @@ a:hover {
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
.kinetic-btn::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.kinetic-btn:active::after {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.kinetic-btn:hover {
|
||||
transform: translateY(-4px) scale(1.05);
|
||||
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2),
|
||||
0 0 40px rgba(0, 212, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
|
@ -833,11 +951,30 @@ a:hover {
|
|||
border-radius: 10px;
|
||||
border: 2px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.8) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tech-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-card:hover {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
|
||||
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2),
|
||||
0 0 30px rgba(37, 99, 235, 0.1);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.tech-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tech-card h3 {
|
||||
|
|
@ -877,12 +1014,30 @@ a:hover {
|
|||
text-align: center;
|
||||
border: 2px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.8) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-member::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.team-member:hover {
|
||||
transform: translateY(-5px);
|
||||
transform: translateY(-8px);
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1);
|
||||
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.2),
|
||||
0 0 30px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.team-member:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
|
|
@ -1502,6 +1657,33 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3),
|
||||
0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(102, 126, 234, 0.6),
|
||||
0 10px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -1000px 0; }
|
||||
100% { background-position: 1000px 0; }
|
||||
}
|
||||
|
||||
@keyframes slideInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
|
@ -1550,10 +1732,12 @@ footer {
|
|||
body.dark {
|
||||
background-color: #1e293b;
|
||||
color: #e2e8f0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
body.dark header {
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
body.dark .nav-menu a {
|
||||
|
|
@ -1856,10 +2040,13 @@ body.dark .scroll-arrow {
|
|||
body.dark .kinetic-card {
|
||||
background: linear-gradient(135deg, #1a2332 0%, #1e2d3a 100%);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
body.dark .kinetic-card:hover {
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
|
||||
0 0 40px rgba(var(--color-r), var(--color-g), var(--color-b), 0.3);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
body.dark .kinetic-card h3 {
|
||||
|
|
@ -1903,11 +2090,30 @@ body.dark .kinetic-btn:hover {
|
|||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 249, 255, 0.85) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.exercise-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.exercise-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
|
||||
box-shadow: 0 12px 28px rgba(102, 126, 234, 0.2),
|
||||
0 0 30px rgba(102, 126, 234, 0.1);
|
||||
border-color: #667eea;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.exercise-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.exercise-card h2 {
|
||||
|
|
|
|||
24
js/script.js
24
js/script.js
|
|
@ -221,7 +221,7 @@ if (phoneInput) {
|
|||
});
|
||||
}
|
||||
|
||||
// ====================== INTERSECTION OBSERVER FOR ANIMATIONS ======================
|
||||
// ====================== INTERSECTION OBSERVER FOR SMOOTH SCROLL REVEAL ======================
|
||||
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
|
|
@ -229,21 +229,31 @@ const observerOptions = {
|
|||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
setTimeout(() => {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0) scale(1)';
|
||||
entry.target.classList.add('revealed');
|
||||
}, index * 50);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.content-section').forEach(section => {
|
||||
// Observe content sections with staggered animation
|
||||
document.querySelectorAll('.content-section, .feature-card, .kinetic-card, .team-member, .tech-card, .exercise-card').forEach((section, index) => {
|
||||
section.style.opacity = '0';
|
||||
section.style.transform = 'translateY(20px)';
|
||||
section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||||
section.style.transform = 'translateY(20px) scale(0.98)';
|
||||
section.style.transition = 'opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
||||
observer.observe(section);
|
||||
});
|
||||
|
||||
// Reveal buttons with glow animation
|
||||
document.querySelectorAll('.btn, .kinetic-btn').forEach(btn => {
|
||||
btn.style.transition = 'all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
||||
observer.observe(btn);
|
||||
});
|
||||
|
||||
// ====================== UTILITY: CONSOLE MESSAGE ======================
|
||||
|
||||
console.log('%c🎉 Welcome to EIS Project!', 'color: #2563eb; font-size: 20px; font-weight: bold;');
|
||||
|
|
|
|||
Loading…
Reference in a new issue