Redarea scriptului căde zăpadă în joc. Web design și optimizare pentru motoarele de căutare. Conectarea unei imagini de fundal, a unui antet mare și a fulgilor de zăpadă care cad

Webdesign cu jQuery este foarte ușor!

„Falling Snow” pe site

Pe măsură ce Anul Nou se apropie, pe majoritatea site-urilor apar două lucruri: „zăpadă care căde” și o pagină cu reduceri și reduceri. Ambele se fac foarte simplu. Snow - folosind plugin-uri jQuery și reduceri și vânzări prin reprezentarea unui număr mai mare tăiat cu o linie roșie groasă deasupra etichetei de preț, care se presupune că corespunde vechiului preț. Cu toate acestea, acum suntem interesați doar să plasăm „zăpadă care căde” pe pagina site-ului. Există mai multe pentru asta opțiuni simple

. Să ne uităm la două dintre ele bazate pe jQuery.

Începem instalarea „zăpezii care căde” prin crearea unui folder nou, denumit în mod natural zăpadă, apoi descărcam arhiva și o despachetăm în acest folder. Vom avea două scripturi jquery-1.8.3.min.js și jquery.snow.js în el.

Apoi, trebuie să adăugați la antetul paginii din interiorul etichetei... următoarele rânduri care indică căile către aceste scripturi și un mic JavaScript pentru a inițializa „zăpada care căde”:
$(document).gata(funcție())(
});

$.fn.snow();
.

Pentru ca zăpada să apară pe pagina site-ului, trebuie doar să adăugați în interiorul etichetei
Acest plugin are doar patru setări. Acestea sunt situate chiar la începutul fișierului jquery.snow.js și pot fi modificate în orice editor sau în Notepad:
minSize: 10 , // dimensiune minimă a fulgilor de zăpadă
maxSize: 20 , // dimensiunea maximă a unui fulg de zăpadă
newOn: 500 , // frecvența de apariție a fulgilor de zăpadă în ms, adică densitatea zăpezii

flakeColor: „#bbbbbb” // culoarea fulgilor de nea

Rețineți, de asemenea, valoarea z-index:10 pentru zăpadă, care este setată în primele rânduri ale fișierului jquery.snow.js. Setează poziția fulgilor de zăpadă în partea de sus a glisoarelor (prezentări de diapozitive) și a meniurilor drop-down, dacă pagina dvs. le are.
A doua versiune a „zăpadă care căde”

Pentru această opțiune, utilizați propriile imagini cu fulgi de zăpadă, așa cum se arată în Fig. 1. Datorită acestui lucru, pluginul este mai colorat și, în plus, poate fi folosit cu succes pentru alte efecte. De exemplu, prin înlocuirea imaginilor cu fulgi de zăpadă cu petale de trandafir, puteți decora pagina unui site web de nuntă, iar margaretele care căde se vor potrivi pe un site web despre o vacanță de vară. Fig.1

Pentru a instala, folosim din nou folderul de zăpadă, doar că acum vom despacheta o altă arhivă în el, care, pe lângă scripturi, conține patru imagini diferite cu fulgi de zăpadă. În continuare, similar cu primul exemplu, în interiorul etichetei... inserați linii care indică căile către noile fișiere „zăpadă cădere”:

Și, în final, adăugați linia în interiorul etichetei (de preferință la începutul paginii)
.

Dacă nu aveți zăpadă, asigurați-vă că introduceți corect adresa completă a imaginilor cu fulgi de nea în următoarea linie a fișierului snow.js:
var img=" "; .

Ajustarea densității zăpezii este specificată în același fișier printr-un argument numeric în linie
setTimeout("zapada("+id+");",100); // frecvența fulgilor de zăpadă,
și viteza de mișcare a fulgilor de zăpadă într-o linie
$("#snow_"+id).animate((sus:"150%",left:""+end_x+"%"),20000 ,function() // viteza de mișcare a fulgilor de zăpadă

De asemenea, ca și în prima opțiune, acordați atenție valorii z-index:10 pentru ca zăpada să se suprapună cu glisoarele, meniurile derulante etc. aflate pe pagină.

A mai rămas foarte puțin timp până la iarnă și număr mare 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 zăpadă cu 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. Înainte 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 de 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 în animația scenariului.

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. Înainte 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 stabili acest efect pentru dvs., faceț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. În fișierul de stil, inserați (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.

Iată o selecție bună de efecte de zăpadă care, fără îndoială, vor încânta vizitatorii site-ului dvs. O zi buna si la multi ani. În ajunul Anului Nou, vreau să vă împărtășesc un plugin de zăpadă foarte ușor, frumos și fără pretenții. Acest script este într-adevăr foarte ușor și se potrivește ușor fișier html fără să fie dificil să lucrezi cu tine însuți cod html om site. Adevărat, poate fi scos în dosar separat

. Dar pentru comoditate, am făcut totul într-un singur fișier. Nu sunt multe de spus aici, este mai bine să urmăriți o demonstrație a acestei căderi de zăpadă. În plus, există un fundal foarte frumos și inscripția „La mulți ani” scrisă font frumos

„Homar” de la Google. Puteți transforma cu ușurință acest fișier într-o felicitare online.

Conectarea scriptului fulgi de nea care căde la site-ul web finalizat 1. Conectați biblioteca jQuery

Se conectează astfel: între etichete și introduceți următorul cod:

2. Conectați stiluri

Lipiți codul css în fișierul dvs. css (de obicei style.css):

#pânză (chenar: 1px negru solid; poziție: absolut; index z: 10000; ) #fulg (culoare: #fff; poziție: absolut; dimensiune font: 25px; sus: -50px; )

3. Creați fișierul snow.js

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0,5 + Math.random ( ); var sizeFlake = 10 + Math.random() * 20 var endPositionTop = documentHeight - 40 var endPositionLeft - 100 + Math.random() * var durationFall * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( stânga: startPositionLeft, opacitate: startOpacity, "font-size": sizeFlake )) .animate(( sus: endPositionTop, stânga : endPositionLeft, opacitate: 0,2 ), durationFall, "liniar", function() ( $(this).remove() ), 500); var zăpadă = (); var snowflex = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex . style.top = - 50 + Math.random () * 20 + " flex.style.left "; = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex . style.top) + 5 + „px”; ); document.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); snow.storm = function())( var t = setInterval(function())( snow.snowflex(); ), 500); //zăpadă.furtună(); var ceață = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x); 300 + 300* -Math.cos(x += 2); //fog.start();

