Membuat animasi sederhana dengan javascript

Membuat animasi sederhana dengan javascript
Di Posting Oleh : Wandi febriandi
Kategori : Pelajaran Pemprograman web

Selamat datang datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan ? mudah mudahan sehat , amin . Di artikel sebelumnya saya telah berbagi mengenai pengertian closed source . Di artikel sebelumnya juga saya telah berbagi mengenai perbedaan bahasa pemprograman dan bahasa script , apa itu bahasa script ? pertanyaan itu di jawab disini .

Oke lanjut sekarang saya akan berbagi mengenai cara membuat animasi sederhana dengan javascript . Jadi membuat animasinya saya hanya menggunakan javascript saja tanpa adanya bantuan dengan jQuery .Oke gimana cara membuat animasinya lanjut saja . Pertama tama kita buat dulu HTMLnya

<div id="kotak"style="
width: 40%;
height: 300px;
background-color:#00ff93;">selamat datang</div>

kenapa ada width dan height karena kita membuat animasinya dengan memanipulasi width dan heinghtnya . Oke lanjut aja langsung ke javascriptnya

var lebar=40;
var lebar2=300;
function animasi(){
var z=setTimeout(function(){animasi();},10);
if(lebar==100){
clearTimeout(z);
}
lebar=lebar+1;
lebar2=lebar2+1;
var gambaranimasi=document.getElementById('kotak').style.width=lebar+"%";
var gambaranimasi2=document.getElementById('kotak').style.height=lebar2+"px";
}
animasi();

Oke jadi di javascriptnnya ada yang namanya fungsi setTimeout jadi disana gunakan akan melakukan fungsi animasi() lelama 10 milisecord , jika lebarnya udah 100 makan akan mengclearTimeout gunanya agar menghentikan fungsi seTimeout .

untuk mengubah lebar dan tinggi dengan style.width dan style.height jadi artinya akan menambahkan artibut style dan property width juga property height .

kalo kita menggunakan jQuery , cukup

<script src="jquery.js"></script>
<script>
$(function(){
$('#kotak').animate({width:"100%",height:"500px"},3000);
});
</script>
<div id="kotak"style="
width: 40%;
height: 300px;
background-color:#00ff93;">selamat datang</div>

maka akan melakukan hal yang sama , hanya saja scriptnya lebih sedikit .

Oke itu dia gimana caranya membuat animasi sederhana tanpa bantuan jQuery . Terimakasih telah berkenan membaca artikel ini  .Semoga bermanfaat dan juga menambah wawasan sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .


Silahkan kunjungi blog terbaru saya disini