so I'm trying to create an infinite scroll animation on my website, but I've been really struggling. The original tutorial is here, and uses 6 images, with 4 repeating at the end to make the transition seamless.
https://designshack.net/articles/css/infinitephotobanner/
The problem is that when I add more images, the animation doesn't work. I know that's because I need to increase the width and other variables. In the original, it looks like since she has 10 images (6 original and 4 repeats) that are each 350px, and the photobanner is 3550px, the formula should be 10 times the image width plus 50px for the margin. So I tried doing that to start.
I've been adjusting how much the banner moves relentlessly, but the tutorial doesn't explain how I need to calculate the distance that the banner needs to move without it looping. Looking online there are tons of people with the same problem, and I haven't found any clear answers except copying and pasting someone's code. Is there a better guide that I could be using, or could anyone let me know what variables I need to be adjusting?
Also if I change the container width from 1000px to something larger, will I have to adjust the other numbers as well? If so, how do I calculate that? Surely there must be a better way than rewatching the loop 1000 times, and slightly changing the number each time until the pixels line up perfectly? If so that's going to take me an extremely long time since my loop is so long.
If it helps, each image is 800px by 308px. Here is the HTML. Any help or even a source to learn how to figure it out myself would be really appreciated.
<div id="container">
<div class="photobanner">
<img class="first" src="img1.png" alt="" />
<img src="img2.png" alt="" />
<img src="img3.png" alt="" />
<img src="img4.png" alt="" />
<img src="img5.png" alt="" />
<img src="img6.png" alt="" />
<img src="img7.png" alt="" />
<img src="img8.png" alt="" />
<img src="img9.png" alt="" />
<img src="img10.png" alt="" />
<img src="img11.png" alt="" />
<img src="img12.png" alt="" />
<img src="img13.png" alt="" />
<img src="img14.png" alt="" />
<img src="img1.png" alt="" />
<img src="img2.png" alt="" />
<img src="img3.png" alt="" />
<img src="img4.png" alt="" />
</div>
</div>
And here is the CSS
* {margin: 0; padding: 0;}
body {
<!-- src: http://subtlepatterns.com/?p=1045 -->
background: url('dark_geometric.png');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 14450px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
u/keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -12000px;
}
}
u/-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -12000px;
}
}
u/-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -12000px;
}
}
u/-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -12000px;
}
}
u/-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -12000px;
}
}