Does anyone know how to code this in just HTML and CSS?
http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/
I'm looking to add the gradient to both sides and I prefer doing it without JS.
I've come up with something on codepen but I have a couple of issues:
- The ticker is refreshed when
$duration
ends. I want it too loop infinitely. - I can't think of a way to add the gradient to both sides.
(I'm a designer, I have little knowledge of code)
CSS
$duration: 30s;
@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
width: 100%;
overflow: hidden;
height: 100px;
background-color: rgba(#fff, 0.0);
padding-left: 100%;
}
}
.ticker {
display: inline-block;
height: 100px;
line-height: 5rem;
white-space: nowrap;
padding-right: 80%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: $duration;
animation-duration: $duration;
&__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}
}
body { padding-bottom: 5rem; }
h1,h2,p {padding: 0 5%;}
HTML
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
left
position of the logo wrapper instead of doing a CSS transform animation, in principle it works just like your codepen example does: it goes for a while then resets. They put each logo in the HTML a few times, in a repeating pattern, slide the whole container left, and then reset it back to to the beginning at just the right time so it looks like it never stops. If you experiment with the length of your animation and the width of the container, you can achieve the same effect. You're closer than you think.