Dobar dan i sretna Nova godina. Uoči Nove godine, želim sa vama podijeliti vrlo lagan, lijep i nepretenciozan dodatak za snijeg koji pada. Ova skripta je zaista vrlo lagana i lako se uklapa u nju html fajl a da ne otežavate rad sa sobom html kod om site. Istina, može se izvaditi zaseban fajl. Ali radi pogodnosti, uradio sam sve u jednom fajlu.

Nema se tu šta puno reći, bolje je pogledati demonstraciju ovog snijega koji pada. Pored toga, tu je i veoma lepa pozadina i ispisan natpis "Srećna Nova godina". prelep font"Jastog" od Googlea. Ovu datoteku možete jednostavno pretvoriti u online čestitku.

Povezivanje skripte padajućih pahuljica na gotovu web stranicu 1. Povežite jQuery biblioteku

Povezuje se ovako: između oznaka i ubacite sljedeći kod:

2. Povežite stilove

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

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

3. Kreirajte datoteku snow.js

Kreirajmo datoteku snow.js i ubacimo 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 endPositionLeft = startPositionLeft - 100 + Math.random() * 200 var durationFall * 10; * 5000; $("#flake") .clone() .appendTo("body") .css(( lijevo: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( vrh: 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" = Math.random() * 1500 + "px" = "absolute"; = "#F3F3F3" flex.style.opacity = Math.random("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" 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); //snow.storm(); 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(); 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();

Uključujemo js fajl u:

4. Zalijepite html kod

Pa, ostaje najvažnije - ubacite html kod pada snijega bilo gdje u:

❄

Ako ste sve učinili kako treba, snijeg će početi padati na vašu stranicu.

Povezivanje pozadinske slike, velikog zaglavlja i padajućih pahuljica

Ova opcija se razlikuje po tome što ima pozadinska slika i veliki naslov "Sretna Nova godina". Povezivanje ove verzije skripte padajućeg snijega na vašu web stranicu je prilično jednostavno. potrebno je:

1. Preuzmite arhivu i raspakujte je 2. Povežite jQuery biblioteku

Obavezno uključite jQuery biblioteku (nije neophodno ako već imate uključenu ovu biblioteku). Povezuje se ovako: između oznaka i ubacite sljedeći kod:

3. Povežite 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 „familu fontova: „Jastog“, kurziv;“ ili ga zamijenite sa sopstvenim fontom

4. Povezivanje stilova

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

Img.bg ( /* Postavite pravila za popunjavanje pozadine */ min-visina: 100%; min-širina: 1024px; /* Postavite proporcionalno skaliranje */ širina: 100%; visina: auto; /* Postavite pozicioniranje */ pozicija: fiksna: 0 lijevo: 0 ) h1 (familija fontova: "Jastog", kurzivna; boja: #FFF; font-size: 90px; visina linije: 95px; weight: normal margin-top: text-shadow: 5px 5px #000 ) @media screen and (max-width: 1024px) ( /* Specifično za ovu sliku */ img.bg (lijevo: 50%; ; margin-left: /* 50% */ ) html, body (family font: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margin:); 0; boja: #333 ) .bar (boja pozadine: #111; boja: #f0f0f0; senka okvira: 0px 0px 2px #333; visina linije: 25px; padding: 0,7; ) . bar:hover ( neprozirnost: 1; ) .bar a ( boja: #DDD; ) .bar a: lebdjeti ( boja: #FFFFFF; ) a ( boja: #FFFFFF; dekoracija teksta: nema; ) a: lebdjeti ( boja : #CCC ) #canvas ( granica: 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 kreirati zasebnu datoteku, na primjer snow.css i tamo zalijepiti isti kod, iako će on morati biti uključen u glavu na sljedeći način:

5. Povežite skriptu padajućeg snijega

Opcija A. Da bismo to uradili, 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 endPositionLeft= startPositionLeft - 100 + Math.random() * 200 var durationFall* 10; * 5000; $("#flake") .clone() .appendTo("body") .css(( lijevo: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( vrh: 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" = Math.random() * 1500 + "px" = "absolute"; = "#F3F3F3"; flex.style.opacity= Math.random("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" 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); //snow.storm(); 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(); 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();

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

6. Ispunite sliku pozadine

Učitajte sliku bg.jpg iz arhive u korijen vaše stranice

7. Ubacite html kod

Pa, najvažnije je da ubacite html kod snijega koji pada:

Sretna Nova godina! ❄

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

Web dizajn sa jQuery je veoma jednostavan!

Kako se Nova godina približava, na većini web stranica pojavljuju se dvije stvari: „snijeg koji pada“ i stranica s rasprodajama i popustima. Oba se rade vrlo jednostavno. Snijeg - uz pomoć jQuery dodaci, te popuste i rasprodaje pomoću slike iznad cijene precrtane debelom crvenom linijom više, navodno odgovara staroj cijeni.

Međutim, sada nas zanima samo postavljanje "snijega koji pada" na stranicu stranice. Postoji nekoliko za ovo jednostavne opcije. Pogledajmo dva od njih zasnovana na jQueryju.

Započinjemo instalaciju "snijega koji pada" kreiranjem nove mape, prirodnog naziva snijeg, a zatim preuzimanjem arhiva i raspakujte ga u ovu fasciklu. U njemu ćemo imati dvije skripte jquery-1.8.3.min.js i jquery.snow.js.

Zatim morate dodati u zaglavlje stranice unutar oznake ... sljedeće redove koji ukazuju na putanje do ovih skripti, i mali JavaScript za inicijalizaciju "snijega koji pada":

$(document).ready(function())(
$.fn.snow();
});

Da 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 promijeniti u bilo kojem uređivaču ili u Notepad-u:
minSize: 10 , // minimalna veličina pahuljice
maxSize: 20 , // maksimalna veličina pahuljice
newOn: 500 , // učestalost pojavljivanja pahuljica u ms, odnosno gustina snijega
flakeColor: "#bbbbbb" // boja pahuljica

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 pahuljica na vrhu klizača (slajd šoua) i padajućih menija, ako ih vaša stranica ima.

Druga verzija "snjeg koji pada"
Za ovu opciju koristite vlastite slike pahuljica, 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 pahuljica laticama ruže možete ukrasiti stranicu web stranice za vjenčanje, a padajuće tratinčice će se uklopiti na web stranicu o ljetnom odmoru.

Fig.1. "Snijeg koji pada" na web stranici

Za instalaciju ponovo koristimo mapu snijega, samo što ćemo sada u nju raspakirati još jednu arhiva, u kojoj se pored skripti nalaze i četiri različite slike pahulje. Dalje, slično prvom primjeru, unutar oznake... umetnite linije koje označavaju putanje do novih datoteka "snijeg koji pada":

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

Ako nemate snijeg, provjerite jeste li ispravno unijeli punu adresu slika pahuljice u sljedeći red datoteke snow.js:
var img=" "; .

Podešavanje gustine snijega je navedeno u istoj datoteci numeričkim argumentom u retku
setTimeout("snow("+id+");",100 ); // učestalost pahuljica,
i brzinu kretanja pahuljica u liniji
$("#snow_"+id).animate((gore:"150%",lijevo:""+end_x+"%"),20000 ,function() // brzina kretanja pahuljica

Također, kao i u prvoj opciji, obratite pažnju na vrijednost z-index:10 tako da snijeg preklapa klizače, padajuće menije itd. koji se nalaze na stranici.

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 za padanje snijega u jQueryju

Naš izbor ćemo započeti s vrlo lijepim efektom snijega, koji se dodaje na stranicu pomoću dodatka pod nazivom “jSnow”.

Demonstracija:

Slažem se - predivno!

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

1. Preuzmite jsnow.zip arhivu na kraju članka. Raspakujte i otpremite sadržaj na svoju web stranicu putem FTP-a ili na drugi način koji vam odgovara.

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

3. Prije Koristite završnu oznaku da uključite skripte:

$(document).ready(function() ( $("body").jSnow(( vSize: 100, // Veličina površine pahuljica: 30, // Broj pahuljica flakeColor: ["#fff"], // Boja flakeMinSize : 10, // Minimalna veličina pahuljice flakeMaxSize: 20, // Maksimalna veličina pahuljice koja padaSpeedMin: 1, // Minimalna brzina pada pahuljiceSpeedMax: 2, // Maksimalna brzina pahuljice koja padaKod:[." ] // Vrsta snježne pahulje ));

Ovaj kod prilagođava veličinu pahuljica, visinu područja koje zauzimaju, boju i druge komentarisane parametre.

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

FlakeCode:["*"] // Izgled pahuljice

Ili gomila okruglog snijega i zvijezda:

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

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

Skripta je odlična za ukrašavanje vrha stranice bez preklapanja glavnog sadržaja.

Snowstorm – pametna skripta za padanje snijega u JavaScript-u

Zašto pametno, pitate se? Jer u ovoj skripti (za razliku od drugih o kojima se govori u ovom članku) postoji dodatni efekat odbijanja pahuljica. Odnosno, kada pomjerite kursor miša na vašoj web lokaciji, pahulje jure u suprotnom smjeru od nje. Što je kursor dalje od sredine ekrana, to je veća brzina pahuljica.

Demonstracija:

Da biste instalirali ovaj efekat na svoju web stranicu, nije vam potrebno dodatne biblioteke. Sve što trebate učiniti je:

1. Preuzmite arhivu snowstorm.zip na kraju članka. Raspakujte i otpremite sadržaj na svoju stranicu na način koji vam odgovara.

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

Ako je potrebno, izvršite promjene u animaciji skripte.

Osim što su pahulje odmaknute od kursora, neke od njih se zalijepe za dno ekrana, stvarajući blagi utisak da pahulje formiraju snježni nanos.

Snježne padavine – efekat pada snijega sa snježnim nanosima koristeći jQuery

Najviše mi se sviđa ova skripta, jer implementira sitna zrna snijega i skuplja male snježne nanose na navedenim elementima.

Demonstracija:

Instalacija ovog efekta traje malo duže 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čiti 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 web mjestu, uklonite redak iz skripte:

Kolekcija: ".collectonme",

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

Odličan skript, to je upravo ono što smo ranije koristili na našoj web stranici.

Glatko slojeviti efekat padajućeg snijega koristeći CSS3

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

Demonstracija:

Magično, zar ne?

Kako biste sami instalirali ovaj efekat, poduzmite tri jednostavna koraka.

1. Preuzmite arhivu snow_img.zip na kraju članka. Raspakujte i otpremite sadržaj na svoju web stranicu putem FTP-a ili file manager hosting.

2. Ubacite u svoj stilski fajl (po mogućnosti na samom dnu):

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

) )

Zatim sačuvajte sve promjene. Ovako dobar izbor

Operacija