Scripturi de fulgi de nea zburători. Cădere zăpadă pe jQuery sau șablon html de felicitare de Anul Nou. jSnow – script universal pentru zăpadă în jQuery

Decorează-ți blogul pentru Anul Nou. Vă aduc în atenție un widget vechi, dar nu uitat și îndrăgit de bloggeri, FALLING SNOWFLAKES.

Plimbându-mă pe internet, am dat peste un blog uimitor și am citit acest text din articol: „Sunt un bătrân soldat și nu știu cuvinte de dragoste și de aceea nu am adăugat fulgi de nea pe blogul meu, este cumva nedemn.”

Autoarea a făcut o postare pe această temă, ceea ce înseamnă că tuturor le place frumusețea și toți suntem copii la suflet și așteptăm sărbătorile cu admirație și ne dorim o vacanță nu doar în lumea reală, ci și în cea virtuală. Într-adevăr, când am citit cuvintele autorului, mi-au venit în minte cuvintele din cântecul lui Valery Leontyev: „Toată lumea vrea să iubească, atât un soldat, cât și un marinar. Toată lumea vrea să aibă atât o mireasă, cât și un prieten. Toată lumea vrea să iubească, atât soldații, cât și marinarii. Numai zilele sunt grele, doar zilele noastre sunt viscol, viscol.”

Dar acestea sunt versuri și apă inutilă în text. Eu însumi, ca o cioară, iubesc tot felul de gadget-uri de pe Internet: emoticoane, gif-uri, widget-uri, gadget-uri și cu mare plăcere vă voi împărtăși cunoștințele mele, dragi cititori.

Cum se instalează gadgetul Falling Snowflakes

Accesați Panoul administrativ Blogger > Design > Adăugați gadget HTML/JavaScript. Lipiți codul în fereastră.

După introducerea codului în gadget, este indicat să îl ridicați cât mai sus. Acest lucru nu este dificil de făcut, apucați gadgetul HTML/JavaScript cu butonul stâng al mouse-ului și trageți-l în sus sub șablon și eliberați-l, nu a funcționat prima dată, repetați din nou.

Salutare tuturor! Acum exact trei ani am scris deja. Dar după cum s-a dovedit, scriptul pe care l-am oferit atunci și metoda de instalare s-au dovedit a nu fi complet clare pentru mulți cititori ai blogului meu. Am fost literalmente inundat de întrebări, pentru că în acel caz a fost necesar să adaug adăugări la cod, să încărc fișiere în folderul rădăcină... Desigur, a trebuit să ajut pe toți cei care au întrebat și asta, după cum înțelegeți voi înșivă, a luat mult timp.

Dar, după cum se spune, timpul nu stă pe loc. Chiar ieri, pe vastitatea internetului nostru atotștiutor, am dat din greșeală peste un scenariu excelent și acum știu o altă modalitate de a instala fulgi de nea care cad pe un site web. Pentru distracție, l-am încercat. Rezultatele le puteți vedea singur. Scriptul nu încetinește viteza de încărcare a paginilor site-ului, se potrivește aproape oricărui CMS, nu deranjează cititorii - pur și simplu creează o stare de spirit bună!

Pentru cei cărora le-au plăcut acești fulgi de nea care cad, vă voi spune detaliile „confecției” lor. Și sunt pregătiți folosind acest mic script:

Asta e tot! Nu mai sunt dosare de fișiere sau fişiere separate. Doar instalați acest cod imediat după eticheta de deschidere și starea de spirit de Anul Nou este deja cu tine.

Dar toate temele sunt diferite și în cazul meu a trebuit să instalez scriptul într-o altă locație. Am inserat acest script în antetul site-ului din fișierul header.php imediat după etichetă și totul funcționează bine.

Dar te avertizez imediat că atunci când lucrezi cu editorul de teme, trebuie să faci copie de rezervă pentru orice eventualitate, pentru a fi în siguranță. Dacă faceți ceva greșit și faceți o greșeală, atunci puteți remedia totul fără probleme folosind o copie de rezervă.

Din detalii pot adăuga că 40 de fulgi de zăpadă cu o dimensiune maximă de până la 35px sunt „cusuți” în script. Și mai cred că acestea sunt valori optime. Din păcate, nu am reușit să aflu niciodată numele autorului publicației pe care am găsit-o pentru a-i mulțumi foarte mult pentru munca depusă.

