Do zimy zostáva veľmi málo času a veľké množstvo webmasteri začnú na svojich stránkach vytvárať správnu atmosféru. Pri tejto príležitosti predstavujeme náš výber snehových efektov pre váš web.

jSnow - Generic Falling Snow Script s jQuery

Našu kompiláciu začíname veľmi krásnym snehovým efektom, ktorý sa na stránku pridáva pomocou pluginu s názvom „jSnow“.

demonštrácia:

Súhlas - krásne!

Ak chcete tento efekt nainštalovať na svoje stránky, postupujte takto.

1. Stiahnite si archív jsnow.zip na konci článku. Rozbaľte a nahrajte obsah na svoju stránku cez FTP alebo iným spôsobom, ktorý vám vyhovuje.

Bohužiaľ, skript nefunguje s novými verziami jQuery, takže sme spokojní s tým, čo máme.

3. Predtým zahrnúť skripty do záverečnej značky:

$(document).ready(function() ( $("body").jSnow(( vSize: 100, // Veľkosť plochy vločiek: 30, // Počet vločiek flakeColor: ["#fff"], // Color flakeMinSize: 10, // Minimálna veľkosť vločky:S padajúca vločka /20 padajúca snehová vločka, maximálna veľkosť vločiek /20 snehových vločiek/S Minimálna rýchlosť pádu snehovej vločkySpeedMa x: 2, // Maximálna rýchlosť vločkyKód:["."] // Typ snehovej vločky )); ));

Tento kód nastavuje veľkosť snehových vločiek, výšku plochy, ktorú zaberajú, farbu a ďalšie komentované parametre.

Skript, ako viete, je univerzálny a namiesto okrúhleho snehu môžete pridať hviezdičky, napríklad takto:

FlakeCode:["*"] // Zobrazenie snehovej vločky

Alebo kopa okrúhleho snehu a hviezd:

FlakeCode:[".", "*"] // Zobrazenie snehovej vločky

Rovnako ako akýkoľvek iný znak (a dokonca aj znak dolára - $).

Skript je skvelý na zdobenie hornej časti stránky bez prekrývania hlavného obsahu.

Snowstorm - Smart JavaScript Falling Snow Script

Prečo inteligentný, pýtate sa? Pretože v tomto skripte (na rozdiel od ostatných diskutovaných v tomto článku) je dodatočný efekt odpudzovania snehových vločiek. To znamená, že keď pohnete kurzorom myši na svoje stránky, snehové vločky sa ponáhľajú opačným smerom. Čím ďalej je kurzor od stredu obrazovky, tým vyššiu rýchlosť pohyby snehových vločiek.

demonštrácia:

Ak chcete nainštalovať tento efekt na svoje stránky, nie sú potrebné žiadne ďalšie knižnice. Všetko, čo musíte urobiť, je:

1. Stiahnite si archív snowstorm.zip na konci článku. Rozbaľte a nahrajte obsah na svoju stránku spôsobom, ktorý vám vyhovuje.

window.onload = function() ( snowStorm.snowColor = "#fff"; // Farba snehových vločiek snowStorm.flakesMaxActive = 100; // Maximálny počet viditeľných snehových vločiek snowStorm.followMouse = true; // true - prenasleduje kurzor, false - no snowStorm.snowCharacter = "."; // zobrazenie snehovej vločky = ".";

Vykonajte zmeny v animácii skriptu podľa potreby.

Okrem toho, že snehové vločky sú od kurzora odpudzované, niektoré z nich sa prilepia na spodok obrazovky, čo vytvára mierny dojem vytvárania záveja snehovými vločkami.

Sneženie - efekt padajúceho snehu so závejmi na jQuery

Tento skript sa mi páči najviac, pretože implementuje malé snehové krúpy a tiež zbiera malé snehové záveje na špecifikovaných prvkoch.

demonštrácia:

Nastavenie tohto efektu je o niečo dlhšie ako u ostatných.

1. Ak vaša stránka nemá knižnicu jQuery, zahrňte ju do sekcie HEAD:

3. Priraďte triedu „ darkBg“ k úvodnej značke:

4. Predtým prepojte skripty s uzatváracou značkou:

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall(( kolekcia: ".colletonme", flakeCount: 200 // Počet snehových vločiek )); ));

5. A v záverečnej fáze priraďte triedu tým prvkom, nad ktorými by sa mali vytvárať snehové záveje:

Class="colletonme"

Ak si neželáte, aby sa na webe vytvárali snehové záveje, odstráňte riadok zo skriptu:

Zbierka: ".collectonme",

Toto je povinná akcia, inak sneh na vašej stránke nespadne.

Skvelý skript, to sme predtým používali na našej stránke.

Hladký vrstvený efekt padajúceho snehu s CSS3

Tu, ako ste pochopili, sa nebudeme uchýliť k používaniu všetkých druhov skriptov, ale budeme spravovať iba čisté CSS.

demonštrácia:

Čarovné, však?

Ak si chcete tento efekt nainštalovať sami, postupujte podľa troch jednoduchých krokov.

1. Stiahnite si archív snow_img.zip na konci článku. Rozbaľte a nahrajte obsah na svoju stránku cez FTP alebo cez Správca súborov hosting.

2. Vložte do súboru so štýlom (najlepšie úplne dole):

SnowContainer ( šírka: 100 %; výška: 100 %; poloha: absolútna; hore: 0; vľavo: 0; z-index: -1; ) #snow ( šírka: 100 %; výška: 100 %; obrázok na pozadí: url("/sneh/sneh_1.png"), url("/sneh"/sneh"/sneh" -web_2. it-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; ) @keyframes snow ( 0% (pozadie-position: 0px 0px, 0%0px 0px:1px) 0px0px pozadie 0px: 0px0px , 400px 4 00px, 300px 300px; ) ) @-moz-keyframes sneh ( 0% (pozícia na pozadí: 0px 0px, 0px 0px, 0px 0px; ) 100% (pozícia na pozadí: 500px-30px30px, 400px, kľúč snehové snímky ( 0% (pozícia na pozadí: 0px 0px, 0px 0px, 0px 0px; ) 100% (pozícia na pozadí: 500px 1000px, 400px 400px, 300px 300px; ) @-ms-kľúčové snímky 0px-pozícia na pozadí: 0%, 0%, 0% ) 100 % ( pozícia na pozadí: 500px 1000px, 400px 400px, 300px 300px; ))

Potom uložte všetky zmeny.

Páči sa ti to dobrý výber efekty snehu, ktoré bezpochyby potešia návštevníkov vašej stránky.

Webdizajn s jQuery je veľmi jednoduchý! Webová stránka "Padajúci sneh".

Keď sa blíži Nový rok, na väčšine stránok sa objavia dve veci: „padajúci sneh“ a stránka výpredajov a zliav. Oboje je veľmi jednoduché. Sneh – pomocou pluginov jQuery a zľavy a výpredaje pomocou obrázka nad cenovkou s hrubou červenou čiarou cez viac, údajne zodpovedajúca starej cene.

Nás však teraz zaujíma len umiestnenie „padajúceho snehu“ na stránku lokality. Ak to chcete urobiť, existuje niekoľko jednoduchých možností. Pozrime sa na dva z nich založené na jQuery.

Inštaláciu "falling snow" spustíme vytvorením nového priečinka, samozrejme, s názvom snow , následne si stiahneme archív a rozbalíme ho do tohto priečinka. Dostaneme v ňom dva skripty jquery-1.8.3.min.js a jquery.snow.js.

Ďalej musíte do hlavičky stránky v rámci značky ... pridať nasledujúce riadky označujúce cesty k týmto skriptom a trochu JavaScriptu na inicializáciu „padajúceho snehu“:

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

Aby sa sneh objavil na stránke webu, stačí pridať do značky
.

Pre tento doplnok existujú iba štyri nastavenia. Nachádzajú sa na samom začiatku súboru jquery.snow.js a možno ich zmeniť v ľubovoľnom editore alebo v programe Poznámkový blok:
minSize: 10 , // minimálna veľkosť snehovej vločky
maxSize: 20 , // maximálna veľkosť snehovej vločky
newOn: 500 , // frekvencia snehových vločiek v ms, t.j. hustota snehu
flakeColor: "#bbbbbb" // farba snehovej vločky

Všimnite si tiež hodnotu z-index:10 pre sneh, ktorá je nastavená v prvých riadkoch súboru jquery.snow.js. Nastavuje polohu snehových vločiek v hornej časti posúvačov (prezentácií) a rozbaľovacích ponúk, ak ich vaša stránka obsahuje.

Druhá verzia „padajúceho snehu“
Pre túto možnosť sa používajú ich vlastné obrázky snehových vločiek, ako je znázornené na obr. Vďaka tomu je plugin farebnejší a navyše sa dá úspešne použiť aj na iné efekty. Napríklad nahradením kresieb snehových vločiek okvetnými lístkami ruží môžete ozdobiť stránku svadobného miesta a padajúce sedmokrásky sa budú hodiť na stránke o letných prázdninách.

Obr.1. Webová stránka "Padajúci sneh".

Na inštaláciu opäť používame zložku snow, len teraz do nej rozbalíme ďalší archív, v ktorom sú okrem skriptov štyri rôzne obrázky snehových vločiek. Ďalej, podobne ako v prvom príklade, do značky ... vložte riadky označujúce cesty k novým súborom „padajúci sneh“:

A nakoniec pridajte riadok do značky (najlepšie v hornej časti stránky)
.

Ak nemáte sneh, uistite sa, že ste do ďalšieho riadku súboru snow.js zadali úplnú adresu obrázkov snehových vločiek:
varimg=" "; .

Úprava hustoty snehu sa nastavuje v rovnakom súbore s číselným argumentom v riadku
setTimeout("sneh("+id+");",100 ); // frekvencia snehových vločiek,
a rýchlosť pohybu snehových vločiek v rade
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // rýchlosť snehových vločiek

Rovnako ako v prvej možnosti si dávajte pozor na hodnotu z-index:10, aby sneh prekrýval posuvníky umiestnené na stránke, rozbaľovacie ponuky atď.

Pekný deň a šťastný nový rok. V predvečer Nového roka sa s vami chcem podeliť o veľmi ľahký, krásny a nenáročný doplnok padajúceho snehu. Tento skript je naozaj veľmi ľahký a dá sa jednoducho umiestniť do html súboru bez toho, aby sa s ním ťažko pracovalo. html kód stránky om. Je pravda, že sa dá vytiahnuť samostatný súbor. Ale pre pohodlie som urobil všetko v jednom súbore.

Tu je málo čo povedať, lepšie je vidieť ukážku tohto padajúceho snehu. Okrem toho je tam veľmi krásne pozadie a nápis "Šťastný nový rok". krásne písmo„Homár“ od spoločnosti Google. Tento súbor môžete ľahko zmeniť na internetovú pohľadnicu s gratuláciou.

Pripojenie skriptu padajúcich snehových vločiek k dokončenému miestu 1. Pripojte knižnica jQuery

Je pripojený takto: medzi značky a vložte nasledujúci kód:

2. Pripojte štýly

Prilepte kód css do súboru css (zvyčajne style.css):

#canvas ( orámovanie: 1px plná čierna; pozícia: absolútna; z-index: 10000; ) #flake ( farba: #fff; pozícia: absolútna; veľkosť písma: 25px; horná časť: -50px; )

3. Vytvorte súbor snow.js

Vytvorme súbor snow.js a prilepíme tam nasledujúci kód javascript:

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.Heightrandom; Po $0“ #flake") .clone() .appendTo("body") .css(( vľavo: startPositionLeft, nepriehľadnosť: startOpacity, "font-size": sizeFlake )) .animate(( hore: endPositionTop, vľavo: endPositionLeft, opacity: 0.2), ove(trvanie)(th))0); var sneh = (); var snowflex = (); snowflex.create = function()( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex.style.top = - 50 + Math.random() * 20 + "styleh.5m.px"; flex + "px10.px"; flex flex. style.position = "absolútne"; 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.flex.5styleseft) + ) ( clearInterval(t); document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function()( var t = setInterval(function()( snow.snowflex(); ), 500); ); //sneh.búrka(); var hmla = (); 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); y = 300 + 2Math x 300); (wg + 2Math.co. y), 100); //fog.start();

Zahrnúť súbor js do:

4. Vložte html kód

No, to najdôležitejšie zostáva - vložte html kód padajúceho snehu na akékoľvek miesto v:

❄

Ak ste urobili všetko správne, na vašu stránku začne padať sneh.

Pripojenie obrázok na pozadí, veľká hlavička a padajúce snehové vločky

Tento variant sa líši tým, že má obrázok na pozadí a veľký nadpis „Šťastný nový rok“. Pripojenie tejto verzie skriptu padajúceho snehu k stránke je celkom jednoduché. Potrebovať:

1. Stiahnite si archív a rozbaľte ho 2. Pripojte knižnicu jQuery

Nezabudnite zahrnúť knižnicu jQuery (nie je potrebné, ak už máte túto knižnicu zahrnutú). Je pripojený takto: medzi značky a vložte nasledujúci kód:

3. Pripojte písmo "Lobster"

Podobne ako pri zahrnutí knižnice jQuery, zahrnieme aj písmo pre náš nápis „Happy New Year“:

Prirodzene, ak tento nápis a písmo nepotrebujete, nemôžete ho zahrnúť, ale potom v css odstráňte atribút "font-family: "Homár", kurzíva;" z H1 alebo ho nahraďte vlastným písmom

4. Vrátane štýlov

Možnosť A. Prilepte kód css do súboru css. Tu je kód:

Img.bg ( /* Nastaviť pravidlá na vyplnenie pozadia */ minimálna výška: 100 %; minimálna šírka: 1024px; /* Nastaviť proporcionálne škálovanie */ šírka: 100 %; výška: auto; /* Nastaviť umiestnenie */ poloha: pevná; hore: 0; doľava: 0; ) h1 ( font-family:0FF, cursive text: "FLobster-family: text - align: center; line-height: 95px; font-weight: normal; margin-top: 300px; text-shadow: 5px 5px 5px #000; ) @media screen and (max-width: 1024px) ( /* Špecifické pre tento konkrétny obrázok */ img.bg (vľavo: 50%, *5%; margin-left) rodina fontov: Helvetica, Arial, bezpätkové; veľkosť písma: 12px; výška riadku: 16px; odsadenie: 0; okraj: 0; farba: #333; ) 0,7; ) .bar:hover ( nepriehľadnosť: 1; ) .bar a (farba: #FFFF.DD: farba #FFFF.DD: farba #FF. text-decoration: none; ) a:hover ( farba: #CCC; ) #canvas ( orámovanie: 1px plná čierna; poloha: absolútna; z-index: 10000 ) #flake ( farba: #fff; pozícia: absolútna; veľkosť písma: 25px; hore: -50px; ) #stránka (pozícia: relatívna; )

Možnosť B. Môžete tiež vytvoriť samostatný súbor, napríklad snow.css a vložiť tam rovnaký kód, aj keď ho bude potrebné zahrnúť do hlavy nasledovne:

5. Pripojte skript padajúceho snehu

Možnosť A. Aby sme to dosiahli, musíme vložiť nasledujúci kód javascript úplne na spodok stránky (pred zatvorením):

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.0Po 4. koniecDokumentu; ft= startPositionLeft - 100 + Math.random() * 200; var DurationFall= documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( left: startPositionLeft, endPositionLeft, endOpacity, opacity: topize: topize) PositionTop, left: endPositionLeft, nepriehľadnosť: 0,2 ), DurationFall, "linear", function() ( $(this).remove() )); ), 500); var sneh = (); var snowflex = (); snowflex.create = function()( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex.style.top = - 50 + Math.random() * 20 + "styleh.5m.px"; flex + "px10.px"; flex flex. style.position = "absolútne"; 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.flex.5styleseft) + ) ( clearInterval(t); document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function()( var t= setInterval(function()( snow.snowflex(); ), 500); ); //sneh.búrka(); var hmla = (); 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); y = 300 + 2Math x 300); (wg + 2Math.co. y), 100); //fog.start();

Možnosť B. Rovnako ako v prípade kódu css, aj javascript je možné presunúť do samostatného súboru a tiež nazvať snow.js a zahrnúť ho do hlavy:

6. Vyplňte obrázok na pozadí

Nahrajte obrázok bg.jpg z archívu do koreňového adresára vašej lokality

7. Vložte html kód

No a to najdôležitejšie ostáva - vložiť html kód padajúceho snehu:

Šťastný nový rok! ❄

Skript Padajúceho snehu bol úspešne pripojený. Určite si to vyskúšajte v akcii. Všetko najlepšie!