Search code examples
htmlcssgradientticker

How to add a gradient on both sides of ticker?

I'm looking to create a scrolling ticker like this: http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/

Now I want to add the gradient on both sides of the ticker, but I can only think of way to add a linear gradient across the whole width. Preferably I'd like to avoid using JS and limit it to CSS/HTML.

(I'm a designer, so my coding knowledge is limited)

.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="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
  </div>
</div>

Solution

  • Yes you have to use pseudo selector on your parent element which .container over-here, using pseudo selector :before and :after you could add new gradient at both ends of .container, then using rgba color value you can add bit transparency thus background sliding images get visible. 

    .container {
  position: relative;
}

.container:before {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
}

.container:after {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
}


    .container {
  position: relative;
}

.container:before {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
}

.container:after {
  content: "";
  width: 80px;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 25, 0.9));
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
}

.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="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
    <img src="https://bniajfi.org/wp-content/uploads/2014/03/blog-placeholder-150x100.png">
  </div>
</div>