this content was originally posted here.

recreate marquee element using css

as the marquee element has been removed from html5 (which is probably a good thing) its now unsupported, but you can use css and keyframes to recreate it. Yay..

CSS Marquee Demo

Some Marquee Text

You can change the speed by modifying this line:

animation: marquee 5s linear infinite;

the lower the s the faster it goes

code

<div class='marquee'>
	<p>Some Marquee Text</p>
</div>

<style>
.marquee {
    width: 100%;
	line-height: 40px;
	background-color: #444;
	color: #FFF;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
</style>

You can go the other way as well... if you like

Just remove the - from the translate and change the padding to right rather than left

Some Marquee Text

Code Right

<div class='marquee-right'>
	<p>Some Marquee Text</p>
</div>

<style>
.marquee-right {
    width: 100%;
	line-height: 40px;
	background-color: #444;
	color: #FFF;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee-right p {
    display: inline-block;
    padding-right: 100%;
    animation: marqueeright 5s linear infinite;
}
@keyframes marqueeright {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(100%, 0); }
}
</style>

We can add a pause to the animation when the mouse is over it by adding the following

.marquee:hover p {
	animation-play-state: paused;
}
.marquee-right:hover p {
	animation-play-state: paused;
}

Demo

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:2WMkN
$p4:recreate-marquee-element-using-css
$p5:
$p6:
$p:/view/code/2WMkN/recreate-marquee-element-using-css/
Using Template: view-code.html