Și fulgii de zăpadă vor decora nu numai site-ul, ci vor fi și un plus excelent pentru cei care vor face felicitări „virale” pentru Anul Nou, dacă există astfel de fani ai bunei dispoziții printre cei care citesc acest articol. Apropo, puteți încorpora coduri în aceste carduri virale și puteți câștiga bani din ele.

Sper că nici această ninsoare pufoasă să nu vă lase indiferenți și să vă încântați cititorii blogului cu ea pe tot parcursul sărbătorilor viitoare.

Dacă aveți întrebări, le puteți adresa în comentariile acestui articol. Vă doresc toate cele bune și vă felicit pentru viitorul 2015! Astept cu interes comentariile voastre si le voi raspunde cu placere.

Prin interzicere folosind JavaScript Nu vei putea vedea exemple interesante aplicațiile sale!

Efect de zăpadă în cădere JavaScript

Folosind limbajul de programare JavaScript, puteți crea un efect foarte interesant de zăpadă pe site-ul dvs.

Pentru a face zăpadă pe site-ul meu, am conectat la această pagină un script de zăpadă destul de lung, implementat folosind codul JavaScript.

Dacă trebuie să adăugați efectul căderii zăpezii la un site HTML, atunci este suficient să configurați acest script.

Script de zăpadă pe site

Vizibilitatea fulgilor de zăpadă - codul de zăpadă îi afișează pe tot "corp" pagini web, de ex. acţionează asupra etichetei, scoţându-le din pagină dacă sunt setate. A de desubt fulgii de zăpadă dispar acolo unde sunt stabiliți în scenariul de zăpadă.

Limita inferioară de vizibilitate a fulgilor de zăpadă este scrisă în instrucțiunea if a funcției snow(), în a 42-a linie de cod, în expresia: if (y_pos[i] > înălțime - 89)( Limita inferioară de vizibilitate a fulgilor de zăpadă este mai departe, cu cât este mai mic numărul scăzut din înălțime Dacă, în loc de numărul indicat „89”, punem, să zicem, „49”, atunci fulgii de zăpadă se vor „învârti” în imaginea exemplu și vor dispărea. in spate a lui bandă despărțitoare.

Numărul de fulgi de nea este setat în a 14-a linie a codului js al scriptului, în expresia: var col = Math.round(height/25);

Cu cât este mai mic numărul scris în această expresie, cu atât este mai mare numărul de fulgi de nea.

Viteza fulgilor de nea este ajustată în a 50-a linie de cod, în expresia: setTimeout("snow()", 40);

Viteza fulgilor de zăpadă este mai mare, cu atât numărul de întârziere este mai mic.

** De exemplu, specificând o valoare destul de mică pentru aceste numere, spuneți „5”, puteți aranja o „zăpadă adevărată” pe pagina site-ului dvs. "Buran"! Și pe lângă asta! Nu uitați(!) în prima linie de cod: var imgsrc="image/snow/snow.gif";

indica calea spre poza dorită fulgi de nea. Apropo! Puteți indica în siguranță.

ORICE POZA
din acest folder. De dragul testării, am făcut și notat poze: snow.gif ÷ snow6.gif (*interesant; toate sunt diferite), absolut FĂRĂ orice modificare a codului de zăpadă!

Pentru ca fulgii de nea să fie distribuiti uniform pe toată înălțimea paginii, este IMPORTANT(!) în cazul în care introduceți codul JavaScript. Cel mai bine este să preveniți derularea de jos a paginii să se „tmuieze” prin inserarea codului de script de zăpadă la sfârșitul paginii. VERIFICAT!

**Și mai departe! NU INSERAȚI codul de script în etichetă! NU FUNCȚIONEAZĂ Decorarea site-urilor și blogurilor dvs. în timpul sărbătorilor de Anul Nou și de Crăciun este un lucru bun. Este plăcut să vizitezi chiar și astfel de site-uri :). Blogul meu nu face excepție și el a fost transformat pentru perioada acestor sărbători de iarnă. Probabil ai observat logo nou

