HTML Marquee Direction: Left, Right, Up and Down

The legacy <marquee> element uses the direction attribute to choose the movement direction. The historical values are left, right, up, and down. If direction is omitted, the usual default is left.

<marquee direction="left">Scrolling text</marquee>

Marquee Direction: Left Top ↑

direction="left" moves the content from right to left. This is also the normal default direction when the attribute is omitted.

<marquee direction="left">
This is an example of Marquee
</marquee>

Marquee Direction: Right Top ↑

direction="right" moves the content from left to right.

<marquee direction="right">
This is an example of Marquee
</marquee>

Marquee Direction: Up Top ↑

direction="up" moves the content vertically upward. A fixed height was commonly used on old pages to define the visible marquee area.

<marquee direction="up" height="80">
This is an example of Marquee direction = up
</marquee>

Marquee Direction: Down Top ↑

direction="down" moves the content vertically downward.

<marquee direction="down" height="80">
This is an example of Marquee direction = down
</marquee>

Modern CSS Alternative for Directional Movement Top ↑

For new projects, use semantic HTML and CSS animation. The movement direction comes from the start and end values used in transform: translateX() or translateY().

Left and right movement Top ↑

<div class="ticker">
  <p class="move-left">Moving from right to left</p>
</div>

<style>
.ticker { overflow: hidden; }
.move-left {
  white-space: nowrap;
  animation: moveLeft 8s linear infinite;
}
@keyframes moveLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
</style>

For movement in the opposite direction, swap the transform values:

@keyframes moveRight {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

Up and down movement Top ↑

Vertical movement uses translateY() in the same way:

@keyframes moveUp {
  from { transform: translateY(100%); }
  to { transform: translateY(-100%); }
}

@keyframes moveDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

Accessibility and Motion Top ↑

Automatically moving content can be distracting and may be difficult for some users to read. Important information should remain available even when animation is disabled, and essential controls should not depend on motion.

Respect the user's reduced-motion preference when animation is not essential:

@media (prefers-reduced-motion: reduce) {
  .move-left, .move-right, .move-up, .move-down {
    animation: none;
  }
}

Common Marquee Direction Mistakes Top ↑

Using marquee on a new website Top ↑

Keep <marquee> only for maintaining legacy pages. Use CSS animation when directional movement is truly needed.

Using obsolete presentation attributes Top ↑

Do not rely on bgcolor, old alignment attributes, or other presentational HTML. Use CSS.

Moving essential text continuously Top ↑

Users should not have to chase important information across the screen. Prefer static content or provide a way to pause motion when animation is necessary.

Confusing direction with speed Top ↑

direction changes where marquee content moves. Legacy scrollamount and scrolldelay affect movement speed instead.

Related Marquee Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: