I have been attempting to create a scrolling effect in this div with columns that moves down infinitely - Example, like the one on this Google developer page - Google developers || Infinite scroller image. However, I have not been successful so far. I have a <div> called "imgs" containing a certain number of images. When "imgs" reaches a certain position, the images from the bottom of the div are moved to the top invisibly for the user.
Here is some of my code:
let imgsContainer = document.getElementById("imgs");
let imgAppear = document.getElementById("imgAppear");
function imgsContainerMove() {
let top = 0;
setInterval(imgsContainerMoving, 25);
function imgsContainerMoving() { // Animation
top++;
imgsContainer.style.top = top + '%';
if (top === 100) top = 0; //Top reset
if (imgsContainer.style.top == "1%") {
Array.from(document.querySelectorAll("div.imgs > img")).slice(-6).forEach((image) => imgAppear.prepend(image)) //Adding images to the top
}
}
}
imgsContainerMove(); // execute functionbody{
margin: 0;
}
.gallery-block {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
background-color: #2B3C35;
}
.gallery-bg {
position: relative;
margin: 50px 0;
padding: 0 10px;
width: 100%;
height: 40vh;
overflow: hidden;
display: flex;
justify-content: center;
}
.gallery-bg .overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: auto;
background: rgb(43, 60, 53);
background: -moz-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%);
background: -webkit-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%);
background: linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%);
}
.imgs {
position: absolute;
width: 75vw;
columns: 200px;
column-gap: 15px;
}
.imgs img {
width: 100%;
margin-bottom: 15px;
border-radius: 5px;
}<div class="gallery-block">
<h2>Gallery</h2>
<img src="img/triangle.png" alt="" class="triang">
<div class="gallery-bg">
<div class="imgs" id="imgs">
<!-- Insert your images here -->
</div>
<div class="overlay"></div>
</div>