AzitaRahimi/final-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scroll-showcase & padding

Browse Source
This commit is contained in:
zahrarahimi2
2026-07-05 11:54:25 +03:30
parent fa10e5309b
commit 033726901d
4 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/portfolio-gallery.css
View File

@@ -30,7 +30,7 @@
color: #fff; color: #fff;
} }
.gallery-section .gallery-thumbnail { .gallery-section .gallery-thumbnail {
margin: 24px 0 32px; margin-top: 24px;
} }
.gallery-section .gallery-thumbnail p { .gallery-section .gallery-thumbnail p {
display: none; display: none;

5
src/assets/css/portfolio-responsive.css
View File

@@ -113,7 +113,12 @@
} }
.showcase-section > .container-showcase { .showcase-section > .container-showcase {
height: calc(var(--slides-count) * 100dvh); height: calc(var(--slides-count) * 100dvh);
scroll-snap-align: start;
} }
html {
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
.showcase-sticky { .showcase-sticky {
height: 100vh; height: 100vh;
} }

2
src/assets/css/portfolio.css
View File

@@ -672,7 +672,7 @@ body.dragging-scroll {
align-items: flex-start; align-items: flex-start;
gap: 48px; gap: 48px;
position: relative; position: relative;
top: 69px; /* top: 69px; */
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.side-buttons { .side-buttons {

14
src/assets/js/portfolio.js
View File

@@ -571,15 +571,19 @@ function updateScrollScene() {
const maxScroll = Math.max(scrollHeight - window.innerHeight, 1); const maxScroll = Math.max(scrollHeight - window.innerHeight, 1);
const progress = Math.min(Math.max(scrollInside / maxScroll, 0), 1); const progress = Math.min(Math.max(scrollInside / maxScroll, 0), 1);
const exactIndex = progress * (totalSlides - 1); const exactIndex = progress * (totalSlides - 1);
const current = Math.round(exactIndex);
let current;
if (isMobile) { if (isMobile) {
current = Math.floor(exactIndex + 0.15);
current = Math.min(Math.max(current, 0), totalSlides - 1);
textTrack.style.transform = 'translateY(0)'; textTrack.style.transform = 'translateY(0)';
resetTextItemInlineStyles(); resetTextItemInlineStyles();
setActiveSlide(current); setActiveSlide(current);
return; return;
} }
current = Math.round(exactIndex);
textTrack.style.transform = `translateY(-${exactIndex * 60}vh)`; textTrack.style.transform = `translateY(-${exactIndex * 60}vh)`;
@@ -589,16 +593,14 @@ function updateScrollScene() {
textItems.forEach((item, index) => { textItems.forEach((item, index) => {
const offset = index - exactIndex; const offset = index - exactIndex;
const absOffset = Math.abs(offset);
let blur = 0; let blur = 0;
let opacity = 1; let opacity = 1;
if (offset > 0) { if (offset > 0) {
const enterProgress = Math.min(offset, 1); blur = absOffset > 0.1 ? Math.min((absOffset - 0.1) * 25, 20) : 0;
opacity = Math.max(1 - absOffset * 2.5, 0);
blur = Math.max((enterProgress - 0.35) * 14, 0);
opacity = Math.min(1.2 - enterProgress, 1);
} }
item.style.filter = `blur(${blur}px)`; item.style.filter = `blur(${blur}px)`;