जावास्क्रिप्ट बर्फ प्रभाव

प्रारंभिक वर्षों में जब मैं वेब पर काम करना शुरू किया जो कई तकनीकी उपकरणों के साथ दर्शकों को प्रभावित करने के लिए नहीं थे.
DHTML प्रभाव के ही तत्व थे पृष्ठों को समृद्ध.

इस संदर्भ में, एक क्लासिक साइटों के हजारों के द्वारा प्रयोग किया सर्दियों के महीनों में बर्फ था.

यह KB के कई दसियों की स्क्रिप्ट थी, प्रभाव निश्चित रूप से सुखद, लेकिन अक्सर परतों की एक सतत अतिव्यापी ब्राउज़र की वजह से दुर्घटना, हर एक नया उत्पन्न हिमपात का एक खंड के लिए.

अभी भी वेब मैं बस इन पुराने लिपियों, या कुछ पुराने ढंग का पुनरुद्धार हमेशा बहुत भारी पाया ब्राउज़िंग.

कुछ प्रकाश कि नीचे पृष्ठ लोड जो ब्राउज़र के संसाधनों saturating नहीं भेजा है और आप पाठक परेशान नहीं कर सकते हैं के रूप में धीमा नहीं करता है क्यों नहीं बना?

यही तो मैं सिर्फ क्या करना है की कोशिश की.

स्क्रिप्ट लोकप्रिय ब्राउज़रों (आईई, फ़ायरफ़ॉक्स, क्रोम, ओपेरा, आदि के नए संस्करण पर परीक्षण किया है). लेकिन मैं पिछड़े 3-4 साल पुराने मामले में अगर यह समस्या स्क्रिप्ट नहीं है काम नहीं करता है कि ब्राउज़रों, के साथ संगतता की गारंटी नहीं लेकिन समय यह अद्यतन करने के लिए विफलता ... :-)

यदि आप स्क्रिप्ट का उपयोग करें या जो लोग इसकी आवश्यकता को अच्छी तरह से लिखना चाहता हूँ. केवल शिष्टाचार अक्षुण्ण भाग कि स्रोत संकेत करता है छोड़ने के लिए.

विकल्प अच्छी तरह से, प्रलेखित रहे हैं सिर्फ स्क्रिप्ट के शीर्ष पर चर संपादित करें.

  • गुच्छे की संख्या;
  • स्पीड वे जो चाल के साथ;
  • गुच्छे का अधिकतम आकार;
  • गुच्छे का न्यूनतम आकार;
  • आम तौर पर चरित्र के गुच्छे, या वैकल्पिक रूप से छवि;
  • रंग के गुच्छे;
  • अस्पष्टता;
  / * स्क्रिप्ट उस पृष्ठ को वेब पर उत्पन्न एक बर्फबारी 
      Matarrelli Claudio द्वारा बनाया 
      claudio.matarrelli @ gmail.com 
      C) 2009 www.matarrelli.com ( 

      आज़ादी से प्रयोग किया जाता प्रदान की, तो आप कॉपीराइट छोड़ दिखाई 
  * /

 / / विन्यास चर
 100 ; numerofiocchi var = 100;
 300 ; //millisecondi समय var = 300 / milliseconds
 ; //px = Dimensionemassimafiocco 40 / px /
 ; //px = Dimensioneminimafiocco / 8 px /
 ; /*consigliati * o punto. Caratterefiocco * = "" / * * या सिफारिश बिंदु.  या waxed हो सकता है 
                                * Src="http://indirizzo/immagine.jpg"> <img छवि टैग के साथ एक /
 ; Colorefiocco = "# F00";
 ; 0.5 = पारदर्शिता;
 / / इनिशियलाइज़ चर
 0 ; var सूचकांक = 0;

 / समारोह / कि प्रधान उत्पन्न एक, कि div बिल्कुल तैनात एक एक * में
 idfiocco ) { प्रधान (समारोह idfiocco) (
     '<div id="neve' + idfiocco + '" style="filter:alpha(opacity=' + trasparenza * 100 + ');-moz-opacity:' + trasparenza + ';-khtml-opacity:' + trasparenza + ';opacity: दस्तावेज़. div लिखने ('<पारदर्शिता बर्फ id =' + + idfiocco '"शैली =" फिल्टर: अल्फा (= अस्पष्टता' + * 100 +');- moz-अस्पष्टता + 'पारदर्शिता' +,-KHTML-अस्पष्टता : 'पारदर्शिता +,' अपारदर्शिता +:  

  trasparenza + ';color:' + colorefiocco + ';font-size:' + Math . floor ( Math . random ( ) * ( dimensionemassimafiocco - dimensioneminimafiocco + 1 ) + dimensioneminimafiocco ) + 'px; position:fixed; 'पारदर्शिता + +';: रंग + 'colorefiocco +', font-size: '+ मठ' px. तल (Math. यादृच्छिक () * (dimensionemassimafiocco dimensioneminimafiocco - + 1) +) dimensioneminimafiocco +; स्थिति: निर्धारित;  

  Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px; left:' + Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px">' + caratterefiocco + '</div>' ) : शीर्ष + 'गणित. मंजिल (Math. स्क्रीन यादृच्छिक () * ऊंचाई. * 0.7) +' px; छोड़ दिया: '+ मठ मंज़िल. (Math. स्क्रीन यादृच्छिक () * 40. Border -) +' px '>' caratterefiocco + + '</ div>')
 )

 / / करने के लिए सेट बराबर numerofiocchi उत्पन्न एक गुच्छे की संख्या
 generaFiocchi समारोह () (
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { (सूचकांक के लिए = 0; सूचकांक <numerofiocchi; सूचकांक + +) (
         प्रधान (इंडेक्स)
     )
 )
 / सेट / समय हटो गुच्छे अनियमित पास हर तुम समय
 spostaFiocchi समारोह () (
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { (सूचकांक के लिए = 0; सूचकांक <numerofiocchi; सूचकांक + +) (
     'neve' + indice ) . style . top = Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px' ; . GetElementById ('बर्फ +' सूचकांक). शैली. शीर्ष = गणित. मंजिल (Math. यादृच्छिक. () * स्क्रीन * ऊंचाई 0.7) + px 'दस्तावेज़';
     'neve' + indice ) . style . left = Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px' ; दस्तावेज़. getElementById ('+ बर्फ सूचकांक). शैली. मठ छोड़ दिया;. मंजिल (Math. स्क्रीन यादृच्छिक () * 40. border -) +' px ';
     )


     , tempo ) ; spostaFiocchi setTimeout ("()", समय);

 )

 / / गुच्छे पीढ़ी का प्रारंभ
 generaFiocchi ();

 / / Execute पारी जारी
 spostaFiocchi (); 

स्थापित करने के लिए, बस अपने सर्वर पर अपलोड करें और लिपि / body> <पहले पृष्ठ के निचले भाग में शामिल

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

"जावास्क्रिप्ट बर्फ प्रभाव के लिए 2 जवाब"

  1. Flavio कहते हैं:

    तुम अंततः की योजना बना शुरू कर दिया है?

  2. Claudio Matarrelli लिखते हैं:

    वास्तव में मैं वर्षों के लिए जब मैं सही stimuli हैं .. एक बुखार के साथ घर पर एक दोपहर की तरह :-)

एक टिप्पणी छोड़ दो