Ostalo je vrlo malo vremena do zime, i veliki broj webmasteri počinju stvarati odgovarajuću atmosferu na svojim stranicama. Ovom prilikom predstavljamo naš izbor snježnih efekata za vašu web stranicu.
jSnow – univerzalna skripta padajućeg snijega u jQueryjuPočet ćemo naš odabir s vrlo prekrasan učinak snijeg, koji se dodaje 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, s novim verzijama jQuery skripta ne radi, pa smo zadovoljni onim š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.
Snježna oluja – skripta pametnog padajućeg snijega u JavaScriptuZaš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 pokazivač dalje od sredine ekrana, pahulje se 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 snježnih pahulja snowStorm.flakesMaxActive = 100; // Maksimalni iznos vidljive snježne pahulje snowStorm.followMouse = true; // true - lovi kursor, false - nema snowStorm.snowCharacter = "."; // Pogled 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.
Snježne padaline – učinak pada snijega sa snježnim nanosima pomoću jQueryjaOva 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.
Efekt glatkog slojevitog padajućeg snijega pomoću CSS3Ovdje, 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 web stranicu putem FTP-a ili upravitelj datoteka usluge poslužitelja.
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"); -webkit-animacija: snijeg 20-ih linearno beskonačno; -moz-animacija: snijeg 20s linearno beskonačno; -ms-animacija: snijeg 20s linearno beskonačno; animacija: snijeg 20s linearno beskonačno; ) @keyframes snijeg ( 0% ( pozadinski položaj: 0px 0px, 0px 0px, 0px 0px; ) 100% ( pozadinski položaj : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes snijeg ( 0% ( položaj pozadine: 0px 0px, 0px 0px, 0px 0px; ) 100% ( položaj pozadine: 500px 1000px, 400px 400px, 300px 300px; ) ) @-webkit-keyframes snijeg ( 0% ( položaj pozadine: 0px 0px, 0px 0px, 0px 0px; ) 100% ( položaj pozadine: 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.
Kao ovo dobar izbor snježne efekte, koji će bez sumnje oduševiti posjetitelje vaše stranice.
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 skripta je stvarno vrlo lagana i lako se uklapa html datoteka a da ne otežavate rad sa sobom html kod om mjestu. Istina, može se izvaditi u zasebna datoteka. 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.
Povezivanje skripte padajućih pahuljica na gotovu web stranicu 1. Povežite jQuery bibliotekuSpaja se ovako: između oznaka i umetnite sljedeći kod:
2. Povežite stilove
Zalijepite css kod u svoj css datoteka(obično je ovo style.css):
#canvas (obrub: 1px puna crna; pozicija: apsolutna; z-index: 10000; ) #flake (boja: #fff; pozicija: apsolutna; veličina fonta: 25px; vrh: -50px; )
3. Napravite datoteku snow.jsKreirajmo 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 = 10 + Math.random() * 20; var endPositionTop = documentHeight - 40; var endPositionLeft = startPositionLeft - 100 + Math.random() * 200; var durationFall = documentHeight * 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() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "apsolutno"; flex. style .color = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); 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) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function())( var t = setInterval(function())( snow.snowflex(); ), 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,true); ctx.closePath(); ctx.fill(); ); 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; fog.draw(ctx, x, y); ), 100); ); //magla.start();
Uključujemo js datoteku u:
4. Umetnite html kod
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.
Povezivanje pozadinske slike, velikog zaglavlja i snježnih pahulja koje padajuOva je opcija drugačija po tome što ima pozadinska slika i veliki naslov "Sretna Nova godina". Povezivanje ove verzije skripte padajućeg snijega s vašim web mjestom vrlo je jednostavno. Moram:
1. Preuzmite arhivu i raspakirajte je 2. Povežite jQuery bibliotekuSvakako uključite jQuery biblioteku (nije potrebno ako već imate tu biblioteku). Spaja se ovako: između oznaka i umetnite sljedeći kod:
3. Spojite font "Lobster"
Slično povezivanju jQuery biblioteke, 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
4. Povezivanje stilovaOpcija 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; gore: 0; lijevo: 0; ) h1 (obitelj-fontova: "Lobster", kurziv; boja: #FFF; veličina fonta: 90px; poravnanje teksta: središte; visina linije: 95px; font- težina: normalno; margin-top: 300px; text-shadow: 5px 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; ) .traka (boja pozadine: #111; boja: #f0f0f0; sjena okvira: 0px 0px 2px #333; visina linije: 25px; ispuna: 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; ) #platno (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:
5. Povežite skriptu padajućeg snijega
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= 10 + Math.random() * 20; var endPositionTop= documentHeight - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; var durationFall= documentHeight * 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() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "apsolutno"; flex. style .color = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); 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) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function())( var t= setInterval(function())( snow.snowflex(); ), 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,true); ctx.closePath(); ctx.fill(); ); 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; fog.draw(ctx, x, y); ), 100); ); //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:
6. Ispunite pozadinsku sliku
Učitajte sliku bg.jpg iz arhive u root stranice
7. Umetnite html kodPa, 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!
Web dizajn s jQueryjem je vrlo jednostavan! "Pada snijeg" na web straniciKako 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 - uz pomoć jQuery dodaci, te popuste 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. Postoji nekoliko za ovo jednostavne opcije. Pogledajmo dva od njih na temelju jQueryja.
Počinjemo instalirati "padajući snijeg" stvaranjem nove mape, prirodno nazvane snijeg, a zatim preuzimamo arhiva i raspakirajte ga 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 pahulja 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.
Sl. 1. "Pada snijeg" na web stranici
Za instalaciju ponovno koristimo mapu snijega, samo sada ćemo u nju raspakirati drugu arhiva, u kojem se osim skripti nalaze četiri različite slike snježne pahulje. 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.