Când am început să scriu acest plugin, nu știam că există deja multe disponibile. Nu că asta ar fi contat, pentru că pur și simplu îmi plac puzzle-urile provocatoare, iar un troian de zăpadă este un subiect la fel de bun ca oricare altul.
Un cuvânt de avertisment
Desigur, știu că utilizarea multor animații Javascript sunt dăunătoare performanței procesorului, dar nu despre asta e vorba - voiam provocarea matematică. Și da, o soluție CSS3 sau canvas este mai ușoară pentru procesorul tău, dar o soluție JS îți oferă mult mai multă flexibilitate. Așadar: folosește acest plugin cu înțelepciune, de exemplu, minimizează dimensiunea troienei de zăpadă utilizând-o în elemente mai mici, cum ar fi exemplele de aici, în loc să o folosești pe întreaga lățime și înălțime a paginii.
Imbunatatiri
Stare inițială - Am vrut ca fulgii să fie distribuiți aleatoriu peste tot pe container atunci când pagina este încărcată, apoi să înceapă animațiile lor individuale de acolo. Acest lucru oferă un efect mai plăcut decât dacă ai începe cu o pagină goală și abia apoi să înceapă să cadă zăpada de sus.
Viteza fulgului - fiecare fulg primește propria viteză de animație aleatorie.
Plutire - Fulgii au o deviere de la punctul lor inițial de cădere. Acest lucru face ca fulgul de zăpadă să pornească dintr-un punct nou aleatoriu în partea de sus, dar îl face și să plutească în timp ce cade.
Paralaxă - fulgii vin în dimensiuni alese aleatoriu, în anumite limite. Cu cât dimensiunea este mai mică, cu atât viteza este mai mică. Acest lucru creează un efect de paralaxă 3D plăcut.
Numărul de fulgi - numărul de fulgi de zăpadă din elementul dvs. este ales aleatoriu, dar depinde de dimensiunea elementului dvs. Pe scurt: lățimea containerului este împărțită la paisprezece, apoi se acordă aleatoriu plus sau minus 10 fulgi.
Opacitate - dacă este setată la true (implicit), fiecare fulg primește aleatoriu una dintre cele trei opacități diferite: 1, 0,8 și 0,7.
Cum se folosește acest plugin?
1. Legați fișierele de care aveți nevoie
Includeți scriptul jQuery în partea de jos a paginii, de exemplu, printr-o rețea CDN:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
Apoi includeți versiunea minimizată a scriptului:
<script src="[calea către scriptul dvs.]/jquery.fallingsnow.min.js"></script>
Schimbați [calea către scriptul dvs.] în locul în care se află acesta, de exemplu „js”.
De asemenea, asigurați-vă că includeți fișierul CSS în secțiunea <head> a paginii dvs.:
<link rel="stylesheet" href="[calea către foaia ta de stil]/jquery.fallingsnow.css">
Schimbați [calea către foaia de stil] în locul în care se află, de exemplu „css”.
2. Creați markup-ul HTML
Este foarte simplu: creați un element și stilizați elementul care îl conține. De exemplu
<div id="snow-wrapper">
<div id="snow"></div>
</div>
<style>
#snow-wrapper {
width: 500px;
height: 500px;
...
}
</style>
Elementul #snow preia automat lățimea și înălțimea elementului container.
3. Apoi apelați pluginul
Apoi inițializează pluginul, indicându-i în ce element trebuie să ruleze (implicit este „#snow”):
<script>
$("#snow").fallingSnow();
</script>
Puteți modifica și setările implicite aici:
<script>
$( "#snow" ).fallingSnow({
flakeSizeAdjust: 1.5,
flakeSpeedAdjust: 1,
drift: 400,
});
</script>
Aceasta este pagina de bază pentru a porni pluginul:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="css/jquery.fallingsnow.css">
<link rel="stylesheet" href="css/myfallingsnow.css">
</head>
<body>
...
<div class="snow-wrap">
<div id="snow"></div>
</div>
...
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/jquery.fallingsnow.min.js"></script>
<script>
$( "#snow" ).fallingSnow();
</script>
</body>
</html>
consultați fișierul inclus „myfallingsnow.html”.
Opțiuni pentru troienele tale de zăpadă
Dimensiunea fulgului
Puteți ajusta dimensiunea generală a fulgilor de zăpadă. 0,1 este mai mic, de exemplu 2 este mai mare. Implicit este 1. Zecimalele sunt permise, dar nu utilizați 0 (zero), deoarece înmulțirea cu zero setează toate dimensiunile la 0:
Reglare dimensiune fulg: 1,
Viteza fulgului
Ajustați viteza generală a zăpezii care cade. 0,1 este mai rapid, de exemplu 5 este mai lent. Implicit este 2. Zecimalele sunt permise, dar nu utilizați 0 (zero), deoarece înmulțirea cu zero anulează toate vitezele:
Reglare viteză fulg: 2,
Oprește ninsoarea - poți opri ninsoarea:
oprireLaClick: adevărat,
De asemenea, puteți alege elementul pe care să faceți clic pentru a îngheța (joc de cuvinte neintenționat) ninsoarea. Implicit este #snow:
stopElement: $('#snow),
Derivă
Setați abaterea dintre partea de sus și cea de jos a ecranului atunci când cade un fulg. Aceasta este generată aleatoriu plus sau minus, în funcție de această setare, provocând un efect plăcut de învârtire și de derivă. Implicit este 100:
Niciun comentariu:
Trimiteți un comentariu
Lasa un comentariu