scrolling text

  1. Approach 1. HTML <marquee> tag
  2. Approach 2. CSS animation
  3. Refs

Approach 1. HTML <marquee> tag

Event though it is deprecated, HTML <marquee> tag is still the easiest way to add scrolling text in your page, and it is supported by most browsers.

1
2
3
4
5
6
7
8
9
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>

Demo:

Pros:

  1. the best browser compatibility

Cons:

  1. This tag has already been deprecated.

Approach 2. CSS animation

An alternative way is using CSS animation. We are able to implement a simple marquee effect without any JavaScript codes, the following demo works on modern browsers.

The most important part is @keyframes rules:

1
2
3
4
5
6
7
8
@keyframes scrollingtext {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

Demo:

Pros:

  1. standard-compatible

Cons:

  1. Works on mordern browsers only
  2. The text does not appear immediately after disappeared.

Refs

  1. <marquee>: The Marquee element
  2. CSS Marquees