Înainte, nu instalasem niciodată scripturi pentru căderea fulgilor de zăpadă pe un site, pentru că am văzut acest miracol pe alte site-uri și, sincer să fiu, nu mi-a plăcut foarte mult și uneori chiar m-a enervat.

Recent, a apărut o nouă funcție pe Google. Am raportat despre asta în - aceasta este zăpadă și un ecran înghețat, pe care apoi îl puteți șterge cu degetul. Încercați, introduceți interogarea „în motorul de căutare” lasa sa ninga ”.

Mi-a plăcut foarte mult această abordare din două motive:

1 . Arată foarte bine;

2. Zăpada începe să cadă doar la cererea utilizatorului.

Acesta este genul de decor care îmi place. Dar nu voi putea implementa înghețarea ecranului - nu sunt programator, vreau să-l comand de la un programator, dar nu sunt sigur că se va face la timp pentru acest An Nou. Dar cu căderea zăpezii în stilul Google și „la comanda” vizitatorului - acest lucru este posibil :). Adevărat, din nou, nu pe cont propriu, ci cu ajutorul unui „străin” bun :), dar nu acesta este ideea.

Înainte de a vă prezenta zăpada pe blogul meu, să ne amintim mai întâi pe scurt câteva plugin-uri WordPress care generează zăpadă bună pentru site.

Pluginuri de zăpadă de Anul Nou pentru WordPress

Un plugin foarte bun. Există destul de multe setări diferite: viteza de animație, culoarea zăpezii care căde, dimensiunea fulgilor, numărul de fulgi de zăpadă care cad simultan etc. Există chiar ceva de genul înghețului, dar nu am reușit să-l fac să funcționeze :(.

La prima vedere, zăpada de pe site nu arată rău, încercați, s-ar putea să vă placă.

Dar acest plugin nu a funcționat pentru mine. În primul rând, nu prea îmi plac plugin-urile și le folosesc doar atunci când este absolut necesar, iar în al doilea rând, zăpada începe să „cadă” imediat după ce pagina se încarcă (vă amintiți al doilea punct?) și uneori distrage atenția de la conținutul principal al site-ului ( muștele îmi fulgeră în fața ochilor, la naiba :)), iar fulgii de nea sunt toți de aceeași dimensiune.

Se spune că este un plugin bun. Din anumite motive nu a pornit pentru mine, deși s-a instalat bine, dar nu a fost zăpadă :). Încearcă, poate te vei descurca mai bine.

Acest plugin face exact aceeași zăpadă ca și mine acum. Nu există setări speciale, doar setați-o și a început să ningă. Deși, dacă doriți, puteți totuși să personalizați unele lucruri (culori, viteză etc.) în editorul de pluginuri, adică. prin editarea fișierului plugin în sine.

Totul ar fi bine, dar dezavantajele sunt aceleași ca înainte: este încă un plugin, deși nu este „greu”, și ninge constant, chiar dacă utilizatorul în general nu are nevoie de el.

Acest plugin poate fi numit un plugin universal de vacanță. Pe lângă zăpada în sine, acest script poate elibera și bile gonflabile și tot felul de frunze :).

Un plugin foarte interesant... chiar am vrut să-l instalez. Dar... am deja propria mea zăpadă :).

Zăpadă pe site la cererea utilizatorului

Aceasta este de fapt soluția care, după părerea mea, este cea mai bună dintre toate cele enumerate mai sus. Desigur, nu totul aici este la fel de cool ca în același „Zăpadă, baloane și multe altele”, dar mai simplu nu înseamnă mai rău.

Cel mai important avantaj al acestui script este „zăpadă la comandă”. Zăpada nu va cădea singură, va trebui să fie cauzată de apăsarea unui buton. În acest fel, vizitatorul nu va fi stresat de fulgii albi de pe ecran care interferează la nesfârșit cu citirea. Dacă vrea zăpadă, o va vedea.

Pentru a începe, descărcați aceste fișiere și încărcați-le pe serverul dvs. în folderul dorit: , . Apropo, butonul arată astfel:

Apoi, între etichete scrieți calea către scripturi:

< script type= "text/javascript" src= "путь/jquery.min.js?ver=1.7" > < script src= "путь/jquery.letsinsnow.js" >

