Alternatives to Marquee and Blink tags

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
<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


Blinking Text





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.


Even though these alternatives are currently supported in Webkit and Mozilla browsers only but this will change in the future. As the time goes by CSS animations will gain momentum and will have wide cross browsers support.

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Anonymous said...

Cool ^_^

but it takes a some much of coding part dear...

suex said...

yes this good...
i want make in my Blog..
visited : www.etwoonews.com yeah !!

Aakash said...

Nice stuff bro!!I think my next post gonna be on marquee's... lol !!

That's very cool master..

nice share:)

Having the HTML code is easier than coding with CSS though.

Sam said...

What are webkit browers?

Chrome and Safari

shafeeq ts said...

thanks for write helpful article.

Unknown said...

HOW WE WANt change for more matter i mean if type along aline it is coming down i want in same line wt i want to do for that

Unknown said...

Hey I have a question. My blog template is blinking! How do I stop this from happening?