Javascript efek salju

Ditulis oleh Claudio Matarrelli dalam kategori Solusi November 27, 2009 | 2 komentar

Pada tahun-tahun awal ketika saya mulai bekerja di web tidak banyak perangkat teknis yang mengesankan pengunjung.
DHTML efek adalah satu-satunya unsur untuk memperkaya halaman.

Dalam konteks ini, klasik yang digunakan oleh ribuan situs adalah salju di musim dingin.

Itu adalah beberapa script puluhan KB, efeknya tentu menyenangkan, tapi sering crash browser karena tumpang tindih terus lapisan, satu untuk setiap kepingan salju yang dihasilkan baru.

Masih browsing web saya hanya menemukan ini skrip lama, atau beberapa kebangkitan kuno selalu sangat berat.

Mengapa tidak menciptakan cahaya sesuatu yang tidak memperlambat loading halaman, tidak mengirimkan kejenuhan browser dan sumber daya mungkin untuk tidak mengganggu pembaca?

Itulah apa yang baru saya coba lakukan.

Script diuji pada versi terbaru dari browser populer (IE, Firefox, Chrome, Opera, dll) Tapi. aku tidak menjamin kompatibilitas dengan browser lama 3-4 tahun, dalam kasus ini tidak bekerja jika masalahnya bukan script namun kegagalan untuk memperbarui saatnya untuk melakukan ... :-)

Jika Anda ingin menggunakan script atau menulis dengan baik kepada mereka yang membutuhkannya. Sopan santun hanya untuk meninggalkan utuh bagian yang menunjukkan sumber.

Pilihannya adalah didokumentasikan dengan baik, hanya mengedit variabel di bagian atas script.

  • Jumlah serpih;
  • Kecepatan dengan mana mereka berada;
  • Maksimum ukuran serpih;
  • Ukuran minimum serpih;
  • Karakter umum serpih, atau alternatif gambar;
  • Warna serpih;
  • Opacity; 
  / * Script yang menghasilkan hujan salju pada halaman web 
      dibuat oleh Claudio Matarrelli 
      claudio.matarrelli @ gmail.com 
      (C) 2009 www.matarrelli.com 

      Digunakan secara bebas, asalkan Anda meninggalkan hak cipta terlihat 
  * /

 / / Konfigurasi variabel
 100 ; numerofiocchi var = 100;
 300 ; //millisecondi var waktu = 300 / / milidetik
 ; //px dimensionemassimafiocco = 40 / / px
 ; //px dimensioneminimafiocco = 8 / / px
 ; /*consigliati * o punto. caratterefiocco = "*", / * * direkomendasikan atau titik.  Atau bisa di-wax 
                                gambar dengan tag <a * src="http://indirizzo/immagine.jpg"> /
 ; colorefiocco = "# F00";
 ; transparansi = 0,5;
 / / Inisialisasi variabel
 0 ; var index = 0;

 / / Fungsi yang menghasilkan sebuah pokok, yang merupakan * dalam posisi div mutlak
 idfiocco ) { pokok fungsi (idfiocco) (
     '<div id="neve' + idfiocco + '" style="filter:alpha(opacity=' + trasparenza * 100 + ');-moz-opacity:' + trasparenza + ';-khtml-opacity:' + trasparenza + ';opacity: dokumen. menulis ('div id =' salju + 'idfiocco +' "style =" filter: alpha (opacity + transparansi '= * 100 +');- moz-opacity:' + transparansi + ',-khtml-opacity : '+ transparansi +', opacity:  

  trasparenza + ';color:' + colorefiocco + ';font-size:' + Math . floor ( Math . random ( ) * ( dimensionemassimafiocco - dimensioneminimafiocco + 1 ) + dimensioneminimafiocco ) + 'px; position:fixed; '+ Transparansi +'; warna: "+ colorefiocco + '; font-size:' + Math px. Lantai (Math. Acak () * (dimensionemassimafiocco - dimensioneminimafiocco + 1) + dimensioneminimafiocco + '); posisi: fixed;  

  Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px; left:' + Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px">' + caratterefiocco + '</div>' ) top: '+ Math tinggi. lantai (Math. acak (*) layar. * 0.7) +' px; kiri '+: Math px. lantai (Math. acak (*) layar. lebar - 40 +') "> ' + + '<caratterefiocco / div>')
 )

 / / Menghasilkan sejumlah serpih yang diatur ke numerofiocchi
 generaFiocchi fungsi () (
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { for (indeks = 0; <indeks numerofiocchi; indeks + +) (
         pokok (indeks)
     )
 )
 / / Pindahkan serpih secara acak setiap kali Anda melewatkan waktu yang ditetapkan
 spostaFiocchi fungsi () (
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { for (indeks = 0; <indeks numerofiocchi; indeks + +) (
     'neve' + indice ) . style . top = Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px' ; dokumen (. getElementById 'Salju' + index).. gaya atas = Math. lantai (Math. acak () * layar. tinggi * 0,7) 'px +';
     'neve' + indice ) . style . left = Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px' ; Dokumen indeks. GetElementById ('salju +'). Gaya. Kiri = Math. Lantai (Math. acak () * layar. Lebar - 40) 'px +';
     )


     , tempo ) ; setTimeout ("spostaFiocchi ()", waktu);

 )

 / / Mulai generasi serpih
 generaFiocchi ();

 / / Execute pergeseran lanjutan
 spostaFiocchi ();

Untuk menginstal, cukup meng-upload script pada server Anda dan mencakup bagian bawah halaman sebelum <di / body> 

  <script src="http://indirizzo/neve.js" language="JavaScript"> </ script>

2 Responses to "efek salju Javascript"

  1. Flavio mengatakan:
    Pada 27/11/2009 20:05

    Anda akhirnya mulai merencanakan?

  2. Claudio Matarrelli menulis:
    2009/11/27 di 20:07

    Sebenarnya saya melakukannya selama bertahun-tahun ketika saya memiliki rangsangan yang tepat .. Seperti sore di rumah dengan demam :-)

Tinggalkan komentar