Vă rugăm să rețineți că, dacă aveți deja biblioteca jquery inclusă, atunci nu trebuie să o reactivați deloc. Apoi scrieți doar calea către jquery.letsinsnow.js.

În fișierul jquery.letsinsnow.js de pe linia 15 („culoare” : „#79B3EC”,) puteți schimba culoarea fulgilor de zăpadă. Cred că restul poate fi lăsat implicit ;).

Tot ce rămâne este să adăugați un buton pe site, la clic pe ce zăpadă va cădea. Pentru a face acest lucru, trebuie să urmați câțiva pași simpli:

1 . Plasați codul butonului în locul dorit de pe site:

< input name= "snowbutton" TYPE = "button" onclick= "$("body").snowFall();" title= "Fulgi de nea!" class= "snowbutton" />

Am un buton în antetul blogului. De aceea am adăugat codul în fișierul header.php al șablonului meu WordPress.

2. Adăugați următorul stil la fișierul de stil (de obicei style.css):

.snowbutton ( fundal : url ( " fulg de zăpadă.png " ) 100 % fără repetare ; lățime : 64 px ; înălțime : 64 px ; overflow : vizibil ; margin-top : 80 px ; margin-left : 740 px ; cursor : pointer ; chenar : 0 )

Aici va trebui să ajustați câțiva parametri:

— calea către imaginea butonului: background:url("snowflake.png") 100% fără repetare;.

— locația butonului pe site: margine-sus: 80px;(indentație în partea de sus a ecranului) și margine-stânga:740px;(indentație din stânga).

Desigur, puteți scrie stiluri complet diferite și puteți utiliza un alt buton. Tocmai am dat un exemplu care lucrează în prezent pe blogul meu.

Apropo, încearcă. Butonul se află în antetul blogului, lângă formularul de căutare:

Mult succes prietenilor! La mulți ani și Crăciun fericit!

Dulciuri pentru astăzi: melodie frumoasă, cântec frumos, videoclip frumos de Crăciun. Bucura-te :)

A mai rămas foarte puțin timp până la iarnă și un numar mare de webmasterii încep să creeze atmosfera potrivită pe site-urile lor. Cu această ocazie, vă prezentăm selecția noastră de efecte de zăpadă pentru site-ul dvs.

jSnow – script universal pentru zăpadă în jQuery

Vom începe selecția noastră cu un efect de zăpadă foarte frumos, care este adăugat pe site folosind un plugin numit „jSnow”.

Demonstrație:

De acord - frumos!

Pentru a instala acest efect pe site-ul dvs. web, faceți următoarele.

1. Descărcați arhiva jsnow.zip de la sfârșitul articolului. Dezarhivați și încărcați conținutul pe site-ul dvs. prin FTP sau altă metodă convenabilă pentru dvs.

Din păcate, scriptul nu funcționează cu versiuni noi de jQuery, așa că ne mulțumim cu ceea ce avem.

3. Inainte de Utilizați eticheta de închidere pentru a include scripturi:

