Can you assist me in creating infinite images and implementing a 3D translation similar to this link [https://public.work/]
I am using HTML, CSS, JS, and Bootstrap 5
Your feedback would be highly appreciated. If there are alternative methods to achieve the same result, please do suggest them to me :)
I expect the output to resemble the one at [https://public.work/]
Here is my code: HTML:
<main>
<div class="container-fluid">
<div class="row">
<div class="col-4 col-xl-3">
<a href="pages/rib/products/blackShirt.html"
><img
src="assets/images/rib/BLACK-SHIRT.jpg"
class="img-fluid"
alt="black-shirt"
/></a>
</div>
...
</div>
</div>
</main>
CSS:
main {
width: 100vw;
height: 100vh;
overflow: auto;
}
.container-fluid {
width: 150%;
height: 100%;
}
.img-fluid:hover {
cursor: pointer;
}
@media (max-width: 576px) {
.container-fluid {
width: 200%;
height: 200%;
}
}
JS:
document.addEventListener("DOMContentLoaded", (event) => {
const images = document.querySelectorAll("main .img-fluid");
images.forEach((img) => {
img.style.cursor = "pointer";
img.addEventListener("mousedown", (e) => {
img.style.cursor = "grabbing";
const shiftX = e.clientX - img.getBoundingClientRect().left;
const shiftY = e.clientY - img.getBoundingClientRect().top;
const moveAt = (pageX, pageY) => {
img.style.left = pageX - shiftX + "px";
img.style.top = pageY - shiftY + "px";
};
...
});
img.ondragstart = () => {
return false;
};
});
});