Coding a scrolling news ticker with pure CSS and no custom markup

A WordPress.com customer requested a scrolling news ticker for their Owari theme. The author initially thought custom markup and JavaScript were necessary, but realized the solution required “nothing more than a dab of custom CSS.”

Recent Posts Widget

The foundation uses WordPress’s built-in Recent Posts widget. Set the widget title to desired heading text and configure the number of latest news items to display.

Absolute Positioning to the Rescue

CSS transforms the widget using absolute positioning to break it from its widget area. The code resets styles for horizontal alignment and prepares the foundation for animation.

Animate It

CSS keyframe animations create the scrolling effect.

Stop Scrolling on Hover

A CSS rule pauses animation on hover, allowing visitors to interact with moving content without difficulty.

Other Themes

The technique works on most themes but fails on those lacking widget areas or using heavy position: relative styling.

Conclusion

The technique is similar to deprecated <marquee> tags but CSS keyframes provide better control.