Ниже приведен минимальный воспроизводимый пример:
Код: Выделить всё
window.addEventListener('load', () => {
if (typeof gsap === 'undefined') return;
gsap.registerPlugin(ScrollTrigger);
const diagonalTrack = document.querySelector('.diagonal-carousel .carousel-track');
if (!diagonalTrack) return;
const extraOffset = 1000; // tweak as needed
// Total distance the track needs to move horizontally
const totalDiagonalScroll = diagonalTrack.scrollWidth - window.innerWidth;
gsap.to(diagonalTrack, {
x: () => -totalDiagonalScroll + window.innerWidth * 0.05 - extraOffset,
ease: "none",
scrollTrigger: {
trigger: ".diagonal-carousel",
start: "top top",
end: () => `+=${totalDiagonalScroll + extraOffset}`,
scrub: 1,
pin: true,
anticipatePin: 1,
invalidateOnRefresh: true,
markers: true // turn on markers for debugging
}
});
});Код: Выделить всё
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 200vh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #050711;
color: #f5f5f5;
}
.spacer {
height: 80vh;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
}
/* Basic button for card */
.btn.sm {
padding: 6px 12px;
font-size: 0.9rem;
border-radius: 8px;
border: none;
cursor: pointer;
}
/* === Diagonal Carousel Effect (extracted from your file) === */
.diagonal-carousel {
position: relative;
overflow: hidden;
width: 100%;
height: 120vh;
}
/* Center inside the container */
.diagonal-carousel .carousel-inner {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-start;
transform-style: preserve-3d;
perspective: 700px;
}
/* Apply the tilt and manage width */
.diagonal-carousel .carousel-track {
display: flex;
gap: 60px;
transform-style: preserve-3d;
transform: rotate3d(2, 0, 1, 20deg) scale(0.8); /* Scale down + diagonal tilt */
width: max-content;
padding: 0 20vw;
transform-origin: bottom right;
}
/* Each card */
.diagonal-carousel .case-card {
position: relative;
flex: 0 0 80vw;
height: 70vh;
border-radius: 24px;
overflow: hidden;
background: #181b25;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
transform-style: preserve-3d;
}
/* Image + hover zoom */
.case-card .card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transition: transform 0.5s ease;
}
.case-card:hover .card-image img {
transform: scale(1.05);
}
/* Text overlay */
.case-card .card-text {
position: relative;
z-index: 1;
padding: 32px;
max-width: 400px;
color: #fff;
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.45);
border-radius: 16px;
margin: 0 0 32px 32px;
}
.case-card h3 { margin: 0 0 4px; font-size: 1.4rem; }
.case-card h4 { margin: 0 0 12px; font-weight: 600; opacity: 0.85; }
.case-card p { margin: 0 0 16px; line-height: 1.4; color: #e5e5e5; }
@media (max-width: 720px) {
.diagonal-carousel .case-card { flex: 0 0 90vw; height: 60vh; }
.case-card .card-text { padding: 20px; margin: 0 0 20px 20px; }
}Код: Выделить всё
Minimal Diagonal Scroll Demo
Scroll down to see diagonal carousel
Minimal demo of the diagonal scroll effect.
[img]https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg[/img]
Diagonal Card 1
[h4]NUTTER BUTTER, YOU GOOD?[/h4]
This 56-year-old cookie’s rabbit hole of absurdist escapism consumed the internet.
View case
[img]https://images.pexels.com/photos/196652/pexels-photo-196652.jpeg[/img]
Diagonal Card 2
[h4]CRUNCH TIME CAMPAIGN[/h4]
A nostalgic voyage through cereal seas – reviving childhood joy for adults.
View case
[img]https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg[/img]
Diagonal Card 3
[h4]LAUNCH LAB[/h4]
Experiments in motion, copy, and creative strategy for bold brands.
View case
[img]https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg[/img]
Diagonal Card 4
[h4]NIGHT DRIVE[/h4]
Moody, cinematic explorations of color, light, and narrative.
View case
End of demo.
Подробнее здесь: https://stackoverflow.com/questions/798 ... h-n-images
