Skripta za igru ​​pada snijeg. Web dizajn i optimizacija za tražilice. Preuzmite arhivu i raspakirajte je

Kako se Nova godina približava, na većini web stranica pojavljuju se dvije stvari: “pada snijeg” i stranica s rasprodajama i popustima. I jedno i drugo se radi vrlo jednostavno. Snijeg - pomoću jQuery dodataka, te sniženja i rasprodaje prikazom većeg broja prekriženog debelom crvenom linijom iznad cjenika, koji navodno odgovara staroj cijeni.

Međutim, sada smo zainteresirani samo za postavljanje "padajućeg snijega" na stranicu stranice. Za to postoji nekoliko jednostavnih opcija. Pogledajmo dva od njih na temelju jQueryja.

Počinjemo instalaciju "padajućeg snijega" stvaranjem nove mape, prirodno nazvane snijeg, zatim preuzimamo arhivu i raspakiramo je u ovu mapu. U njemu ćemo imati dvije skripte jquery-1.8.3.min.js i jquery.snow.js.

Zatim trebate dodati u zaglavlje stranice unutar oznake ... sljedeće retke koji označavaju staze do ovih skripti i mali JavaScript za inicijalizaciju "padajućeg snijega":

$(dokument).spreman(funkcija())(
$.fn.snow();
});

Kako bi se snijeg pojavio na stranici stranice, samo dodajte unutar oznake
.

Ovaj dodatak ima samo četiri postavke. Nalaze se na samom početku datoteke jquery.snow.js i mogu se mijenjati u bilo kojem editoru ili Notepadu:
minSize: 10, // minimalna veličina snježne pahulje
maxSize: 20 , // maksimalna veličina pahulje
newOn: 500 , // učestalost pojavljivanja pahulja u ms, odnosno gustoća snijega
flakeColor: "#bbbbbb" // boja snježnih pahulja

Također obratite pažnju na vrijednost z-index:10 za snijeg, koja je postavljena u prvim redovima datoteke jquery.snow.js. Postavlja položaj snježnih pahulja na vrhu klizača (slide show) i padajućih izbornika, ako ih vaša stranica ima.

Druga verzija "pada snijega"
Za ovu opciju koristite vlastite slike snježnih pahulja, kao što je prikazano na slici 1. Zahvaljujući tome, dodatak je šareniji, a osim toga, može se uspješno koristiti za druge efekte. Na primjer, zamjenom slika snježnih pahuljica laticama ruže možete ukrasiti stranicu web stranice za vjenčanja, a padajuće tratinčice uklopit će se na web stranicu o ljetnom odmoru.

Za instalaciju ponovno koristimo mapu snijega, samo sada ćemo u nju raspakirati još jednu arhivu u kojoj, osim skripti, postoje četiri različite slike snježnih pahuljica. Zatim, slično kao u prvom primjeru, unutar oznake... umetnite retke koji označavaju staze do novih datoteka "pada snijega":

I na kraju dodajte redak unutar oznake (po mogućnosti na početku stranice)
.

Ako nemate snijega, provjerite jeste li ispravno unijeli punu adresu slika pahuljica u sljedeći redak datoteke snow.js:
prom. img=" "; .

Podešavanje gustoće snijega navedeno je u istoj datoteci numeričkim argumentom u retku
setTimeout("snijeg("+id+");",100 ); // učestalost snježnih pahulja,
i brzinu kretanja pahuljica u liniji
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // brzina kretanja pahulja

Također, kao i u prvoj opciji, obratite pozornost na vrijednost z-index:10 kako bi snijeg prekrivao klizače, padajuće izbornike i sl. koji se nalaze na stranici.

Dobar dan i sretna nova godina. Uoči Nove godine, želim s vama podijeliti vrlo lagan, lijep i nepretenciozan dodatak za padajući snijeg. Ova je skripta stvarno vrlo lagana i lako stane u html datoteku, a da pritom ne otežava rad sa samim html kodom web-mjesta. Istina, može se staviti u zasebnu datoteku. Ali radi praktičnosti, sve sam napravio u jednoj datoteci.

