Animasi image dengan Javascript

Untuk menambah menarik website kita sering melihat animasi-animasi pada posisi header. Animasi bisa dibuat dengan Flash atau dengan javascript. Kali ini team Proweb membuat animasi 2 buah image dengan memakai javascript.

Buat beberapa div dengan lokasi absolut yang sama
Pertama-tama buatlah 3 buah div dengan posisi absolut dengan tempat yang sama persis. Dalam div tersebut letakkan 3 buah image.

<!--
#hd1 {
position: absolute;
left: 0px;
top: 0px;
filter:alpha(opacity = 100);
opacity: 1.0;
z-index:3;
}
#hd2 {
position: absolute;
left: 0px;
top: 0px;
filter:alpha(opacity = 100);
opacity: 1.0;
z-index:2;
}
#hd3 {
position: absolute;
left: 0px;
top: 0px;
filter:alpha(opacity = 100);
opacity: 1.0;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="hd1"><img src="hd1.jpg" /></div>
<div id="hd2"><img src="hd2.jpg" /></div>
<div id="hd3"><img src="hd3.jpg" /></div>
Animasi
Untuk membuat animasi, kita membuatnya dengan membuat untuk mengubah-ubah opacitynya:

<input type="hidden" id="hd_now" value="1">
<input type="hidden" id="opv" value="1">
<input type="hidden" id="max_hd" value="3">

<script language="javascript">
function anim_hd()
{
var tunda=1;
var hd_now=document.getElementById('hd_now').value;
var op_lama=parseFloat(document.getElementById('opv').value);
var max_hd=document.getElementById('max_hd').value;
var op_baru;
if (op_lama==0)
{
var hd_before;
hd_before=hd_now;
var zindex=max_hd;
document.getElementById("hd" + hd_now).style.zIndex=zindex;
for (h=1;h<max_hd;h++)
{
if (hd_before>1)
{
hd_before--;
}
else
{
hd_before=max_hd;
}
zindex--;
document.getElementById("hd" + hd_before).style.zIndex=zindex;
}
}
op_baru= op_lama + 0.005;
var hdobj=document.getElementById("hd" + hd_now);
hdobj.style.opacity=op_baru;
var opacity_IE=op_baru * 100;
var iefilter="alpha(opacity = "+ opacity_IE+")";
hdobj.style.filter=iefilter ;
if (op_baru>=1)
{
if (hd_now<max_hd)
{
hd_now++;
}
else
{
hd_now=1;
}
op_baru=0;
tunda=5000;
}
else
{
hdobj.style.zIndex=max_hd;
}
document.getElementById('hd_now').value=hd_now;
document.getElementById('opv').value=op_baru;
//fungsi=;
//alert(fungsi);
setTimeout("anim_hd()",tunda);
}
anim_hd();
</script>

Script secara keseluruhan:

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animasi image dengan Js</title>
<style type="text/css">
<!--
#hd1 {
position: absolute;
left: 0px;
top: 0px;
filter:alpha(opacity = 100);
opacity: 1.0;
z-index:3;
}
#hd2 {
position: absolute;
left: 0px;
top: 0px;
filter:alpha(opacity = 100);
opacity: 1.0;
z-index:2;
}
#hd3 {
position: absolute;
left: 0px;
top: 0px;
filter:alpha(opacity = 100);
opacity: 1.0;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="hd1"><img src="hd1.jpg" /></div>
<div id="hd2"><img src="hd2.jpg" /></div>
<div id="hd3"><img src="hd3.jpg" /></div>
<input type="hidden" id="hd_now" value="1">
<input type="hidden" id="opv" value="1">
<input type="hidden" id="max_hd" value="3">

<script language="javascript">
function anim_hd()
{
var tunda=1;
var hd_now=document.getElementById('hd_now').value;
var op_lama=parseFloat(document.getElementById('opv').value);
var max_hd=document.getElementById('max_hd').value;
var op_baru;
if (op_lama==0)
{
var hd_before;
hd_before=hd_now;
var zindex=max_hd;
document.getElementById("hd" + hd_now).style.zIndex=zindex;
for (h=1;h<max_hd;h++)
{
if (hd_before>1)
{
hd_before--;
}
else
{
hd_before=max_hd;
}
zindex--;
document.getElementById("hd" + hd_before).style.zIndex=zindex;
}
}
op_baru= op_lama + 0.005;
var hdobj=document.getElementById("hd" + hd_now);
hdobj.style.opacity=op_baru;
var opacity_IE=op_baru * 100;
var iefilter="alpha(opacity = "+ opacity_IE+")";
hdobj.style.filter=iefilter ;
if (op_baru>=1)
{
if (hd_now<max_hd)
{
hd_now++;
}
else
{
hd_now=1;
}
op_baru=0;
tunda=5000;
}
else
{
hdobj.style.zIndex=max_hd;
}
document.getElementById('hd_now').value=hd_now;
document.getElementById('opv').value=op_baru;
//fungsi=;
//alert(fungsi);
setTimeout("anim_hd()",tunda);
}
anim_hd();
</script>
</body>
</html>

 

 



Atau bisa dilihat di http://www.prowebpro.com/pic/articles/animasi_js/
Share |

Portfolio

www.wearnespc.comwww.solper.comwww.autojaya.comwww.intisolar.comsmartprint.co.idwww.ottopharm.comoliser.co.idAnd More ....

Livechat

  • Sonny
    Marketing

  • Aris G
    Support

  • Agus
    Support

  • Kurnianto
    Support

  • Eko P
    Designer

  • Andreas
    Designer

  • LiveZilla Live Help

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Phone : 021 - 2636 3170
    021 - 3377 0050
     
Mobile : 0856 - 9360 1378
    0812 - 806 2772
    0857 - 1586 8992
    0816 - 180 8005
     
Blackberry PIN : 23096502
     
Fax : 021 - 633 5765
     
Web : www.proweb.co.id