30 Jan 2012
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.

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.

Til next time,
Prayag Verma at 17:40

scribble

30 Jan 2012 Alternatives to Marquee and Blink tags

30 Jan 2012
Alternatives to Marquee and Blink tags