Simple Marquee

  • 2 min read

A Simple SASS Marquee.

Build Status Latest Stable Version Code Quality License

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 (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 (from fx2 to fx5)

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>