Membuat Efek Blink Text Dengan Javascript
hallo teman-teman bertemu lagi di panduan Source Code Aplikasi, di panduan kali ini kita akan coba mempraktekan bagaimana cara merancang efek blink text dengan javascript.
bagi teman-teman yang telah kenal dengan html 4 pasti telah mengenal tag yang berfungsi bagi merancang suatu text berkedip-kedip(Blink), yakni tag yang berfungsi bagi itu, namun di kali ini kita akan coba membuatnya dengan manfaat javascript.
oke bagi lebih jelasnya kita seketika saja praktekan, teman-teman silahkan bikin sebuah file dan ketikan script html seperti berikut :
<html>
<head>
<title>Blink</title>
</head>
<body>
<div id=area-text>
<div id=blink-text>
Blink Text
</div>
</div>
</body>
</html>
saya merancang 2 div dimana div pertama-tama selaku areanya dan div didalamnya dalah text yang akan kita bikin berkedip tau blink,
nah setelah itu silahkan tambahkan script css seperti berikut:
<style type=text/css>
div#area-text
{width:100px; padding: 8px; color:#fff;
text-align:center;background-Color:#AA9D9D;
}
</style>
di bagian css saya mengatur bagi area blink textnya berwana abu-abu dan text didalamnya berwarna putih, jikalau telah teman teman dapat save.
Nah sekarang ini tinggal kita tambahkan manfaat javascriptnya silahkan teman-teman ketikan script berikut :
<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('blink-text');
ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);
</script>
letakan script di atas di antara tag head, lalu coba save dan jalankan di browser dan lihat hasilnya,
gimana? gampang bukan, lumayan demikian dulu panduan kali ini, semoga bermanfaat, terimakasih.
Sumber https://kursuswebsite.org
