remove: all scan/tech overlay effects
This commit is contained in:
ordinarthur
parent
15d7f856cb
commit
209d222eb0
176
public/style.css
176
public/style.css
@ -659,181 +659,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
|
||||
.footer a { color: var(--clr-black); text-decoration: none; }
|
||||
.footer a:hover { text-decoration: underline; }
|
||||
|
||||
/* ---- TECHNICAL DRAWING OVERLAY (panel image) ---- */
|
||||
.tech-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tech-corner {
|
||||
position: absolute;
|
||||
width: 28px; height: 28px;
|
||||
border-color: rgba(232,168,0,0);
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
transition: border-color 0.6s ease, width 0.5s ease, height 0.5s ease;
|
||||
}
|
||||
.tech-visible .tech-corner {
|
||||
border-color: rgba(232,168,0,0.6);
|
||||
}
|
||||
.tech-corner--tl { top: 7%; left: 5%; border-top-width: 1px; border-left-width: 1px; }
|
||||
.tech-corner--tr { top: 7%; right: 5%; border-top-width: 1px; border-right-width: 1px; }
|
||||
.tech-corner--br { bottom: 7%; right: 5%; border-bottom-width: 1px; border-right-width: 1px; }
|
||||
.tech-corner--bl { bottom: 7%; left: 5%; border-bottom-width: 1px; border-left-width: 1px; }
|
||||
|
||||
.tech-center-h, .tech-center-v {
|
||||
position: absolute;
|
||||
background: rgba(232,168,0,0);
|
||||
transition: background 0.5s ease 0.15s;
|
||||
}
|
||||
.tech-visible .tech-center-h, .tech-visible .tech-center-v {
|
||||
background: rgba(232,168,0,0.2);
|
||||
}
|
||||
.tech-center-h {
|
||||
top: 50%; left: 38%; right: 38%;
|
||||
height: 1px; transform: translateY(-0.5px);
|
||||
}
|
||||
.tech-center-v {
|
||||
left: 50%; top: 38%; bottom: 38%;
|
||||
width: 1px; transform: translateX(-0.5px);
|
||||
}
|
||||
|
||||
/* Dimension lines */
|
||||
.tech-dim {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease 0.3s;
|
||||
}
|
||||
.tech-visible .tech-dim { opacity: 1; }
|
||||
.tech-dim--h {
|
||||
bottom: 4%; left: 5%; right: 5%;
|
||||
}
|
||||
.tech-dim--v {
|
||||
right: 2.5%; top: 7%; bottom: 7%;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.tech-dim-line {
|
||||
flex: 1;
|
||||
}
|
||||
.tech-dim--h .tech-dim-line { height: 1px; background: rgba(232,168,0,0.35); }
|
||||
.tech-dim--v .tech-dim-line { width: 1px; background: rgba(232,168,0,0.35); }
|
||||
.tech-dim-text {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.5rem;
|
||||
color: rgba(232,168,0,0.65);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
/* Dimension arrows */
|
||||
.tech-dim-arrow {
|
||||
font-size: 0.5rem;
|
||||
color: rgba(232,168,0,0.5);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Reference text */
|
||||
.tech-ref {
|
||||
position: absolute;
|
||||
bottom: 1.5%; left: 5%;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.45rem;
|
||||
color: rgba(232,168,0,0);
|
||||
letter-spacing: 0.06em;
|
||||
transition: color 0.5s ease 0.5s;
|
||||
}
|
||||
.tech-visible .tech-ref { color: rgba(232,168,0,0.45); }
|
||||
|
||||
/* Blueprint grid */
|
||||
.tech-grid {
|
||||
position: absolute;
|
||||
inset: 7% 5%;
|
||||
background-image:
|
||||
linear-gradient(rgba(232,168,0,0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(232,168,0,0.04) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease 0.05s;
|
||||
}
|
||||
.tech-visible .tech-grid { opacity: 1; }
|
||||
|
||||
/* Scan line effect */
|
||||
.tech-scanline {
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(to bottom,
|
||||
transparent,
|
||||
rgba(232,168,0,0.3),
|
||||
rgba(232,168,0,0.5),
|
||||
rgba(232,168,0,0.3),
|
||||
transparent);
|
||||
box-shadow: 0 0 4px rgba(232,168,0,0.15);
|
||||
z-index: 11;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
.tech-visible .tech-scanline {
|
||||
/* disabled — scan effect removed for cleaner look */
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes techScanLine {
|
||||
0% { top: 0%; opacity: 1; }
|
||||
90% { opacity: 0.8; }
|
||||
100% { top: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
/* ---- CARD CAD ELEMENTS (scroll-triggered via GSAP) ---- */
|
||||
.card-scanline {
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(to bottom,
|
||||
transparent,
|
||||
rgba(232,168,0,0.3),
|
||||
rgba(232,168,0,0.5),
|
||||
rgba(232,168,0,0.3),
|
||||
transparent);
|
||||
box-shadow: 0 0 6px rgba(232,168,0,0.15);
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
top: 100%;
|
||||
}
|
||||
.card-corners {
|
||||
position: absolute;
|
||||
inset: 8%;
|
||||
pointer-events: none;
|
||||
z-index: 4;
|
||||
}
|
||||
.cc {
|
||||
position: absolute;
|
||||
width: 16px; height: 16px;
|
||||
border-color: rgba(232,168,0,0.55);
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.cc-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
|
||||
.cc-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
|
||||
.cc-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
|
||||
.cc-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
|
||||
|
||||
.card-coord-tag {
|
||||
position: absolute;
|
||||
bottom: 8px; left: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.58rem;
|
||||
color: rgba(232,168,0,0.9);
|
||||
letter-spacing: 0.05em;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
background: #111;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
/* ---- (REMOVED) tech overlay + card CAD effects ---- */
|
||||
|
||||
/* Construction line under collection header — visible on hover only */
|
||||
.cad-construction-line {
|
||||
|
||||
@ -165,38 +165,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Product cards: staggered CAD reveal ----
|
||||
// ---- Product cards: simple fade-in on scroll ----
|
||||
const cards = document.querySelectorAll('.product-card');
|
||||
|
||||
cards.forEach((card, i) => {
|
||||
cards.forEach((card) => {
|
||||
const img = card.querySelector('.card-img-wrap img');
|
||||
const meta = card.querySelector('.card-meta');
|
||||
const imgWrap = card.querySelector('.card-img-wrap');
|
||||
|
||||
if (!img) return;
|
||||
|
||||
// Create a CAD scan line per card
|
||||
const scanLine = document.createElement('div');
|
||||
scanLine.className = 'card-scanline';
|
||||
imgWrap.appendChild(scanLine);
|
||||
|
||||
// Create corner marks per card
|
||||
const cornerOverlay = document.createElement('div');
|
||||
cornerOverlay.className = 'card-corners';
|
||||
cornerOverlay.innerHTML =
|
||||
'<span class="cc cc-tl"></span>' +
|
||||
'<span class="cc cc-tr"></span>' +
|
||||
'<span class="cc cc-br"></span>' +
|
||||
'<span class="cc cc-bl"></span>';
|
||||
imgWrap.appendChild(cornerOverlay);
|
||||
|
||||
// Create coordinate annotation per card
|
||||
const coordTag = document.createElement('div');
|
||||
coordTag.className = 'card-coord-tag';
|
||||
coordTag.textContent = `[${String(i + 1).padStart(3, '0')}] — ${img.naturalWidth || '1024'} × ${img.naturalHeight || '1024'} px`;
|
||||
imgWrap.appendChild(coordTag);
|
||||
|
||||
// GSAP timeline triggered on scroll
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
@ -205,41 +182,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
},
|
||||
});
|
||||
|
||||
// 1. Image clip-path reveal (bottom → top scan) — subtle
|
||||
// Simple fade + slide up
|
||||
tl.fromTo(img,
|
||||
{ clipPath: 'inset(100% 0 0 0)', filter: 'brightness(1.1) grayscale(40%)' },
|
||||
{ clipPath: 'inset(0% 0 0 0)', filter: 'brightness(1) grayscale(15%)',
|
||||
duration: 0.9, ease: 'power3.out' },
|
||||
{ opacity: 0, y: 20 },
|
||||
{ opacity: 1, y: 0, duration: 0.6, ease: 'power2.out' },
|
||||
0
|
||||
);
|
||||
|
||||
// 2. Scan line sweeps up
|
||||
tl.fromTo(scanLine,
|
||||
{ top: '100%', opacity: 1 },
|
||||
{ top: '-2%', opacity: 0, duration: 0.9, ease: 'power3.out' },
|
||||
0
|
||||
);
|
||||
|
||||
// 3. Corner brackets appear
|
||||
tl.fromTo(cornerOverlay.querySelectorAll('.cc'),
|
||||
{ opacity: 0, scale: 0.5 },
|
||||
{ opacity: 1, scale: 1, duration: 0.4, stagger: 0.06, ease: 'back.out(2)' },
|
||||
0.3
|
||||
);
|
||||
|
||||
// 4. Coordinate tag types in
|
||||
tl.fromTo(coordTag,
|
||||
{ opacity: 0, x: -10 },
|
||||
{ opacity: 1, x: 0, duration: 0.4, ease: 'power2.out' },
|
||||
0.5
|
||||
);
|
||||
|
||||
// 5. Meta bar slides in
|
||||
if (meta) {
|
||||
tl.fromTo(meta,
|
||||
{ opacity: 0, y: 8 },
|
||||
{ opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' },
|
||||
0.4
|
||||
0.2
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -259,169 +213,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
// ==========================================================
|
||||
// 4. TECHNICAL DRAWING OVERLAY (panel)
|
||||
// 4. (REMOVED) — no overlay effects on panel image
|
||||
// ==========================================================
|
||||
|
||||
const panelImgCol = document.querySelector('.panel-img-col');
|
||||
let techOverlay = null;
|
||||
let techTimeline = null;
|
||||
|
||||
function createTechOverlay(card) {
|
||||
if (techOverlay) techOverlay.remove();
|
||||
|
||||
techOverlay = document.createElement('div');
|
||||
techOverlay.className = 'tech-overlay';
|
||||
|
||||
// Corner brackets
|
||||
['tl', 'tr', 'br', 'bl'].forEach(pos => {
|
||||
const corner = document.createElement('div');
|
||||
corner.className = `tech-corner tech-corner--${pos}`;
|
||||
techOverlay.appendChild(corner);
|
||||
});
|
||||
|
||||
// Center crosshair
|
||||
const centerH = document.createElement('div');
|
||||
centerH.className = 'tech-center-h';
|
||||
const centerV = document.createElement('div');
|
||||
centerV.className = 'tech-center-v';
|
||||
techOverlay.appendChild(centerH);
|
||||
techOverlay.appendChild(centerV);
|
||||
|
||||
// Horizontal dimension line
|
||||
const dimH = document.createElement('div');
|
||||
dimH.className = 'tech-dim tech-dim--h';
|
||||
dimH.innerHTML =
|
||||
'<span class="tech-dim-arrow">◂</span>' +
|
||||
'<span class="tech-dim-line"></span>' +
|
||||
'<span class="tech-dim-text">840</span>' +
|
||||
'<span class="tech-dim-line"></span>' +
|
||||
'<span class="tech-dim-arrow">▸</span>';
|
||||
techOverlay.appendChild(dimH);
|
||||
|
||||
// Vertical dimension line
|
||||
const dimV = document.createElement('div');
|
||||
dimV.className = 'tech-dim tech-dim--v';
|
||||
dimV.innerHTML =
|
||||
'<span class="tech-dim-arrow">▴</span>' +
|
||||
'<span class="tech-dim-line"></span>' +
|
||||
'<span class="tech-dim-text">420</span>' +
|
||||
'<span class="tech-dim-line"></span>' +
|
||||
'<span class="tech-dim-arrow">▾</span>';
|
||||
techOverlay.appendChild(dimV);
|
||||
|
||||
// Reference text
|
||||
const ref = document.createElement('div');
|
||||
ref.className = 'tech-ref';
|
||||
const idx = card ? card.dataset.index : '001';
|
||||
ref.textContent = `REF: ${idx} — SCALE 1:5 — UNIT: mm`;
|
||||
techOverlay.appendChild(ref);
|
||||
|
||||
// Blueprint grid
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'tech-grid';
|
||||
techOverlay.appendChild(grid);
|
||||
|
||||
// Scan line
|
||||
const scanline = document.createElement('div');
|
||||
scanline.className = 'tech-scanline';
|
||||
techOverlay.appendChild(scanline);
|
||||
|
||||
if (panelImgCol) panelImgCol.appendChild(techOverlay);
|
||||
}
|
||||
|
||||
function animateTechOverlay() {
|
||||
if (!techOverlay) return;
|
||||
|
||||
// Kill previous timeline
|
||||
if (techTimeline) techTimeline.kill();
|
||||
|
||||
const corners = techOverlay.querySelectorAll('.tech-corner');
|
||||
const centerH = techOverlay.querySelector('.tech-center-h');
|
||||
const centerV = techOverlay.querySelector('.tech-center-v');
|
||||
const dimH = techOverlay.querySelector('.tech-dim--h');
|
||||
const dimV = techOverlay.querySelector('.tech-dim--v');
|
||||
const ref = techOverlay.querySelector('.tech-ref');
|
||||
const grid = techOverlay.querySelector('.tech-grid');
|
||||
const scanline = techOverlay.querySelector('.tech-scanline');
|
||||
|
||||
techTimeline = gsap.timeline();
|
||||
|
||||
// 1. Blueprint grid fades in
|
||||
techTimeline.fromTo(grid,
|
||||
{ opacity: 0 },
|
||||
{ opacity: 1, duration: 0.6, ease: 'power1.in' },
|
||||
0
|
||||
);
|
||||
|
||||
// 2. Scan line — disabled for cleaner look
|
||||
gsap.set(scanline, { opacity: 0 });
|
||||
|
||||
// 3. Corner brackets draw in (scale from corner)
|
||||
corners.forEach((c, i) => {
|
||||
const origins = ['top left', 'top right', 'bottom right', 'bottom left'];
|
||||
techTimeline.fromTo(c,
|
||||
{ opacity: 0, scale: 0, borderColor: 'rgba(232,168,0,0)' },
|
||||
{ opacity: 1, scale: 1, borderColor: 'rgba(232,168,0,0.6)',
|
||||
transformOrigin: origins[i],
|
||||
duration: 0.4, ease: 'back.out(1.5)' },
|
||||
0.15 + i * 0.08
|
||||
);
|
||||
});
|
||||
|
||||
// 4. Center crosshair extends
|
||||
techTimeline.fromTo(centerH,
|
||||
{ scaleX: 0, opacity: 0 },
|
||||
{ scaleX: 1, opacity: 1, duration: 0.5, ease: 'power2.out' },
|
||||
0.3
|
||||
);
|
||||
techTimeline.fromTo(centerV,
|
||||
{ scaleY: 0, opacity: 0 },
|
||||
{ scaleY: 1, opacity: 1, duration: 0.5, ease: 'power2.out' },
|
||||
0.35
|
||||
);
|
||||
|
||||
// 5. Dimension lines extend
|
||||
techTimeline.fromTo(dimH,
|
||||
{ opacity: 0, scaleX: 0 },
|
||||
{ opacity: 1, scaleX: 1, transformOrigin: 'center center',
|
||||
duration: 0.6, ease: 'power2.out' },
|
||||
0.4
|
||||
);
|
||||
techTimeline.fromTo(dimV,
|
||||
{ opacity: 0, scaleY: 0 },
|
||||
{ opacity: 1, scaleY: 1, transformOrigin: 'center center',
|
||||
duration: 0.6, ease: 'power2.out' },
|
||||
0.45
|
||||
);
|
||||
|
||||
// 6. Reference text types in
|
||||
techTimeline.fromTo(ref,
|
||||
{ opacity: 0, x: -15 },
|
||||
{ opacity: 1, x: 0, duration: 0.4, ease: 'power2.out' },
|
||||
0.6
|
||||
);
|
||||
|
||||
// 7. Panel image — smooth zoom reveal
|
||||
const panelImg = document.getElementById('panel-img');
|
||||
if (panelImg) {
|
||||
techTimeline.fromTo(panelImg,
|
||||
{ opacity: 0, scale: 1.06 },
|
||||
{ opacity: 0.92, scale: 1, duration: 1.2, ease: 'power2.out' },
|
||||
0
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function hideTechOverlay() {
|
||||
if (techTimeline) techTimeline.kill();
|
||||
if (techOverlay) {
|
||||
gsap.to(techOverlay, { opacity: 0, duration: 0.3, onComplete: () => {
|
||||
if (techOverlay) techOverlay.remove();
|
||||
techOverlay = null;
|
||||
}});
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================
|
||||
// 5. PRODUCT PANEL
|
||||
// ==========================================================
|
||||
@ -551,10 +345,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
'summary, .panel-close, .checkout-btn, .checkout-submit'
|
||||
));
|
||||
|
||||
// Technical drawing overlay (delayed for panel slide-in)
|
||||
createTechOverlay(card);
|
||||
setTimeout(() => animateTechOverlay(), 350);
|
||||
|
||||
if (pushState) {
|
||||
const cardSlug = card.dataset.slug || toSlug(card.dataset.name);
|
||||
history.pushState({ slug: cardSlug }, '', `/collection/${cardSlug}`);
|
||||
@ -562,7 +352,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
function closePanel(pushState = true) {
|
||||
hideTechOverlay();
|
||||
panel.classList.remove('is-open');
|
||||
panel.setAttribute('aria-hidden', 'true');
|
||||
document.body.style.overflow = '';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user