I’m trying to make a logo portfolio carousel that scrolls horizontally in an infinite way.
I almost have it done, but it will break the animation and not be seamless. I need it to be really an infinite animation with no breaks.
https://jsfiddle.net/nha3grjL/#&togetherjs=sy1LFN4qOJ
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
background-color: $boxify-bg-light-dark;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow: hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: flex;
justify-content: space-between;
width: 250%;
}
span {
display: inline-block;
margin: 0;
padding: 0;
color: white;
}
@keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}<div class="scroll">
<div class="m-scroll">
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
</div>
</div>>Solution :
I don’t quite understand the width 250vw setting. Try replacing it with width: fit-content. Then the -50% translate will translate the images to the right plaee.
[I assume that if you are showing different images you know to put a complete copy of them all into the HTML so the -50% works].
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
background-color: $boxify-bg-light-dark;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow: hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: flex;
justify-content: space-between;
width: fit-content;
}
span {
display: inline-block;
margin: 0;
padding: 0;
color: white;
}
@keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}<div class="scroll">
<div class="m-scroll">
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" ></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" ></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
</div>
</div>