Simple Marquee

  • 3 min read

Simple CSS Marquee.

Build Status Latest Stable Version Code Quality License

Generates an animation effect that horizontally scrolls elements, like text or images. It tries to mimic what the obsolete <marquee> tag did, using only CSS.

Features

  • Scroll single or multiple elements
  • Reverse order
  • Change animation speed
  • Customizable using SCSS

Usage

Add the following stylesheet into your <head>:

<link rel="stylesheet" src="https://gistcdn.githack.com/AlfredoRamos/241ebc49763fd6d8d805878e29b9c804/raw/f09b2f37fd72e5a467751cd38c91ce37a3a29e10/marquee.min.css" integrity="sha384-ECRKWCMB2qBwzuBeswCnbFX/P6kUKtMxQXk9PkbsLPQGAtgAyIoH8LRchuTJws+c" crossorigin="anonymous">

If you want to customize it, you can modify and build the sources using the command line (see Requirements):

bundle update
bundle exec rake build:all

Preview

Single element

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="marquee">
	<p class="marquee-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Multiple elements

  • Cras volutpat ante a risus eleifend fringilla in maximus nulla.
  • Duis pretium, dolor vitae placerat scelerisque, sem magna posuere nisi, ac tempus lacus eros in ex.
  • Morbi luctus condimentum tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<div class="marquee">
	<ul class="marquee-content">
		<li>Cras volutpat ante a risus eleifend fringilla in maximus nulla.</li>
		<li>Duis pretium, dolor vitae placerat scelerisque, sem magna posuere nisi, ac tempus lacus eros in ex.</li>
		<li>Morbi luctus condimentum tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus.</li>
	</ul>
</div>

Reverse order

Vestibulum hendrerit dapibus placerat. Etiam bibendum mollis ipsum ac pellentesque.

<div class="marquee marquee-reverse">
	<p class="marquee-content">Vestibulum hendrerit dapibus placerat. Etiam bibendum mollis ipsum ac pellentesque.</p>
</div>

Marquee speed

Slow

Available slow speeds are from sx2 to sx5.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

<div class="marquee marquee-speed-sx2">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-sx3">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-sx4">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-sx5">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
Fast

Available fast speeds are from sx2 to sx5.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

<div class="marquee marquee-speed-fx2">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-fx3">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-fx4">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-fx5">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>

Requirements

These requirements are are only needed for development:

  • Ruby 2.4.0 or greater
  • Bundler

Support