Nema se tu što puno reći, bolje je pogledati demonstraciju ovog snijega koji pada. Osim toga, tu je i vrlo lijepa pozadina i natpis "Sretna Nova godina" ispisan prekrasnim "Lobster" fontom iz Googlea. Ovu datoteku možete jednostavno pretvoriti u mrežnu čestitku.

Spaja se ovako: između oznaka i umetnite sljedeći kod:

Zalijepite css kod u svoju css datoteku (obično style.css):

#canvas (obrub: 1px puna crna; pozicija: apsolutna; z-index: 10000; ) #flake (boja: #fff; pozicija: apsolutna; veličina fonta: 25px; vrh: -50px; )

Kreirajmo datoteku snow.js i u nju umetnimo sljedeći javascript kod:

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random (); var sizeFlake() * 20; var endPositionHeight - 40; var endPositionLeft() * 200; var durationFall * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( lijevo: startPositionLeft, neprozirnost: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, lijevo: endPositionLeft, neprozirnost: 0,2), durationFall, "linearno", function() ($(this).remove()), 500); var snijeg = (); 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() * flex.style.left = Math.random() * flex.style.position = "flex"; style .color = "#F3F3F3"; return 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) + flex.style.left = parseInt(flex.style.left) + x (parseInt(flex.style.top) > 1500) ( clearInterval(t ); snow.storm = function())( var t = setInterval(function())( snow.nowflex(); ), 500); //mećava(); var magla = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,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); y = 300+300* -Math.cos(x); x += 2; //magla.start();

Uključujemo js datoteku u:

Pa, ostaje ono najvažnije - umetnite html kod snijega koji pada bilo gdje u:

❄

Ako ste sve učinili ispravno, snijeg će početi padati na vašem mjestu.

Ova se opcija razlikuje po tome što ima pozadinsku sliku i veliki naslov "Sretna Nova godina". Povezivanje ove verzije skripte padajućeg snijega s vašim web mjestom vrlo je jednostavno. Moram:

Svakako uključite jQuery biblioteku (nije potrebno ako već imate tu biblioteku). Spaja se ovako: između oznaka i umetnite sljedeći kod:

Slično povezivanju biblioteke jQuery, povezujemo font za naš natpis "Sretna Nova godina":

Naravno, ako vam ne trebaju ovaj natpis i font, ne morate ga uključiti, ali onda u css-u uklonite “font-family: “Lobster”, cursive;” iz atributa H1 ili ga zamijenite s vlastitim fontom

Opcija A: Zalijepite css kod u svoju css datoteku. Evo koda:

