blinking tag
Tahukah anda bahwa blink adalah element html (html tag) non-standard yang biasa dipakai untuk mempresentasikan text berkedip pada web browser (efek alternate antara visible dan invisible). Element blink ini awalnya (1990-an) diperkenalkan pada Netscape Navigator lalu beberapa web browser men-support-nya, namun kemudian dihilangkan dari Internet Explorer. Saat ini (2013) hanya browser Opera saja yang mensupport-nya.
Nah, buat Anda yang masih membutuhkan efek blinking text maupun background, bisa menggunakan JavaScript dan CSS pada contoh coding berikut ini.
<html>
<head>
<title>Blinking</title>
<html>
<head>
<script type="text/javascript">
var x=1;
function blink(id) {
document.getElementById(id).style.width="300px";
if(x==1){
document.getElementById(id).style.backgroundColor = "red";
x=2;
} else {
document.getElementById(id).style.backgroundColor = "";
x=1;
}
}
window.onload=function(){
setInterval("blink('alert')", 500);}
var blink_speed = 500; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
var ele = document.getElementById('blinkingtext');
ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);
</script>
<style type="text/css">
div#blinkingtextarea
{ width:200px; padding: 8px;
text-align:center;background-Color:#ff0000;
}
</style>
</head>
<body>
<div id="blinkingtextarea">
<div id="blinkingtext">Blinking Text</div>
</div>
<div id="alert">Blinking Background</div>
</body>
</html>
Selamat mencoba.
Update (April 2016)
Saya teringat 2 prinsip:
- Dahulukan menggunakan CSS daripada JavasScript
- Coding KISS – keep it simple and short for coding
Maka dengan googlng saya dapatkan cara membuat blinking text dengan 2 cara :
Cara pertama pakai CSS3:
<!doctype html>
<html>
<head>
<title>Blinking CSS3</title>
<html>
<head>
<style>
.blinktext{
animation:blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity:0.0; }
}
</style>
</head>
<body>
<div class="blinktext"> Blinking Text dengan CSS </div>
</body>
</html>
Cara kedua pakai Simple JavaScript dengan JQuery
<!doctype html>
<html>
<head>
<title>Blinking CSS3</title>
<html>
<head>
</head>
<body>
<div class="blinktext2"> Blinking Text dengan JS</div>
</body>
<script src="jquery-2.1.3.min.js"></script>
<script>
$(function blink() {
$('.blink_me').fadeOut(500).fadeIn(500, blink);
});
</script>
</html>
Selamat mencoba.