$(document).ready(function() ( $("body").jSnow(( vSize: 100, // Dimensiunea zonei fulgi: 30, // Numărul de fulgi de zăpadă flakeColor: ["#fff"], // Culoare flakeMinSize: 10, // Dimensiunea minimă a unui fulg de zăpadă flakeMaxSize: 20, // Dimensiunea maximă a unui fulg de zăpadă care căde VitezaMin: 1, // Viteza minimă a unui fulg de nea care căde VitezaMax: 2, // Viteza maximă a unui fulg de zăpadăCod:["." ] // Tip de fulg de nea ));

Acest cod ajustează dimensiunea fulgilor de nea, înălțimea zonei pe care o ocupă, culoarea și alți parametri comentați.

Scriptul, după cum înțelegeți, este universal și, în loc de zăpadă rotundă, puteți adăuga stele, de exemplu, astfel:

FlakeCode:["*"] // Aspect de fulg de zăpadă

Sau o grămadă de zăpadă rotundă și stele:

FlakeCode:[".", "*"] // Aspect fulg de zăpadă

La fel și orice alt simbol (și chiar semnul dolarului - $).

Scriptul este excelent pentru a decora partea de sus a site-ului fără a se suprapune pe conținutul principal.

Snowstorm – un script inteligent de zăpadă în JavaScript

De ce inteligent, întrebi? Pentru că în acest script (spre deosebire de altele discutate în acest articol) există efect suplimentar respingând fulgii de nea. Adică, atunci când mutați cursorul mouse-ului pe site-ul dvs., fulgii de zăpadă se repezi în direcția opusă față de acesta. Cu cât cursorul este mai departe de mijlocul ecranului, cu atât fulgii de zăpadă se mișcă mai repede.

Demonstrație:

Pentru a instala acest efect pe site-ul dvs., nu sunt necesare biblioteci suplimentare. Tot ce trebuie să faci este:

1. Descărcați arhiva snowstorm.zip de la sfârșitul articolului. Dezarhivați și încărcați conținut pe site-ul dvs. într-un mod convenabil pentru dvs.

window.onload = function() ( snowStorm.snowColor = "#fff"; // Culoarea fulgilor de nea snowStorm.flakesMaxActive = 100; // Numărul maxim de fulgi de nea vizibili snowStorm.followMouse = true; // true - urmăriți cursorul, fals - no snowStorm.snowCharacter = "." // Tip de fulg de nea );

Dacă este necesar, faceți modificări la animația scriptului.

Pe lângă faptul că fulgii de zăpadă sunt împinși departe de cursor, unii dintre ei se lipesc de partea de jos a ecranului, creând o ușoară impresie a fulgilor de zăpadă formând un năvală.

Ninsoare – efectul căderii zăpezii cu zăpadă folosind jQuery

Cel mai mult îmi place acest script, deoarece implementează boabe mici de zăpadă și, de asemenea, adună mici zăpadă pe elementele specificate.

Demonstrație:

Instalarea acestui efect durează puțin mai mult decât altele.

1. Dacă site-ul dvs. nu are biblioteca jQuery, includeți-o în secțiunea HEAD:

3. Atribuiți clasa „darkBg” etichetei de deschidere:

4. Inainte de includeți scripturile cu eticheta de închidere:

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((colecție: ".collectonme", flakeCount: 200 // Numărul de fulgi de nea )); ));

5. Și în etapa finală, atribuiți o clasă acelor elemente peste care ar trebui să se formeze zăpadă:

Class="collectonme"

Dacă nu doriți formarea de zăpadă pe site, eliminați linia din script:

Colecție: „.collectonme”,

Acest actiune obligatorie, altfel zăpada nu va cădea pe site-ul dvs.

Script excelent, acesta este exact ceea ce am folosit pe site-ul nostru înainte.

Efect de zăpadă stratificat neted folosind CSS3

Aici, după cum înțelegeți, nu vom recurge la tot felul de scripturi, ci ne vom descurca cu CSS pur.

Demonstrație:

Magic, nu-i așa?

Pentru a instala acest efect pentru tine, parcurgeți trei pași simpli.

1. Descărcați arhiva snow_img.zip de la sfârșitul articolului. Dezarhivați și încărcați conținutul pe site-ul dvs. prin FTP sau manager de fișiere gazduire.

2. Introduceți în fișierul de stil (de preferință în partea de jos):

SnowContainer ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; z-index: -1; ) #snow ( lățime: 100%; înălțime: 100%; imagine de fundal: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: snow 20s liniar infinit; -ms-animation: zăpadă 20s liniar infinită: zăpadă 20s liniar infinit ) @keyframes zăpadă ( 0% ( poziția fundalului: 0px 0px, 0px 0px; ) 100% ( poziția fundalului : 500px 1000px, 400px 400px; 300px; ) ) @-moz-keyframes zăpadă ( 0% ( poziția de fundal: 0px 0px, 0px 0px, 0px 0px; ) 100% ( poziția de fundal: 500px 1000px, 400px 400px, 300px 300px) @web-kit) zăpadă cadre cheie ( 0% ( poziția fundalului: 0px 0px, 0px 0px, 0px 0px; ) 100% ( poziția fundalului: 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- zăpadă cadre cheie ( 0% poziție: 0px 0px, 0px 0px, 0px 0px ) 100% ( fundal-poziție: 500px 1000px, 400px 400px, 300px 300px;

) )

Apoi salvați toate modificările.