Fulgi de zapada
Deci, vrei fulgi de zapada JavaScript pe site-ul dvs.?, ok !
Furtuna de zapada este un efect de zapadă JavaScript care poate fi uşor de adăugat in pagini web. Acesta este gratuit şi uşor de configurat. Un singur fişier JavaScript oferă funcţionalitatea necesară. Imaginile nu sunt utilizate pentru efectul de zăpadă.
Aş vrea să folosesc acest lucru pe site-ul meu.
Acest lucru este tot ce ai nevoie pentru a începe:
<script src="snowstorm.js"></script>
Ce fel de lucruri pot personaliza?
Puteţi regla viteza de zăpadă, cantitatea de zapada, “vântul”, dacă şi unde ar trebui să se lipeasca (şi în cazul în care ar trebui să se”topescâ”), şi în sfârşit, dacă zăpada poate reacţiona la mouse-ul în mişcare (de ex, “schimbarea vântului “). să vedem cum se Personalizează mai multă zapadă .
Download
File Rar include codul sursă
Note tehnice
Viscolul de zăpadă lucrează sub cele mai multe browsere vechi majore (IE 5.x +, Netscape 6 +), precum şi ca IE 6, 7, 8, Firefox, Safari si Opera, si iPhone. Dacă vedeţi zapadă in acest articol, atunci script-ul functionează cum era de aşteptat.
IE | Firefox | Chrome | Safari | Flock | Netscape | Maxthon | Opera |
Personalizează
Odată ce fulgi de zăpadă rulează în pagina dvs., aveţi posibilitatea să particularizaţi proprietăţile sale, fie prin editarea snowstorm.js fişierul direct, sau atribuirea de valori noi pentru obiectul viscol de zăpadă ca in exemplul de mai jos.
Exemplu:
<!-- required snowstorm JS, default behaviour --> <script src="snowstorm.js"></script> <!-- now, we'll customize the snowStorm object --> <script> snowStorm.snowColor = '#99ccff'; // blue-ish snow!? snowStorm.flakesMaxActive = 96; // show more snow on screen at once snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view </script>
Configurati Proprietăţi
Viscolul de zapada poate fi destul de uşor personalizat, unele proprietăţi importante sunt enumerate mai jos.
snowStorm.animationInterval = 33;
- Teoretică “milisecunde per frame” de măsurare. 20 = rapid + buna, dar de mare utilizare CPU. 50 = mai conservatoare, dar mai lent
snowStorm.flakeBottom = null;
- Limite “podea” (pixeli) de zăpadă. Dacă este nespecificat, zapada se va “lipi” in partea de jos a ferestrei browser-ului şi persistă prin intermediul browser-ului redimensionaduse .
snowStorm.flakesMax = 128;
- Stabileşte numărul maxim de fulgi de zăpadă care poate exista pe ecran la un moment dat.
snowStorm.flakesMaxActive = 64;
- Setează limita de Fulgi de nea”cadere” (adică deplasarea pe ecran, prin urmare, considerate a fi active.)
snowStorm.followMouse = true;
- Permite sa mutati vântul in miscări dinamice in raport cu X mouse-ului(stânga/dreapta).
snowStorm.freezeOnBlur = true;
- Opreşte efectul zăpadă atunci când fereastra browser-ul iese din focus, de exemplu., Utilizatorul este într-o altă filă.
snowStorm.snowColor = '#fff';
- Culoarea fulgilor de zăpadă
snowStorm.snowCharacter = '•';
- • (•) = bullet. · entity (·) Nu vine utilizat ca pătrat pe unele sisteme etc .Modificarea acestui lucru poate duce la decuparea caracterului si pot necesita flakeWidth / flakeHeight modificari, astfel încât sa fiti atenti.
snowStorm.snowStick = true;
- Permite zăpezii să se aseze in partea de jos a ferestrei. Atunci când este oprit, zăpada nu va aseza în partea de jos.
snowStorm.targetElement = null;
- Elementul zăpada care va fi atasata la(default: document body) – poate fi un element ID. ‘myDiv’, or a DOM node reference.
snowStorm.useMeltEffect = true;
- When recycling fallen snow (or rarely, when falling), have it “melt” and fade out if browser supports it
snowStorm.useTwinkleEffect = true;
- Lasă zapada la întâmplare “pâlpâie”afară si inauntru la vedere,in tinp ce se incadreaza.
snowStorm.usePositionFixed = false;
- adevarat = zăpada nu afectează window scroll. poate creste CPU , dezactivată in mod implicit – daca este activată, utilizati numai în cazul în care este suportat..
snowStorm.vMaxX = 8;
snowStorm.vMaxY = 5;- Defineste maxim X si Y vitezele de furtună; o valoare aleatoare în acest interval este selectat pentru fiecare fulg de nea.
Tag:
Furtuna, Pagine Web, Zapada