Includem fișierul js în:

4. Lipiți codul html

Ei bine, cel mai important lucru rămâne - introduceți codul html al zăpezii care căde oriunde în:

❄

Dacă ați făcut totul corect, atunci zăpada va începe să cadă pe site-ul dvs.

Conectarea unei imagini de fundal, a unui antet mare și a fulgilor de zăpadă care cad

Această opțiune este diferită prin faptul că are imagine de fundalși un mare titlu „La mulți ani”. Conectarea acestei versiuni a scriptului căderea zăpezii la site-ul dvs. este destul de simplă. Trebuie să:

1. Descărcați arhiva și dezarhivați-o 2. Conectați biblioteca jQuery

Asigurați-vă că includeți biblioteca jQuery (nu este necesar dacă aveți deja această bibliotecă inclusă). Se conectează astfel: între etichete și introduceți următorul cod:

3. Conectați fontul „Homar”

Similar cu conectarea bibliotecii jQuery, conectăm fontul pentru inscripția noastră „La mulți ani”:

Desigur, dacă nu aveți nevoie de această inscripție și font, nu trebuie să le includeți, dar apoi în css, eliminați „familia de fonturi: „Homar”, cursiv;” din atributul H1 sau înlocuiți-o cu propriul font

4. Stiluri de conectare

Opțiunea A: inserați codul css în fișierul dvs. css. Iată codul:

Img.bg ( /* Setați reguli pentru a umple fundalul */ înălțime minimă: 100%; lățime minimă: 1024px; /* Setați scalarea proporțională */ lățime: 100%; înălțime: automată; /* Configurați poziționarea */ poziție: fix; partea de sus: 0; stânga: 0; greutate: normal; margin-top: 300px text-shadow: 5px 5px #000 ) Ecranul media și (max-width: 1024px) ( /* Specific pentru această imagine particulară */ img.bg; ; margin-left: -512px; /* 50% */ ) ) html, body (font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; margine: 0; 0; culoare: #333; ) .bar (culoare de fundal: #111; culoare: #f0f0f0; umbră de casetă: 0px 0px 2px #333; înălțime de linie: 25px; umplutură: 0px 20px; opacitate: 0,7). bar:hover (opacitate: 1; ) .bar a (culoare: #DDD; ) .bar a:hover (culoare: #FFFFFF; ) a (culoare: #FFFFFF; text-decor: niciunul; ) a:hover (culoare : #CCC; ) #canvas ( chenar: 1px negru; poziție: absolut; indicele z: 10000; ) #fulg ( culoare: #fff; poziție: absolut; dimensiunea fontului: 25px; sus: -50px; ) #pagină (poziția: relativă; )

Opțiunea B. Puteți, de asemenea, să creați un fișier separat, de exemplu snow.css și să lipiți același cod acolo, deși va trebui să fie inclus în cap după cum urmează:

5. Conectați scriptul de zăpadă care căde

Opțiunea A. Pentru a face acest lucru, trebuie să inserăm următorul cod javascript în partea de jos a site-ului (înainte de a închide):

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0,5 + Math.random ( ); var sizeFlake= 10 + Math.random() * 20 var endPositionTop= documentHeight - 40 var endPositionLeft - 100 + Math.random() * 200 var durationFall * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( stânga: startPositionLeft, opacitate: startOpacity, "font-size": sizeFlake )) .animate(( sus: endPositionTop, stânga : endPositionLeft, opacitate: 0,2 ), durationFall, "liniar", function() ( $(this).remove() ), 500); var zăpadă = (); var snowflex = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex . style.top = - 50 + Math.random () * 20 + " flex.style.left "; = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex . style.top) + 5 + „px”; ); document.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); snow.storm = function())( var t= setInterval(function())( snow.snowflex(); ), 500); //zăpadă.furtună(); var ceață = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x); 300 + 300* -Math.cos(x += 2); //fog.start();

Opțiunea B. La fel ca în cazul codului css, javascriptul poate fi plasat într-un fișier separat și numit și snow.js și inclus în cap:

6. Completați imaginea de fundal

Încărcați imaginea bg.jpg din arhivă la rădăcina site-ului dvs

7. Introduceți codul html

Ei bine, cel mai important lucru rămas este să introduceți codul html al zăpezii care căde:

An nou fericit! ❄

Scriptul căderea zăpezii a fost conectat cu succes. Asigurați-vă că îl urmăriți în acțiune. Toate cele bune!