Simple CSS Marquee
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.
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 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>
Requirements
These requirements are are only needed for development:
- Ruby 2.4.0 or greater
- Bundler