Responsive Bildfluss Horizontale Galerie ⇐ HTML

[Anonymous]

Ich arbeite daran, diese Galerie zu replizieren: https://preview.themeforest.net/item/co ... iew/240185





Horizontal Scroll Gallery


[*]








Brand

• Home
• About
• Dropdown
  
  Action
• Another action
• Something else here

CTA











































































< /code>
Hier ist mein CSS: < /p>

Code: Select all

.gallery-container {

overflow: hidden;
position: relative;

width:100%;

}
.gallery {
display: flex;

width:max-content;
transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);

}
.gallery img {

height: 37rem;
width:100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out;

flex: 0 0 auto;
opacity: 0.6;
padding: 3rem;

}

.gallery img.active {
transform: scale(1.2);
opacity: 1;
scroll-snap-align: center;
flex: none;

}

/*Reflected CSS */

/* reflection */
.units > :last-child {

transform: rotatex(180deg) translatey(2.95rem);
mask-image: linear-gradient(transparent 30%, white 90%);
-webkit-mask-image: linear-gradient(transparent 30%, white 90%);
text-shadow: 0 0 8px rgba(255 0 0 / 0.4), -2px -2px 6px rgba(0 255 0 / 0.4),
2px 2px 4px rgba(0 255 255 / 0.4);
background-image: unset;

}
/* original design */
.units >  * {
font: bolder 5rem/5rem "EB Garamond";
background-image: url();
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.units {
width: max-content;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
pointer-events: none;
padding: 0;
margin:0;
display: inline-block;
}

< /code>
Mein Javscript: < /p>

const gallery = document.querySelector('.gallery');
const images = document.querySelectorAll('.gallery img');
let index = 0;
let imageCounter = 2;
let imageWidth;
const galleryContainer = document.querySelector('.gallery-container');

// Function to update the gallery when the window is resized or when the wheel is scrolled
function updateGallery() {
// Ensure the width is calculated correctly based on the container's width
imageWidth = galleryContainer.offsetWidth / 6;

// Apply a smooth translate effect to the gallery
gallery.style.transform = `translateX(${-index * imageWidth}px)`;

// Update active class on the images (based on scroll position)
images.forEach(img => img.classList.remove('active'));
images[imageCounter].classList.add('active');
}

// Event listener for wheel scroll
document.addEventListener('wheel', (event) => {
if (event.deltaY > 0 && index < images.length - 6) { // Scroll down
index += 2;
imageCounter += 2;
} else if (event.deltaY < 0 && index > 0) { // Scroll up
index -= 2;
imageCounter -= 2;
}
updateGallery();
});