Can you help me to do infinite images and translate 3d like this link [https://public.work/]
I’m use html,css, js, and bootstrap 5
Your response is very helpful to me, if there is alternative other than that code, just tell me what should i do:)
I’m expect the result like this link [https://public.work/]
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 class="col-4 col-xl-3">
<a href="pages/rib/products/whiteShirt.html"
><img
src="assets/images/rib/WHITE-SHIRT.JPG"
class="img-fluid"
alt="white-shirt"
/></a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/rib/products/greyShirt.html"
><img
src="assets/images/rib/GREY-SHIRT.JPG"
class="img-fluid"
alt="grey-shirt"
/></a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/rib/products/blackCap.html"
><img
src="assets/images/rib/BLACK-CAP.jpg"
class="img-fluid"
alt="black-cap"
/></a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/rib/products/redCap.html"
><img
src="assets/images/rib/RED-CAP.jpg"
class="img-fluid"
alt="red-cap"
/></a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/teamJersey.html"
><img
src="assets/images/podium-ocra/team-jersey.jpg"
class="img-fluid"
alt="team-jersey"
/></a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/ocraGreen.html">
<img
src="assets/images/podium-ocra/ocra-green.jpg"
class="img-fluid"
alt="shirt-black"
/>
</a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/toteBag.html">
<img
src="assets/images/podium-ocra/tote-bag.jpg"
class="img-fluid"
alt="shirt-black"
/>
</a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/glassCup.html">
<img
src="assets/images/podium-ocra/glass-cup.jpg"
class="img-fluid"
alt="shirt-black"
/>
</a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/stickerPack.html">
<img
src="assets/images/podium-ocra/sticker-pack.jpg"
class="img-fluid"
alt="shirt-black"
/>
</a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/capNavy.html">
<img
src="assets/images/podium-ocra/cap-navy.jpg"
class="img-fluid"
alt="shirt-black"
/>
</a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/capBlue.html">
<img
src="assets/images/podium-ocra/cap-blue.jpg"
class="img-fluid"
alt="shirt-black"
/>
</a>
</div>
<div class="col-4 col-xl-3">
<a href="pages/podium-ocra/products/capGreen.html">
<img
src="assets/images/podium-ocra/cap-green.jpg"
class="img-fluid"
alt="shirt-black"
/>
</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";
};
const onMouseMove = (e) => {
moveAt(e.pageX, e.pageY);
};
document.addEventListener("mousemove", onMouseMove);
img.onmouseup = () => {
document.removeEventListener("mousemove", onMouseMove);
img.style.cursor = "grab";
img.onmouseup = null;
};
});
img.ondragstart = () => {
return false;
};
});
});
This setup will create an infinite scroll effect where placeholder images are loaded dynamically as the user scrolls down the page. Adjust the limit variable if you want to load more or fewer images per scroll. I hope you are familiar with promises and timeouts.
document.addEventListener("DOMContentLoaded", () => {
const imageContainer = document.getElementById("image-container");
const loading = document.getElementById("loading");
let page = 1;
const limit = 10; // Number of images to load per request
const fetchImages = () => {
// Simulate an API request to fetch images
return new Promise((resolve) => {
setTimeout(() => {
const images = [];
for (let i = 0; i < limit; i++) {
images.push(
`https://via.placeholder.com/600x200?text=Image+${
(page - 1) * limit + i + 1
}`
);
}
resolve(images);
}, 1000); // Simulate network delay
});
};
const loadImages = async() => {
loading.style.display = "block";
const images = await fetchImages();
loading.style.display = "none";
images.forEach((src) => {
const img = document.createElement("img");
img.src = src;
img.alt = "Placeholder Image";
img.classList.add("image");
imageContainer.appendChild(img);
});
page++;
};
const handleScroll = () => {
const scrollTop = window.scrollY;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
if (scrollTop + windowHeight >= documentHeight - 10) {
loadImages();
}
};
// Initial load
loadImages();
// Attach scroll event listener
window.addEventListener("scroll", handleScroll);
});body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
padding: 20px;
}
.image {
width: 100%;
max-width: 600px;
height: 200px;
margin-bottom: 20px;
background: lightgrey;
}
.loading {
text-align: center;
margin: 20px 0;
}<div class="container" id="image-container">
<!-- Images will be appended here -->
</div>
<div class="loading" id="loading">Loading...</div>2