Scrolling Text Banner

News Ticker

Scroll Text With Code

This can be done a number of ways. This example uses some HTML and some CSS. You can put all this in an HTML module and it will work. The downside of doing it that way is that it is easy to mess up the html when you are simply trying to change the announcement text. See the code here and scroll down to see a nicer way to do it.

HTML

<div id="scroll-container">
  <div id="scroll-text">This is scrolling text.<div>
</div>

CSS

#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
 

The Nicer Way

We configured a simple Action Form to allow you to change the announcement without risk of editing the HTML or CSS. If you have the Action Form module on your site, you can import this design into your module and use it too.

Form Template