Newbie here!
Easy Question for those with experienced eyes!
Okay, first the code (Pt 1 HTML, Pt 2 CSS, & Pt 3 JavaScript) and then my question (pt 4) at the end!
Pt 1 HTML code is:
<!doctype html>
<html>
<head>
<title>Why ain't it connecting? There's a gap. 1 should go after 5 and be a continuous loop. </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="column"> <!-- Column 1 -->
<img src="https://img.freepik.com/free-vector/shiny-golden-number-one-star-label-design_1017-27875.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1725667200&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 1" />
<img src="https://img.freepik.com/premium-photo/usa-flag-style-metallic-2-number-balloon-realistic-3d-white-background-generative-ai_69037-2774.jpg?w=900" width="50" height="50" alt="Column 1 Line 2" />
<img src="https://img.freepik.com/free-psd/pink-number-3-is-pink-background_220664-5637.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 3" />
<img src="https://img.freepik.com/premium-photo/3d-blue-number-4-isolated-white-background_776894-170076.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 4" />
<img src="https://img.freepik.com/premium-photo/hand-drawn-number-five-with-scribbles_1060494-68002.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 5" />
</div>
<div class="column"> <!-- Column 2 -->
<img src="https://img.freepik.com/free-vector/shiny-golden-number-one-star-label-design_1017-27875.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1725667200&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 1" />
<img src="https://img.freepik.com/premium-photo/usa-flag-style-metallic-2-number-balloon-realistic-3d-white-background-generative-ai_69037-2774.jpg?w=900" width="50" height="50" alt="Column 2 Line 2" />
<img src="https://img.freepik.com/free-psd/pink-number-3-is-pink-background_220664-5637.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 3" />
<img src="https://img.freepik.com/premium-photo/3d-blue-number-4-isolated-white-background_776894-170076.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 4" />
<img src="https://img.freepik.com/premium-photo/hand-drawn-number-five-with-scribbles_1060494-68002.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 5" />
</div>
<div class="column"> <!-- Column 3 -->
<img src="https://img.freepik.com/free-vector/shiny-golden-number-one-star-label-design_1017-27875.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1725667200&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 1" />
<img src="https://img.freepik.com/premium-photo/usa-flag-style-metallic-2-number-balloon-realistic-3d-white-background-generative-ai_69037-2774.jpg?w=900" width="50" height="50" alt="Column 3 Line 2" />
<img src="https://img.freepik.com/free-psd/pink-number-3-is-pink-background_220664-5637.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 3" />
<img src="https://img.freepik.com/premium-photo/3d-blue-number-4-isolated-white-background_776894-170076.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 4" />
<img src="https://img.freepik.com/premium-photo/hand-drawn-number-five-with-scribbles_1060494-68002.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 5" />
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
Pt 2 The CSS Code is:
.container {
display: flex;
justify-content: space-around;
overflow: hidden;
height: 500px;
/* Adjust as needed */ }
.column {
display: flex;
flex-direction: column;
animation: scroll 10s linear infinite; }
.column img {
width: 100px;
/* Adjust as needed */
height: 100px;
/* Adjust as needed */ }
@keyframes scroll {
0% { transform: translateY(0); }
100% {transform: translateY(-500px);
/* Adjust based on image height */ }
}
Pt 3 The JavaScript is:
const columns = document.querySelectorAll('.column'); columns.forEach(column => { column.addEventListener('animationiteration', () => { const firstImage = column.querySelector('img:first-child'); column.appendChild(firstImage); }); });
Pt 4:> The question:
I want these images to appear in the background of a website. 3 columns of 1-2-3-4-5 appearing vertically. Did that.
I am trying to have it scroll like a wheel. It’s scrolling.
My Problem:
The “Number 1,” should appear, IMMEDIATELY after “the Number 5” there should not be a gap. (if you run the code/run the code snipbit you should see it) It should be continuous, like a wheel. I feel like I’m in too deep at the moment and I’m missing something really easy.
My question is how do I get “the 1,” right after “the 5,” (but continually looping into 2-3-4-5-1-2-3-4-5-1-2-3-4-5-1 &) to continue the loop endlessly with no gap.
I tried fiddling with the CSS and HTML but i’m not TOO experienced with JavaScript enough to comfortably toy with it. Is this more of a JavaScript thing?
Closing Note 1:> (this question was uncorrectly edited in the staging ground and messed up how its being asked by e t h a n. i have resetted the question back to its normalcy. The person who edited the first time did not do a good job and are not helping; just conducting powermoves. leave my question alone; I am already telling you “You are not helping. You are asking me to provide a gif of my code running (that’s weird) and not even asking what I want it to do. run my code (thats why its weird; you could just run the code rather than ask someone to show you a gif of their code) and you’ll see the problem instantly.” The 1 doesnt loop after the 5, there’s a gap after the 5. the problem is:> “how to get the 1 to come immediately after the 5”)
Closing Note 2: -Don’t Edit my question. I’m the one asking it; i know what im asking. the one who edited it edited it wrong and didnt get my question correct.
-Thanks