Alternatives to <Marquee> and <Blink> tags

Prayag Verma | Monday, January 30, 2012 | 11 Comments

In the 90s the internet was full of websites which had scrolling and blinking text. By the 2000s these became obsolete due to some usability issues the major one being the time the user had to wait to read the whole text. In case you still want to use their functionality, then I suggest using CSS alternatives.


<Marquee> alternative

An auto-running 'Marquee' with 'hover' to stop the scroll, with links.

An auto-running 'Marquee' with 'hover' to stop the scroll, with links.

HTML

This is a simple keyframe named scroll which defines just two states at 100% and 0%. Its time is set to infinite so that it runs indefinitely. 



HTML

<div class="myMarquee">

<div class="scroller">

<div>
An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#">links</a>.</div>
<div>
An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#">links</a>.</div>

</div>
</div>

 CSS

.myMarquee {width:500px; height:80px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.7);-o-border-radius: 18px 18px;-moz-border-radius: 18px 18px;-webkit-border-radius: 18px 18px;border-radius: 18px 18px;background:#f8f8f8;background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));}

.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:10s;-moz-animation-name: scroll;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:10s;-webkit-animation-name: scroll;}

.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px; }

.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
 -moz-animation-play-state: paused;
 }

@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
 -webkit-animation-play-state: paused;
 }

This is a simple keyframe named scroll which defines just two states at 100% and 0%. Its time is set to infinite so that it runs indefinitely.

 

<Blink> alternative

 

 

HTML 

<div id="Blinker" >Blinking Text</div>

CSS

#Blinker {display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left; }

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
 -moz-animation-play-state: paused;
 }

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
 -webkit-animation-play-state: paused;

 }

This animation is based on a keyframe named blink , which has just 2 states with changing opacity property.