Advertisement

A news ticker is a bar containing the most recent updates or news. The content on this bar quickens to one side or right heading relying upon the content language. Fundamentally, a news ticker can be level or vertical concerning design. In this instructional exercise, you will come to realize how to make a level news ticker with unadulterated CSS.

Advertisement

Despite the fact that there are numerous jQuery/JavaScript modules to make a news ticker. However, trust me, a broadly useful news ticker can be made utilizing CSS livelinesss as it were. Yes! you heard right, you can peruse the demo page to check this news ticker.

You simply need to make a full-width fixed bar and quicken its content with CSS. Thus, without going into profundity, how about we begin with news ticker coding.

Advertisement
Advertisement

Box Card Html Code

<div class="ticker-wrap">
<div class="ticker">
  <div class="ticker__item">Place your news text here.</div>
  <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
  <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
  <div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck. </div>
  <div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>
  <div class="ticker__item">Letterpress chambray brunch.</div>
  <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
  <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
  <div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck. </div>
  <div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>
</div>
</div>
Advertisement

Box Card CSS Code

.ticker-wrap {
  position: fixed;
  bottom: 0;
    left: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: #e41b17;
  box-sizing: content-box;
}

.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -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: 30s;
  animation-duration: 30s;
}

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: white;
}

@-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);
  }
}

Box Card Java Script Code

Advertisement
car game code

Game Source Code Download

Advertisement