Web Development Blog Shannenpio

var $ul = $('#blog-roll'), roll = function() { $ul.find('li').first().slideUp('slow', function() { $(this).appendTo($(this).parent()).fadeIn(); }); }, anim = setInterval(roll, 3000); // Pause on hover... $ul.hover(function() { clearInterval(anim); }, function() { setInterval(roll, 3000); }); Demo

Sebenarnya JavaScript ini tidak digunakan untuk menciptakan efek daun berguguran, melainkan untuk menciptakan efek salju. Versi asli dari script ini bisa kamu pelajari di sini . Saya hanya mengganti gambar saljunya dengan gambar daun: Lihat Demo Tambahkan sebuah elemen halaman HTML/JavaScript kemudian salin kode ini dan letakkan di dalam formulirnya: <script type="text/javascript"> var snowsrc = "http://2.bp.blogspot.com/-6yjsKoliL_Q/TwlTuQtV3WI/AAAAAAAAB6k/VyKxfGKFBpM/s1600/daun-kecil.png"; // Tentukan URL gambar daun/salju var no = 10; // Tentukan jumlah daun/salju var hidesnowtime = 0 ; // Menentukan apakah daun/salju harus menghilang setelah x detik (0 = tidak pernah) var snowdistance = "pageheight"; // Menentukan berapa banyak daun/salju yang harus jatuh sebelum akhirnya menghilang ("windowheight" atau "pageheight") </script> <script type="text/javascript" src="http://hompimpa.goog...

Kali ini Saya akan memberikan satu lagi tip sederhana, dan masih menggunakan potongan kode yang sama seperti saat Anda menciptakan efek animasi loading dengan JQuery . Pada intinya di sini Saya akan menganimasikan nilai top untuk menciptakan efek kotak pesan yang muncul dari atas perlahan-lahan. Saya menggunakan dua bahan utama, yaitu potongan kode ini dan sedikit pemanfaatan efek .animate() (pelajari di sini ) untuk menciptakan efek animasi kotak pesan mucul dari atas menuju ke bawah: Lihat Demo HTML Pertama-tama kita bangun kerangka kotak pesan seperti ini. Sangat sederhana, hanya terdiri dari sebuah area dan sebuah tautan yang akan kita jadikan sebagai tombol penutup kotak pesan: <div id='kotak-pesan'> <!-- KONTEN DI SINI --> <a class='close' href='#'>&times;</a> </div> CSS Setelah itu berikan beberapa sentuhan, terutama mengenai posisi, karena di sini kita akan membuat kotak pesan melayang, jadi aturlah posisinya ...

Tambahkan sebuah elemen halaman HTML/JavaScript , kemudian letakkan script ini di dalamnya: <script type="text/javascript"> var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung var bubbles=100; // jumlah maksmal gelembung var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid...

Pertama-tama masuklah ke halaman tata letak elemen halaman , kemudian tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode ini, kemudian letakkan di dalam formulirnya: <style type="text/css"> #highlight{font:bold 50px Impact,Arial,Sans-Serif;} </style> <script language="javascript" type="text/javascript"> var teks=" EFEK PELANGI " // teks Anda di sini var speed= 20 // atur kecepatan perubahan warna if (document.all||document.getElementById) { document.write('<span id="highlight">' + teks + '</span>') var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight } else document.write(text) var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0") var r=1 var g=...

Untuk membuat efek salju, pertama-tama masuklah ke tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript . Salin script ini, kemudian letakkan di dalam formulirnya: <script src="http://hompimpa.googlecode.com/files/efeksalju.js" type="text/javascript"></script> Klik Simpan . Maka kamu akan mendapatkan efek salju persis seperti di halaman ini: Lihat Demo Sumber: hatetepe://wewewe.btinternet.com