Img.bg ( /* Postavite pravila za popunjavanje pozadine */ min-height: 100%; min-width: 1024px; /* Postavite proporcionalno skaliranje */ širina: 100%; visina: auto; /* Postavite pozicioniranje */ pozicija: fiksna; lijevo: 0; ) h1 (familija fonta: "Lobster", boja: veličina fonta: 90 piksela; visina reda: 95 piksela težina: normalna; margin-top: 5px 5px #000 ) @medijski zaslon i (max-width: 1024px) ( /* Specifično za ovu sliku */ img.bg ( lijevo: 50% ; margin-left: -512px; /* 50% */ ) html, body (font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margina: 0; boja: #333; .bar (color-background: #111; color: #f0f0f0; box-shadow: 0px 0px 2px #333; line-height: 25px; padding: 0px 20px; neprozirnost: 0,7; ) . bar:hover ( neprozirnost: 1; ) .bar a (boja: #DDD; ) .bar a:hover (boja: #FFFFFF; ) a (boja: #FFFFFF; text-decoration: none; ) a:hover (boja : #CCC) #canvas (obrub: 1px puna crna; pozicija: apsolutna; z-indeks: 10000; ) #flake (boja: #fff; pozicija: apsolutna; veličina fonta: 25px; vrh: -50px; ) #stranica (pozicija: relativna; )

Opcija B. Također možete stvoriti zasebnu datoteku, na primjer snow.css i tamo zalijepiti isti kod, iako će se morati uključiti u glavu na sljedeći način:

Opcija A. Da bismo to učinili, moramo umetnuti sljedeći javascript kod na samom dnu stranice (prije zatvaranja):

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0.5 + Math.random ( ); var sizeFlake() * 20; var endPositionHeight - 40; var endPositionLeft - 100 + Math.random() * 200; var durationFall= documentHeight() * 5000; $("#flake") .clone() .appendTo("body") .css(( lijevo: startPositionLeft, neprozirnost: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, lijevo: endPositionLeft, neprozirnost: 0,2), durationFall, "linearno", function() ($(this).remove()), 500); var snijeg = (); 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() * flex.style.left = Math.random() * flex.style.position = "flex"; style .color = "#F3F3F3"; return 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) + flex.style.left = parseInt(flex.style.left) + x (parseInt(flex.style.top) > 1500) ( clearInterval(t ); snow.storm = function())( var t= setInterval(function())( snow.nowflex(); ), 500); //mećava(); var magla = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,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); y = 300+300* -Math.cos(x); x += 2; //magla.start();

Opcija B. Baš kao i kod css koda, javascript se može smjestiti u zasebnu datoteku i također nazvati snow.js te uključiti u glavu:

Učitajte sliku bg.jpg iz arhive u root stranice

Pa, ostalo je najvažnije ubaciti html kod snijega koji pada:

Sretna Nova godina! ❄

Skripta pada snijega uspješno je povezana. Svakako ga pogledajte na djelu. Sve najbolje!

Do zime je ostalo vrlo malo vremena, a veliki broj webmastera počinje stvarati odgovarajuću atmosferu na svojim stranicama. Ovom prilikom predstavljamo naš izbor snježnih efekata za vašu web stranicu.

Naš odabir započet ćemo s vrlo lijepim snježnim efektom, koji je dodan na stranicu pomoću dodatka pod nazivom “jSnow”.

Demonstracija:

Slažem se - prekrasno!

Da biste instalirali ovaj efekt na svoju web stranicu, učinite sljedeće.

1. Preuzmite arhivu jsnow.zip na kraju članka. Raspakirajte i prenesite sadržaj na svoju web stranicu putem FTP-a ili druge metode koja vam odgovara.

Nažalost, skripta ne radi s novim verzijama jQueryja, tako da smo zadovoljni ovim što imamo.

3. Prije Koristite završnu oznaku za uključivanje skripti:

