Home | Javascript Tutorial | Efek Bubble di Halaman Web

Free Tutorial

Forum Discussion

Miscellanous

Members Area

Tree View

Newest Scripts

	SimpleChart
	by Administrator
	AJAX File Uploader
	by Administrator

Newest Templates

Newest User

	whiteforce
	on 17th of July 2010

	kuman
	on 11th of July 2010

	putri
	on 09th of July 2010

	acchunk
	on 20th of June 2010

	ISWAN
	on 17th of June 2010

Web Statistic

	Today	: 63
	This Month	: 1011
	Total	: 80188
	Total Hits	: 153537
	Member	: 357
	Post Tutorial	: 35
	Post Forum	: 56
	Free Script	: 2
	Free Templates	: 76

Javascript Tutorial
Efek Bubble di Halaman Web Share
by Administrator on 12 Feb 2009 - 23:40:00 lasted edit on 26 May 2009 - 12:33:06

Efek Bubble ini adalah merupakan sebuah file image yang berupa seperti gelembung air yg ditampilkan secara random dalam jumlah tertentu di halaman web, dan file image tersebut akan terus bergerak dari atas ke bawah terus-menerus dalam tempo waktu yg ditentukan..Kelihatan'a akan seperti gelembung-gelembung air yang berjatuhan...

Code :

<html>
<BODY>
<script language="JavaScript1.2"> var no = 50; // Banyaknya gelembung yang ingin ditampilkan, mis: 50 gelembung
var speed = 1; // kecepatan dari gerak gelembung, semakin kecil semakin cepat
var snow = new Array();
snow[0] = "bubble.gif" // file image yang dibutuhkan
snow[1] = "bubble.gif"
snow[2] = "bubble.gif" var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // koordinat and posisi variabel
var am, stx, sty; // amplitude and step variablel
var i, doc_width = 800, doc_height = 1800; if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
} dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0; for (i = 0; i < no; ++ i) {
dx[i] = 0; // set koordinate variabel
xp[i] = Math.random()*(doc_width-50); // set posisi variabel
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variabel
stx[i] = 0.02 + Math.random()/10; // set step variabel
sty[i] = 0.7 + Math.random(); // set step variabel
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src=""+ snow[j] + "" border="0"></layer>");
} else {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src=""+ snow[j] + "" border="0"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"><img src="" + snow[j] + "" border="0"></div>");
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"><img src="" + snow[j] + "" border="0"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
} function snowNS() { // Fungsi animasi untuk Netscape
for (i = 0; i < no; ++ i) { // iterasi untuk setiap dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
} function snowIE_NS6() { // Fungsi animasi untuk IE
for (i = 0; i < no; ++ i) { // iterasi untuk setiap dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+
pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
} if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// akhir -->
</script>
</body>
</html>

Download file images'a disini

Rating

Currently 2.19/10
1
2
3
4
5
6
7
8
9
10

0 Current Comments There're no current comments for this tutorial !

Restricted Area Sorry guys, you don't have permission to comment in this tutorial, please login first or you can register if you aren't our member yet.

Polling

Recent Post Forum

achmad.zaky on HTML Forum

halo pak,
saya mau tanya saya pada waktu saya pake command pint() , kenapa dicetak selalu dalam huruf yang kecil hanya 1/6 halaman . bagaimana agar cetakan bisa sesuai atau besar.

terima kasih

Post : Thursday 20th of May 2010 01:54:22 AM

tita89 on PHP Forum

aq member baru,,
mau tanya ni aq dpt tgs besar, buat sistem informasi yg dalemnya mau tak buat forum konsultasi (diskusi) kyk gini, tlg dung ksh source codenya,,, please..
yg lengkap... makasih ya,,

Post : Sunday 09th of May 2010 01:44:13 AM

Administrator on Lounge Forum

salam kenal juga mas Tedjo, ..
pengalaman saya, saya belajar web mulai dari HTML & CSS, terus lanjut ke Javascript & PHP, lanjut lagi PHP & Database, skrg ini saya sedang memperdalam ilmu Ajax & Jquery. Saya belajar web baru sekitar 2 tahun terakhir ini.
Untuk pembuatan website, biasanya berkisar 1-2 juta rupiah mas, tuh udah termasuk 1 domain & hosting yg standar.

tks

Post : Saturday 24th of April 2010 01:42:06 PM

tejomoeljono on Lounge Forum

Perkenalkan saya Tedjo dari surabaya, mohon saranya bagaimana cara belajar dari pemula sampai dengan expert seperti anda, saya harus belajar mulai dari mana,saya pemula di dunia cyber,..oh ya sama tanya kalau dibantu buatkan website berapa ya, terus prosesnya bagaimana.
Thanks sebelumnya

Post : Friday 23rd of April 2010 04:31:57 AM

Administrator on PHP Forum

yup bro, tuh harus dibuat dulu DFD nya, supaya nantinya mudah kita implementasi ke pemrograman dan database..tentukan dulu mana entitasnya, kemudian relasinya...

klo kira2 DFD sudah siap, tidak susah dibuat ke database..misal ntar didatbase kita buat satu tabel dengan nama KRS, yang fieldnya terdiri dari :
- id_matkul
- id_mhs
- semester

utk tabel MHS, terdiri dari field :
- id_mhs
- nama
- alamat
- tlp
- dll

utk tabel MATKUL, terdiri dari field :
- id_matkul
- nama
- sks

Nah, kira-kira seperti itu bro, tp itu hanya contoh aja, masih ada beberapa tabel lagi yg perlu kita buat, tabel dosen misalnya dll..

semoga bermanfaat

tks

Post : Monday 19th of April 2010 12:39:36 AM