CODEWITHSUNDEEP
htmlcssfrontend
Will
Will

Reputation: 91

How can I generate marquee using CSS3 in HTML5

My HTML code is 

  <div class="container1">
   <div id="container-table"></div>
   <div id="container-tablec"></div>
   <div id="container-tableq"></div>
   <div id="container-table"></div>
   <div id="container-table"></div>
  </div>

Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.

I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.

I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.

Can anyone suggest me how I can achieve this using CSS3.

Any help would be appreciated. Thanks in advance.

Upvotes: 1

Views: 2163

Answers (1)

Padma Rubhan
Padma Rubhan

Reputation: 293

This will help you

/* Sets up our marquee, and inner content */
.marquee {
  overflow: hidden;
  position: relative;
  padding-left: 100%;
  /* Some browsers may require -webkit-animation */
  animation: reduce 20s linear infinite;
}

.marquee__inner {
  white-space: nowrap;
  display: inline-block;
  /* Some browsers may require -webkit-animation */
  animation: scroll 20s linear infinite;
}


/* Creates two white-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 50px;
  height: 100%;
  content: "";
  display: block;
}

.marquee::after {
  left: auto;
  right: 0;
  transform: rotate(180deg);
}

@keyframes reduce {
  to {
    padding-left: 0;
  }
}

@keyframes scroll {
  to {
    transform: translateX( -100%);
  }
}
<div class="marquee">
  <span class="marquee__inner">some text .</span>
</div>

Fiddle Example

Upvotes: 1

Related Questions