$(document).ready(function() ( $("body").jSnow(( vSize: 100, // Veličina područja pahuljica: 30, // Broj pahuljica flakeColor: ["#fff"], // Boja flakeMinSize : 10, // Minimalna veličina pahuljice flakeMaxSize: 20, // Maksimalna veličina pahuljice padajućeSpeedMin: 1, // Minimalna brzina pahuljice padajućeSpeedMax: 2, // Maksimalna brzina pahuljice flakeCode:["." ] // Vrsta snježne pahulje ));

Ovaj kod prilagođava veličinu snježnih pahuljica, visinu površine koju zauzimaju, boju i druge komentirane parametre.

Scenarij je, kao što razumijete, univerzalan, a umjesto okruglog snijega možete dodati zvijezde, na primjer, ovako:

FlakeCode:["*"] // Izgled pahuljice

Ili hrpa okruglog snijega i zvijezda:

FlakeCode:[".", "*"] // Izgled pahuljice

Kao i svaki drugi simbol (pa čak i znak dolara - $).

Skripta je izvrsna za ukrašavanje vrha stranice bez preklapanja glavnog sadržaja.

Zašto pametno, pitate se? Zato što u ovoj skripti (za razliku od ostalih o kojima se govori u ovom članku) postoji dodatni učinak odbijanja snježnih pahulja. Odnosno, kada pomaknete kursor miša na svoje mjesto, pahulje jure u suprotnom smjeru od njega. Što je kursor dalje od sredine ekrana, to se pahuljice brže kreću.

Demonstracija:

Da biste instalirali ovaj efekt na svoje web mjesto, nisu potrebne dodatne biblioteke. Sve što trebate učiniti je:

1. Preuzmite arhivu snowstorm.zip na kraju članka. Raspakirajte i prenesite sadržaj na svoju stranicu na način koji vama odgovara.

window.onload = function() ( snowStorm.snowColor = "#fff"; // Boja pahuljica snowStorm.flakesMaxActive = 100; // Maksimalan broj vidljivih pahulja snowStorm.followMouse = true; // true - lovi kursor, false - nema snowStorm.snowCharacter = "."; // Vrsta snježne pahulje );

Ako je potrebno, napravite izmjene u animaciji scenarija.

Osim što se pahulje odguruju od pokazivača, neke od njih se zalijepe za dno ekrana, stvarajući blagi dojam pahulja koje tvore snježni nanos.

Ova skripta mi se najviše sviđa, jer implementira sitne snježne zrnca i također skuplja male snježne nanose na navedenim elementima.

Demonstracija:

Instalacija ovog efekta traje malo dulje od ostalih.

1. Ako vaša stranica nema jQuery biblioteku, uključite je u odjeljak HEAD:

3. Dodijelite klasu “darkBg” početnoj oznaci:

4. Prije uključite skripte sa završnom oznakom:

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((collection: ".collectonme", flakeCount: 200 // Broj pahuljica )); ));

5. I u završnoj fazi, dodijelite klasu onim elementima nad kojima bi se trebali formirati snježni nanosi:

Class="collectonme"

Ako ne želite stvaranje snježnih nanosa na mjestu, uklonite redak iz skripte:

Zbirka: ".collectonme",

Ovo je obavezna radnja, inače snijeg neće pasti na vašu stranicu.

Izvrsna skripta, to je upravo ono što smo prije koristili na našoj web stranici.

Ovdje, kao što razumijete, nećemo pribjegavati korištenju svih vrsta skripti, već ćemo se zadovoljiti čistim CSS-om.

Demonstracija:

Čarobno, zar ne?

Kako biste sebi instalirali ovaj efekt, poduzmite tri jednostavna koraka.

1. Preuzmite arhivu snow_img.zip na kraju članka. Raspakirajte i prenesite sadržaj na svoju stranicu putem FTP-a ili putem upravitelja datotekama na hostingu.

2. U svoju stilsku datoteku umetnite (po mogućnosti na samom dnu):

SnowContainer (širina: 100%; visina: 100%; pozicija: apsolutna; vrh: 0; lijevo:0; z-index: -1; ) #snow (širina: 100%; visina: 100%; pozadinska slika: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); snijeg 20s linearno beskonačno; -ms-animacija: snijeg 20s linearno beskonačno; snijeg 20s linearno; : 500px 1000px, 400px 400px, 300px 300px;) @-moz-keyframes snijeg (0% (pozadina-pozicija: 0px 0px, 0px 0px, 0px 0px;) 100% (pozadina-pozicija: 500px 1000px, 400px 400px, 300px 300px; ) ) @-webkit-keyframes snijeg ( 0% (pozadina-pozicija: 0px 0px, 0px 0px, 0px 0px; ) 100% (pozadina-pozicija: 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- ključni kadrovi snijeg ( 0% ( položaj pozadine: 0px 0px, 0px 0px, 0px 0px; ) 100% ( položaj pozadine: 500px 1000px, 400px 400px, 300px 300px; ) )

Zatim spremite sve promjene.

Ovdje je dobar izbor snježnih efekata koji će bez sumnje oduševiti posjetitelje vaše web stranice.