In this scenario, I have a div containing multiple images lined up horizontally, with only the first image visible within the div. Currently, there are 5 images in total. The objective is to animate the images moving from right to left, eventually leaving the div and disappearing from the screen. Once all the images have completed their movement, the first image will come back into view (completing one full loop). To initiate this animation, you simply click a button.
The unique aspect of this animation is that at every odd numbered image, the motion pauses momentarily. For example, the sequence starts with image 1, moves on to image 2, then halts at image 3 for a few seconds before proceeding to image 4, pausing again at image 5, and finally returning to image 1 until the start button is pressed again.
What sets this setup apart is its scalability - it should be relatively easy to add more images to the sequence.
Here's what I currently have in terms of CSS / HTML:
<body>
<div id="container">
<div id="fotos">
<div class="image"><img src="afb_stuk/1.png"/></div>
<div class="image"><img src="afb_stuk/2.png"/></div>
<div class="image"><img src="afb_stuk/3.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div id="start">
<h2 class="text"></h2>
</div>
</body>
And here's the corresponding CSS code:
body{
padding:0px;
margin:0px;
background-image:url(afb_stuk/background.jpg);
background-repeat:no-repeat;
background-size:cover;}
#container{
position:relative;
margin-left:50px;
margin-top:25px;
height:600px;
width:1250px;
border:solid thin red;
z-index:1;
/*overflow:hidden;}}
#fotos{
position:relative;
height:80%;
width:12000px;}
.image{
height:600px;
width:1250px;
float: left;}
.image img{
height:600px;
width:auto;}
#start{
position:relative;
margin:auto;
margin-top:-10px;
height:10px;
width:60px;
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;}
.text{
margin-top:-10px;}