1144 lines
36 KiB
HTML
1144 lines
36 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>VOID · 虚拟艺术空间</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Space+Grotesk:wght@300;400;500&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--gallery-white: #f5f5f0;
|
||
|
|
--lime-wash: #c4d4c1;
|
||
|
|
--lime-dark: #8a9a7b;
|
||
|
|
--royal-blue: #2e4a7d;
|
||
|
|
--royal-blue-light: #4a6fa5;
|
||
|
|
--concrete-light: #e8e6e1;
|
||
|
|
--concrete-dark: #d4d2cd;
|
||
|
|
--concrete-shadow: #bab8b3;
|
||
|
|
--text-primary: #1a1a1a;
|
||
|
|
--text-secondary: #4a4a4a;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
|
|
background-color: var(--gallery-white);
|
||
|
|
color: var(--text-primary);
|
||
|
|
overflow-x: hidden;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Page Transition Overlay */
|
||
|
|
.page-transition {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: var(--gallery-white);
|
||
|
|
z-index: 9997;
|
||
|
|
pointer-events: none;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-transition.active {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Lens Blur Effect - Only affects elements behind it */
|
||
|
|
.lens-blur {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 5;
|
||
|
|
pointer-events: none;
|
||
|
|
backdrop-filter: blur(0px);
|
||
|
|
transition: backdrop-filter 0.1s ease;
|
||
|
|
will-change: backdrop-filter;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Noise Texture Overlay */
|
||
|
|
.noise-overlay {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 1000;
|
||
|
|
opacity: 0.03;
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Concrete Texture Background */
|
||
|
|
.concrete-bg {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: -1;
|
||
|
|
background:
|
||
|
|
repeating-linear-gradient(
|
||
|
|
90deg,
|
||
|
|
transparent,
|
||
|
|
transparent 2px,
|
||
|
|
rgba(0,0,0,0.02) 2px,
|
||
|
|
rgba(0,0,0,0.02) 4px
|
||
|
|
),
|
||
|
|
repeating-linear-gradient(
|
||
|
|
0deg,
|
||
|
|
transparent,
|
||
|
|
transparent 2px,
|
||
|
|
rgba(0,0,0,0.015) 2px,
|
||
|
|
rgba(0,0,0,0.015) 4px
|
||
|
|
),
|
||
|
|
linear-gradient(135deg,
|
||
|
|
var(--concrete-light) 0%,
|
||
|
|
var(--gallery-white) 50%,
|
||
|
|
var(--concrete-dark) 100%
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Isometric Room Container */
|
||
|
|
.isometric-container {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
perspective: 1200px;
|
||
|
|
perspective-origin: 50% 50%;
|
||
|
|
z-index: 1;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.isometric-room {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
width: 800px;
|
||
|
|
height: 600px;
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
transform: translate(-50%, -50%) rotateX(55deg) rotateZ(45deg);
|
||
|
|
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-floor {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background:
|
||
|
|
linear-gradient(135deg, transparent 40%, rgba(46, 74, 125, 0.03) 40%, rgba(46, 74, 125, 0.03) 60%, transparent 60%),
|
||
|
|
repeating-linear-gradient(
|
||
|
|
45deg,
|
||
|
|
var(--concrete-dark) 0px,
|
||
|
|
var(--concrete-dark) 1px,
|
||
|
|
transparent 1px,
|
||
|
|
transparent 50px
|
||
|
|
),
|
||
|
|
linear-gradient(180deg, var(--concrete-light), var(--concrete-dark));
|
||
|
|
box-shadow:
|
||
|
|
inset 0 0 100px rgba(0,0,0,0.1),
|
||
|
|
0 20px 60px rgba(0,0,0,0.15);
|
||
|
|
transform: translateZ(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-wall-left {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
background: linear-gradient(180deg, var(--concrete-light) 0%, var(--concrete-dark) 100%);
|
||
|
|
transform-origin: bottom left;
|
||
|
|
transform: rotateX(90deg) translateZ(-400px) translateY(200px);
|
||
|
|
box-shadow:
|
||
|
|
inset -50px 0 100px rgba(0,0,0,0.08),
|
||
|
|
0 10px 40px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-wall-back {
|
||
|
|
position: absolute;
|
||
|
|
width: 600px;
|
||
|
|
height: 100%;
|
||
|
|
background:
|
||
|
|
repeating-linear-gradient(
|
||
|
|
90deg,
|
||
|
|
var(--concrete-light) 0px,
|
||
|
|
var(--concrete-light) 1px,
|
||
|
|
transparent 1px,
|
||
|
|
transparent 80px
|
||
|
|
),
|
||
|
|
linear-gradient(180deg, var(--concrete-light) 0%, var(--concrete-dark) 100%);
|
||
|
|
transform-origin: bottom right;
|
||
|
|
transform: rotateY(-90deg) rotateZ(90deg) translateZ(-600px) translateX(300px);
|
||
|
|
box-shadow:
|
||
|
|
inset 0 50px 100px rgba(0,0,0,0.1),
|
||
|
|
0 10px 40px rgba(0,0,0,0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Floating Art Pieces in Room */
|
||
|
|
.room-art {
|
||
|
|
position: absolute;
|
||
|
|
background: var(--gallery-white);
|
||
|
|
box-shadow:
|
||
|
|
0 20px 40px rgba(0,0,0,0.15),
|
||
|
|
0 0 0 1px rgba(0,0,0,0.05),
|
||
|
|
inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 10px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-art:hover {
|
||
|
|
transform: translateZ(30px);
|
||
|
|
box-shadow:
|
||
|
|
0 40px 60px rgba(46, 74, 125, 0.2),
|
||
|
|
0 0 0 2px var(--royal-blue),
|
||
|
|
inset 0 1px 0 rgba(255,255,255,0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-art-1 {
|
||
|
|
width: 120px;
|
||
|
|
height: 160px;
|
||
|
|
top: 100px;
|
||
|
|
left: 80px;
|
||
|
|
transform: translateZ(50px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-art-2 {
|
||
|
|
width: 180px;
|
||
|
|
height: 140px;
|
||
|
|
top: 200px;
|
||
|
|
left: 280px;
|
||
|
|
transform: translateZ(80px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-art-3 {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
top: 150px;
|
||
|
|
left: 520px;
|
||
|
|
transform: translateZ(120px);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-art-4 {
|
||
|
|
width: 150px;
|
||
|
|
height: 200px;
|
||
|
|
top: 400px;
|
||
|
|
left: 150px;
|
||
|
|
transform: translateZ(60px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.room-art-5 {
|
||
|
|
width: 130px;
|
||
|
|
height: 170px;
|
||
|
|
top: 380px;
|
||
|
|
left: 420px;
|
||
|
|
transform: translateZ(100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Main Content */
|
||
|
|
.main-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
padding-top: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hero Section */
|
||
|
|
.hero {
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
padding: 60px 40px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-title {
|
||
|
|
font-family: 'Space Grotesk', Helvetica, sans-serif;
|
||
|
|
font-size: clamp(3rem, 10vw, 8rem);
|
||
|
|
font-weight: 300;
|
||
|
|
letter-spacing: -0.03em;
|
||
|
|
line-height: 0.9;
|
||
|
|
color: var(--text-primary);
|
||
|
|
margin-bottom: 40px;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(60px);
|
||
|
|
animation: heroReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||
|
|
animation-delay: 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-title span {
|
||
|
|
display: block;
|
||
|
|
font-style: italic;
|
||
|
|
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
|
|
font-weight: 300;
|
||
|
|
font-size: 0.4em;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
margin-top: 20px;
|
||
|
|
color: var(--royal-blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes heroReveal {
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Skeuomorphic Button */
|
||
|
|
.btn-explore {
|
||
|
|
position: relative;
|
||
|
|
padding: 20px 50px;
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--text-primary);
|
||
|
|
background: linear-gradient(145deg, var(--gallery-white), var(--concrete-light));
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
animation: heroReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||
|
|
animation-delay: 1s;
|
||
|
|
box-shadow:
|
||
|
|
5px 5px 15px rgba(0,0,0,0.12),
|
||
|
|
-3px -3px 12px rgba(255,255,255,0.9),
|
||
|
|
inset 0 1px 0 rgba(255,255,255,0.9),
|
||
|
|
inset 0 -1px 0 rgba(0,0,0,0.05);
|
||
|
|
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-explore:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow:
|
||
|
|
8px 8px 20px rgba(0,0,0,0.15),
|
||
|
|
-4px -4px 15px rgba(255,255,255,0.95),
|
||
|
|
inset 0 1px 0 rgba(255,255,255,0.9),
|
||
|
|
inset 0 -1px 0 rgba(0,0,0,0.05),
|
||
|
|
0 0 0 1px var(--royal-blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-explore:active {
|
||
|
|
transform: translateY(1px);
|
||
|
|
box-shadow:
|
||
|
|
2px 2px 8px rgba(0,0,0,0.1),
|
||
|
|
-2px -2px 8px rgba(255,255,255,0.9),
|
||
|
|
inset 0 2px 4px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scroll Indicator */
|
||
|
|
.scroll-indicator {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 40px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
opacity: 0;
|
||
|
|
animation: heroReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||
|
|
animation-delay: 1.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-indicator span {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 10px;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-line {
|
||
|
|
width: 1px;
|
||
|
|
height: 60px;
|
||
|
|
background: linear-gradient(to bottom, var(--text-secondary), transparent);
|
||
|
|
animation: scrollPulse 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scrollPulse {
|
||
|
|
0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
|
||
|
|
50% { opacity: 1; transform: scaleY(1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Exhibition Section */
|
||
|
|
.exhibition-section {
|
||
|
|
padding: 120px 60px;
|
||
|
|
max-width: 1600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
background: var(--gallery-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-label {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 11px;
|
||
|
|
letter-spacing: 0.3em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--royal-blue);
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
|
|
font-size: clamp(2rem, 5vw, 4rem);
|
||
|
|
font-weight: 300;
|
||
|
|
font-style: italic;
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Parallax Masonry Grid */
|
||
|
|
.masonry-grid {
|
||
|
|
columns: 3;
|
||
|
|
column-gap: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1200px) {
|
||
|
|
.masonry-grid { columns: 2; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.masonry-grid { columns: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.masonry-item {
|
||
|
|
break-inside: avoid;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
position: relative;
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.masonry-item:hover {
|
||
|
|
transform: translateZ(20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.masonry-card {
|
||
|
|
background: var(--gallery-white);
|
||
|
|
box-shadow:
|
||
|
|
0 4px 6px rgba(0,0,0,0.02),
|
||
|
|
0 20px 40px rgba(0,0,0,0.08),
|
||
|
|
0 0 0 1px rgba(0,0,0,0.03);
|
||
|
|
overflow: hidden;
|
||
|
|
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.masonry-card:hover {
|
||
|
|
box-shadow:
|
||
|
|
0 8px 12px rgba(0,0,0,0.03),
|
||
|
|
0 30px 60px rgba(46, 74, 125, 0.12),
|
||
|
|
0 0 0 1px var(--royal-blue-light);
|
||
|
|
transform: translateY(-5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-image {
|
||
|
|
width: 100%;
|
||
|
|
aspect-ratio: 4/3;
|
||
|
|
background: linear-gradient(135deg,
|
||
|
|
var(--concrete-light) 0%,
|
||
|
|
var(--lime-wash) 50%,
|
||
|
|
var(--concrete-dark) 100%);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-image::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background:
|
||
|
|
repeating-linear-gradient(
|
||
|
|
90deg,
|
||
|
|
transparent,
|
||
|
|
transparent 20px,
|
||
|
|
rgba(0,0,0,0.02) 20px,
|
||
|
|
rgba(0,0,0,0.02) 40px
|
||
|
|
),
|
||
|
|
repeating-linear-gradient(
|
||
|
|
0deg,
|
||
|
|
transparent,
|
||
|
|
transparent 20px,
|
||
|
|
rgba(0,0,0,0.01) 20px,
|
||
|
|
rgba(0,0,0,0.01) 40px
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-number {
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 11px;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
color: var(--royal-blue);
|
||
|
|
background: rgba(255,255,255,0.9);
|
||
|
|
padding: 8px 12px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-content {
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-title {
|
||
|
|
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 400;
|
||
|
|
font-style: italic;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-artist {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 11px;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-description {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
line-height: 1.7;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-btn {
|
||
|
|
margin-top: 20px;
|
||
|
|
padding: 12px 24px;
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 10px;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--royal-blue);
|
||
|
|
background: transparent;
|
||
|
|
border: 1px solid var(--royal-blue);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-btn:hover {
|
||
|
|
background: var(--royal-blue);
|
||
|
|
color: var(--gallery-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Different card sizes */
|
||
|
|
.masonry-item.large .card-image {
|
||
|
|
aspect-ratio: 3/4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.masonry-item.wide .card-image {
|
||
|
|
aspect-ratio: 16/9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.masonry-item.square .card-image {
|
||
|
|
aspect-ratio: 1/1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Ambient Occlusion Shadows */
|
||
|
|
.ao-shadow {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ao-shadow::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: -20px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 80%;
|
||
|
|
height: 20px;
|
||
|
|
background: radial-gradient(ellipse, rgba(0,0,0,0.1) 0%, transparent 70%);
|
||
|
|
filter: blur(8px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* About Section */
|
||
|
|
.about-section {
|
||
|
|
padding: 150px 60px;
|
||
|
|
background: linear-gradient(180deg, transparent, rgba(196, 212, 193, 0.1) 50%, transparent);
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
background-color: var(--gallery-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-content {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-text {
|
||
|
|
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
|
||
|
|
font-weight: 300;
|
||
|
|
font-style: italic;
|
||
|
|
line-height: 1.9;
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-text span {
|
||
|
|
color: var(--royal-blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Footer */
|
||
|
|
.footer {
|
||
|
|
padding: 80px 60px;
|
||
|
|
border-top: 1px solid rgba(0,0,0,0.05);
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
background: var(--gallery-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-content {
|
||
|
|
max-width: 1400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
|
|
gap: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 900px) {
|
||
|
|
.footer-content { grid-template-columns: 1fr 1fr; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-brand {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-logo {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 300;
|
||
|
|
letter-spacing: -0.02em;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-tagline {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-title {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 11px;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
color: var(--royal-blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-links {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-links li {
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-links a {
|
||
|
|
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-style: italic;
|
||
|
|
color: var(--text-primary);
|
||
|
|
text-decoration: none;
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-links a:hover {
|
||
|
|
color: var(--royal-blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Cursor follower */
|
||
|
|
.cursor-follower {
|
||
|
|
position: fixed;
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 50%;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 9999;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background: radial-gradient(circle, rgba(46, 74, 125, 0.03) 0%, transparent 70%);
|
||
|
|
mix-blend-mode: multiply;
|
||
|
|
transition: width 0.3s ease, height 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Navigation */
|
||
|
|
.nav {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: 30px 50px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 100;
|
||
|
|
mix-blend-mode: normal;
|
||
|
|
color: var(--text-primary);
|
||
|
|
background: rgba(245, 245, 240, 0.9);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-logo {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
font-weight: 300;
|
||
|
|
letter-spacing: -0.02em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-menu {
|
||
|
|
display: flex;
|
||
|
|
gap: 40px;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-menu a {
|
||
|
|
font-family: 'Space Grotesk', sans-serif;
|
||
|
|
font-size: 11px;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: inherit;
|
||
|
|
text-decoration: none;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-menu a::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: -5px;
|
||
|
|
left: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 1px;
|
||
|
|
background: currentColor;
|
||
|
|
transition: width 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-menu a:hover::after {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Lime accent decorations */
|
||
|
|
.lime-accent {
|
||
|
|
position: absolute;
|
||
|
|
background: var(--lime-wash);
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lime-circle {
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
border-radius: 50%;
|
||
|
|
top: -100px;
|
||
|
|
right: -100px;
|
||
|
|
filter: blur(80px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.lime-orb {
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 50%;
|
||
|
|
bottom: 200px;
|
||
|
|
left: -150px;
|
||
|
|
filter: blur(60px);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Page Transition Overlay -->
|
||
|
|
<div class="page-transition"></div>
|
||
|
|
|
||
|
|
<!-- Lens Blur Effect -->
|
||
|
|
<div class="lens-blur"></div>
|
||
|
|
|
||
|
|
<!-- Noise Overlay -->
|
||
|
|
<div class="noise-overlay"></div>
|
||
|
|
|
||
|
|
<!-- Concrete Texture Background -->
|
||
|
|
<div class="concrete-bg"></div>
|
||
|
|
|
||
|
|
<!-- Lime Accent Decorations -->
|
||
|
|
<div class="lime-accent lime-circle"></div>
|
||
|
|
<div class="lime-accent lime-orb"></div>
|
||
|
|
|
||
|
|
<!-- Cursor Follower -->
|
||
|
|
<div class="cursor-follower"></div>
|
||
|
|
|
||
|
|
<!-- Isometric Room -->
|
||
|
|
<div class="isometric-container">
|
||
|
|
<div class="isometric-room">
|
||
|
|
<div class="room-floor"></div>
|
||
|
|
<div class="room-wall-left"></div>
|
||
|
|
<div class="room-wall-back"></div>
|
||
|
|
|
||
|
|
<!-- Floating Art Pieces in 3D Room -->
|
||
|
|
<div class="room-art room-art-1">I</div>
|
||
|
|
<div class="room-art room-art-2">II</div>
|
||
|
|
<div class="room-art room-art-3">III</div>
|
||
|
|
<div class="room-art room-art-4">IV</div>
|
||
|
|
<div class="room-art room-art-5">V</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="nav">
|
||
|
|
<div class="nav-logo">VOID</div>
|
||
|
|
<ul class="nav-menu">
|
||
|
|
<li><a href="#exhibition">展览</a></li>
|
||
|
|
<li><a href="#about">关于</a></li>
|
||
|
|
<li><a href="#visit">参观</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<div class="main-content">
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<section class="hero">
|
||
|
|
<h1 class="hero-title">
|
||
|
|
VOID
|
||
|
|
<span>当代艺术邀请展</span>
|
||
|
|
</h1>
|
||
|
|
<button class="btn-explore" onclick="exploreExhibition()">
|
||
|
|
进入展览空间
|
||
|
|
</button>
|
||
|
|
<div class="scroll-indicator">
|
||
|
|
<span>向下滚动</span>
|
||
|
|
<div class="scroll-line"></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Exhibition Section -->
|
||
|
|
<section class="exhibition-section" id="exhibition">
|
||
|
|
<div class="section-header">
|
||
|
|
<p class="section-label">Current Exhibition</p>
|
||
|
|
<h2 class="section-title">2024 · 冬季邀请展</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="masonry-grid">
|
||
|
|
<div class="masonry-item">
|
||
|
|
<div class="masonry-card ao-shadow">
|
||
|
|
<div class="card-image">
|
||
|
|
<span class="card-number">01</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<h3 class="card-title">时间的褶皱</h3>
|
||
|
|
<p class="card-artist">林默涵 · 装置艺术</p>
|
||
|
|
<p class="card-description">探索时间流逝的物质性表达，通过层层叠叠的纸张构造出记忆的迷宫。</p>
|
||
|
|
<button class="card-btn">查看作品</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="masonry-item large">
|
||
|
|
<div class="masonry-card ao-shadow">
|
||
|
|
<div class="card-image">
|
||
|
|
<span class="card-number">02</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<h3 class="card-title">静默之境</h3>
|
||
|
|
<p class="card-artist">陈逸飞 · 油画</p>
|
||
|
|
<p class="card-description">以极简的笔触捕捉城市角落的静谧时刻，模糊了具象与抽象的边界。</p>
|
||
|
|
<button class="card-btn">查看作品</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="masonry-item wide">
|
||
|
|
<div class="masonry-card ao-shadow">
|
||
|
|
<div class="card-image">
|
||
|
|
<span class="card-number">03</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<h3 class="card-title">数字山水</h3>
|
||
|
|
<p class="card-artist">王数字 · 新媒体</p>
|
||
|
|
<p class="card-description">传统山水意境与生成算法的对话，在数字媒介中重新诠释东方美学。</p>
|
||
|
|
<button class="card-btn">查看作品</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="masonry-item square">
|
||
|
|
<div class="masonry-card ao-shadow">
|
||
|
|
<div class="card-image">
|
||
|
|
<span class="card-number">04</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<h3 class="card-title">混凝土之诗</h3>
|
||
|
|
<p class="card-artist">李建造 · 雕塑</p>
|
||
|
|
<p class="card-description">将建筑材料转化为诗意的雕塑语言，探讨工业化与诗意生活的共存。</p>
|
||
|
|
<button class="card-btn">查看作品</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="masonry-item">
|
||
|
|
<div class="masonry-card ao-shadow">
|
||
|
|
<div class="card-image">
|
||
|
|
<span class="card-number">05</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<h3 class="card-title">回声</h3>
|
||
|
|
<p class="card-artist">周音 · 声音艺术</p>
|
||
|
|
<p class="card-description">空间中的声音装置，邀请观众在静默中聆听内心的回响。</p>
|
||
|
|
<button class="card-btn">查看作品</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="masonry-item large">
|
||
|
|
<div class="masonry-card ao-shadow">
|
||
|
|
<div class="card-image">
|
||
|
|
<span class="card-number">06</span>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<h3 class="card-title">虚无的形状</h3>
|
||
|
|
<p class="card-artist">吴空 · 装置</p>
|
||
|
|
<p class="card-description">对"无"的物质化探索，用光与影勾勒出虚无的轮廓。</p>
|
||
|
|
<button class="card-btn">查看作品</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- About Section -->
|
||
|
|
<section class="about-section" id="about">
|
||
|
|
<div class="about-content">
|
||
|
|
<p class="about-text">
|
||
|
|
VOID 是一个致力于呈现<span>当代艺术前沿</span>的实验性空间。
|
||
|
|
我们相信艺术能够超越语言的界限，在视觉的静默中触及灵魂的深处。
|
||
|
|
这里没有界限，只有无限的可能性。
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer class="footer" id="visit">
|
||
|
|
<div class="footer-content">
|
||
|
|
<div class="footer-brand">
|
||
|
|
<div class="footer-logo">VOID</div>
|
||
|
|
<p class="footer-tagline">
|
||
|
|
探索艺术的无限可能<br>
|
||
|
|
在静默中遇见美
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="footer-title">参观</h4>
|
||
|
|
<ul class="footer-links">
|
||
|
|
<li><a href="#">开放时间</a></li>
|
||
|
|
<li><a href="#">路线指引</a></li>
|
||
|
|
<li><a href="#">票务信息</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="footer-title">展览</h4>
|
||
|
|
<ul class="footer-links">
|
||
|
|
<li><a href="#">当前展览</a></li>
|
||
|
|
<li><a href="#">过往展览</a></li>
|
||
|
|
<li><a href="#">艺术家</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="footer-title">联系</h4>
|
||
|
|
<ul class="footer-links">
|
||
|
|
<li><a href="#">关于我们</a></li>
|
||
|
|
<li><a href="#">媒体合作</a></li>
|
||
|
|
<li><a href="#">加入我们</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Cursor Follower
|
||
|
|
const cursorFollower = document.querySelector('.cursor-follower');
|
||
|
|
let mouseX = 0, mouseY = 0;
|
||
|
|
let cursorX = 0, cursorY = 0;
|
||
|
|
|
||
|
|
document.addEventListener('mousemove', (e) => {
|
||
|
|
mouseX = e.clientX;
|
||
|
|
mouseY = e.clientY;
|
||
|
|
});
|
||
|
|
|
||
|
|
function animateCursor() {
|
||
|
|
cursorX += (mouseX - cursorX) * 0.1;
|
||
|
|
cursorY += (mouseY - cursorY) * 0.1;
|
||
|
|
cursorFollower.style.left = cursorX + 'px';
|
||
|
|
cursorFollower.style.top = cursorY + 'px';
|
||
|
|
requestAnimationFrame(animateCursor);
|
||
|
|
}
|
||
|
|
animateCursor();
|
||
|
|
|
||
|
|
// Isometric Room Perspective on Scroll
|
||
|
|
const isometricRoom = document.querySelector('.isometric-room');
|
||
|
|
const roomArts = document.querySelectorAll('.room-art');
|
||
|
|
let ticking = false;
|
||
|
|
|
||
|
|
function updatePerspective() {
|
||
|
|
const scrollY = window.scrollY;
|
||
|
|
const windowHeight = window.innerHeight;
|
||
|
|
const scrollProgress = Math.min(scrollY / windowHeight, 1);
|
||
|
|
|
||
|
|
// Camera movement simulation
|
||
|
|
const rotateX = 55 + scrollProgress * 15;
|
||
|
|
const rotateZ = 45 + scrollProgress * 10;
|
||
|
|
const scale = 1 + scrollProgress * 0.3;
|
||
|
|
|
||
|
|
isometricRoom.style.transform = `
|
||
|
|
translate(-50%, -50%)
|
||
|
|
rotateX(${rotateX}deg)
|
||
|
|
rotateZ(${rotateZ}deg)
|
||
|
|
scale(${scale})
|
||
|
|
`;
|
||
|
|
|
||
|
|
// Z-axis drift for room art pieces
|
||
|
|
roomArts.forEach((art, index) => {
|
||
|
|
const depth = 50 + index * 30;
|
||
|
|
const drift = Math.sin(scrollProgress * Math.PI * 2 + index) * 20;
|
||
|
|
const hoverZ = parseFloat(art.style.transform.match(/translateZ\(([\d.]+)px\)/)?.[1] || 0);
|
||
|
|
art.style.transform = `translateZ(${depth + drift + (scrollProgress * 50)}px)`;
|
||
|
|
});
|
||
|
|
|
||
|
|
ticking = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('scroll', () => {
|
||
|
|
if (!ticking) {
|
||
|
|
requestAnimationFrame(updatePerspective);
|
||
|
|
ticking = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Lens Blur Effect on Scroll - Reduced intensity
|
||
|
|
const lensBlur = document.querySelector('.lens-blur');
|
||
|
|
let blurTimeout;
|
||
|
|
|
||
|
|
window.addEventListener('scroll', () => {
|
||
|
|
const scrollY = window.scrollY;
|
||
|
|
// Much reduced blur effect, only in hero area
|
||
|
|
const blurAmount = scrollY < 500 ? Math.min(scrollY / 200, 2) : 0;
|
||
|
|
|
||
|
|
clearTimeout(blurTimeout);
|
||
|
|
blurTimeout = setTimeout(() => {
|
||
|
|
lensBlur.style.backdropFilter = `blur(${blurAmount}px)`;
|
||
|
|
}, 50);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Parallax Effect for Masonry Items
|
||
|
|
const masonryItems = document.querySelectorAll('.masonry-item');
|
||
|
|
|
||
|
|
const observerOptions = {
|
||
|
|
threshold: 0.1,
|
||
|
|
rootMargin: '0px 0px -50px 0px'
|
||
|
|
};
|
||
|
|
|
||
|
|
const observer = new IntersectionObserver((entries) => {
|
||
|
|
entries.forEach(entry => {
|
||
|
|
if (entry.isIntersecting) {
|
||
|
|
const depth = Math.random() * 30 - 15;
|
||
|
|
entry.target.style.transform = `translateZ(${depth}px)`;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, observerOptions);
|
||
|
|
|
||
|
|
masonryItems.forEach(item => observer.observe(item));
|
||
|
|
|
||
|
|
// Page Transition
|
||
|
|
function exploreExhibition() {
|
||
|
|
const transition = document.querySelector('.page-transition');
|
||
|
|
transition.classList.add('active');
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
window.scrollTo({
|
||
|
|
top: window.innerHeight,
|
||
|
|
behavior: 'smooth'
|
||
|
|
});
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
transition.classList.remove('active');
|
||
|
|
}, 500);
|
||
|
|
}, 600);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Lens focus simulation on hover - Subtle effect
|
||
|
|
const cards = document.querySelectorAll('.masonry-card');
|
||
|
|
|
||
|
|
cards.forEach(card => {
|
||
|
|
card.addEventListener('mouseenter', () => {
|
||
|
|
lensBlur.style.backdropFilter = 'blur(1px)';
|
||
|
|
});
|
||
|
|
|
||
|
|
card.addEventListener('mouseleave', () => {
|
||
|
|
const scrollY = window.scrollY;
|
||
|
|
const blurAmount = scrollY < 500 ? Math.min(scrollY / 200, 2) : 0;
|
||
|
|
lensBlur.style.backdropFilter = `blur(${blurAmount}px)`;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Navigation link transitions
|
||
|
|
const navLinks = document.querySelectorAll('.nav-menu a');
|
||
|
|
|
||
|
|
navLinks.forEach(link => {
|
||
|
|
link.addEventListener('click', (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const targetId = link.getAttribute('href');
|
||
|
|
const targetSection = document.querySelector(targetId);
|
||
|
|
|
||
|
|
if (targetSection) {
|
||
|
|
const transition = document.querySelector('.page-transition');
|
||
|
|
transition.classList.add('active');
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
targetSection.scrollIntoView({ behavior: 'smooth' });
|
||
|
|
setTimeout(() => {
|
||
|
|
transition.classList.remove('active');
|
||
|
|
}, 500);
|
||
|
|
}, 600);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize
|
||
|
|
window.addEventListener('load', () => {
|
||
|
|
// Set initial blur - no blur at start
|
||
|
|
lensBlur.style.backdropFilter = 'blur(0px)';
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|