23 iun. 2019 Webdesign

Fulgi de zapada


Change Wind | Stop Snowing

 

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.

 

internet explorer firefox chrome safari Flock Netscape Maxthon opera
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 = '•';
&bull; (•) = bullet. &middot; 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:
, ,

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *