Logo ticker in HTML / CSS

Question

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>

Note that although the link you have uses JS to update the `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. — cjl750, Sep 14 '17 at 16:24
@Paulie_D Hi Paulie, thank you for your response. I was not fully aware of these requirements. I've edited the post, hopefully this meets the requirements. — Daniel Blom, Sep 15 '17 at 09:44
@cjl750 Thanks. I figured that would be possible. Is there also a way to do this without duplicating the logo's in HTML? I'm trying to have as little HTML as possible. — Daniel Blom, Sep 15 '17 at 09:46
Off the top of my head, I would guess repeating at least a few would be necessary unless you were to use JS, but I'd have to experiment to find out. Don't really have time for it today, but I'd recommend you mess around with a few options and see how it goes. — cjl750, Sep 15 '17 at 20:00

Andrew Bone · Answer 1 · 2017-09-15T15:34:24.857

You should be able to just edit the variables at the top and make this fit your purpose. You'll need enough images to at least cover the space you want to fill and then a bit more (in order for the continuous affect to work).

.scrolling_banner {
  --banner-width: 300px;
  --banner-height: 200px;
  --banner-margin-bottom: 10px;
  --banner-margin-right: 5px;
  --banner-items: 6;
  --banner-duration: 2s;
}

.container {
  width: 100%;
  overflow: hidden;
}

.scrolling_banner {
  height: var(--banner-height);
  width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items));
  margin-bottom: calc(var(--banner-margin-bottom)/ 2);
  font-size: 0
}

.scrolling_banner * {
  margin-bottom: var(--banner-margin-bottom);
  margin-right: var(--banner-margin-right);
  height: var(--banner-height);
  width: var(--banner-width);
}

.first {
  -webkit-animation: bannermove var(--banner-duration) linear infinite;
  -moz-animation: bannermove var(--banner-duration) linear infinite;
  -ms-animation: bannermove var(--banner-duration) linear infinite;
  -o-animation: bannermove var(--banner-duration) linear infinite;
  animation: bannermove var(--banner-duration) linear infinite
}

@keyframes bannermove {
  0% {
    margin-left: 0
  }
  100% {
    margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1)
  }
}

<div class="container">
  <div class="scrolling_banner">
    <img class="first" src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
  </div>
</div>

Thanks a lot, seems to work great! However, if I were to user different images, it will refresh every time class "first" is out of screen. Any way to fix that? — Daniel Blom, Sep 18 '17 at 08:25

Logo ticker in HTML / CSS

1 Answers1