Simple CSS Marquee • Alfredo Ramos

Simple CSS Marquee.

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.

<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 fx2 to fx5.