Hezký den a šťastný nový rok. V předvečer Nového roku se s vámi chci podělit o velmi lehký, krásný a nenáročný plugin pro padající sníh. Tento skript je opravdu velmi lehký a snadno se do něj vejde html soubor aniž byste si ztěžovali práci sami se sebou html kód om místo. Pravda, dá se to vyndat samostatný soubor. Ale pro pohodlí jsem udělal vše v jednom souboru.
Tady není moc co říct, lepší je podívat se na ukázku tohoto padajícího sněhu. Kromě toho existuje velmi krásné pozadí a „Šťastný nový rok“ napsaný krásným písmem společnosti Google Lobster. Tento soubor můžete snadno proměnit v online blahopřání.
Připojení skriptu padajících sněhových vloček k hotové webové stránce 1. Připojte knihovnu jQueryPřipojí se takto: mezi značky a vložte následující kód:
2. Propojte styly
Vložte kód css do svého css soubor(obvykle je to style.css):
#canvas ( okraj: 1px plná černá; pozice: absolutní; z-index: 10000; ) #flake ( barva: #fff; pozice: absolutní; velikost písma: 25px; nahoře: -50px; )
3. Vytvořte soubor snow.jsVytvoříme soubor snow.js a vložíme do něj následující javascriptový kód:
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(( vlevo: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, vlevo : endPositionLeft, neprůhlednost: 0,2 ), trváníFall, "lineární", function() ( $(this).remove()); ), 500); var sníh = (); 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 = "absolutní"; 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); ); //chumelenice(); var mlha = (); 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); ); //začátek mlhy();
Soubor js zahrneme do:
4. Vložte html kód
No, to nejdůležitější zůstává - vložte html kód padajícího sněhu kamkoli do:
❄
Pokud jste udělali vše správně, pak na váš web začne padat sníh.
Propojení obrázku na pozadí, velkého záhlaví a padajících sněhových vločekTato možnost se liší tím, že má obrázek na pozadí a velký nadpis „Šťastný nový rok“. Propojení této verze skriptu pro padající sníh s vaším webem je poměrně jednoduché. Potřebovat:
1. Stáhněte si archiv a rozbalte jej 2. Připojte knihovnu jQueryNezapomeňte zahrnout knihovnu jQuery (není nutné, pokud již máte tuto knihovnu součástí). Připojí se takto: mezi značky a vložte následující kód:
3. Připojte písmo "Lobster"
Podobně jako při připojování knihovny jQuery připojujeme písmo pro náš nápis „Happy New Year“:
Samozřejmě, pokud tento nápis a písmo nepotřebujete, nemusíte je zahrnout, ale pak v css odstraňte z atributu H1 „font-family: „Hor“, kurzíva;, nebo jej nahraďte s vlastním písmem
4. Spojovací stylyMožnost A: Vložte kód css do souboru css. Zde je kód:
Img.bg ( /* Nastavit pravidla pro vyplnění pozadí */ minimální výška: 100 %; minimální šířka: 1024px; /* Nastavení proporcionálního měřítka */ šířka: 100 %; výška: auto; /* Nastavení umístění */ position: fixed; top: 0; left: 0; ) h1 ( font-family: "Hors", cursive; color: #FFF; font-size: 90px; text-align: center; line-height: 95px; font- váha: normální; horní okraj: 300 pixelů; stín textu: 5 pixelů 5 pixelů #000; ) @media obrazovka a (maximální šířka: 1024 pixelů) ( /* Specifické pro tento konkrétní obrázek */ img.bg ( vlevo: 50 % ; margin-left: -512px; /* 50% */ ) ) html, body ( font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margin: 0; color: #333; ) .bar ( background-color: #111; color: #f0f0f0; box-shadow: 0px 0px 2px #333; line-height: 25px; padding: 0px 20px; opacity: 0,7; ) . bar:hover ( opacity: 1; ) .bar a ( color: #DDD; ) .bar a:hover ( color: #FFFFFF; ) a ( color: #FFFFFF; text-decoration: none; ) a:hover ( color : #CCC; ) #canvas ( okraj: 1px plná černá; pozice: absolutní; z-index: 10000; ) #flake ( barva: #fff; pozice: absolutní; velikost písma: 25px; nahoře: -50px; ) #page (pozice: relativní; )
Možnost B. Můžete také vytvořit samostatný soubor, například snow.css a vložit do něj stejný kód, i když jej bude nutné zahrnout do hlavy následovně:
5. Připojte skript padající sníh
Možnost A. Abychom to mohli udělat, musíme vložit následující kód javascript úplně dole na web (před uzavření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.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(( vlevo: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, vlevo : endPositionLeft, neprůhlednost: 0,2 ), trváníFall, "lineární", function() ( $(this).remove()); ), 500); var sníh = (); 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 = "absolutní"; 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); ); //chumelenice(); var mlha = (); 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); ); //začátek mlhy();
Možnost B. Stejně jako u kódu css lze javascript umístit do samostatného souboru a také nazvat snow.js a zahrnout do hlavy:
6. Vyplňte obrázek na pozadí
Nahrajte obrázek bg.jpg z archivu do kořenového adresáře vašeho webu
7. Vložte html kódNo, nejdůležitější zbývá vložit html kód padajícího sněhu:
Šťastný nový rok! ❄
Skript padajícího sněhu byl úspěšně připojen. Určitě se na to podívejte v akci. Vše nejlepší!
Webdesign s jQuery je velmi snadný! "Padající sníh" na webových stránkáchS blížícím se Novým rokem se na většině webů objevují dvě věci: „padající sníh“ a stránka výprodejů a slev. Obojí se dělá velmi jednoduše. Snow – pomocí pluginů jQuery a slev a výprodejů zobrazením většího čísla přeškrtnutého tlustou červenou čarou nad cenovkou, údajně odpovídající staré ceně.
Nás však nyní zajímá pouze umístění „padajícího sněhu“ na stránku webu. Je jich na to několik jednoduché možnosti. Podívejme se na dva z nich založené na jQuery.
Instalaci „padajícího sněhu“ zahájíme vytvořením nové složky, přirozeně pojmenované sníh, poté stáhneme archiv a rozbalíme jej do této složky. Budeme v něm mít dva skripty jquery-1.8.3.min.js a jquery.snow.js.
Dále musíte do záhlaví stránky uvnitř značky přidat ... následující řádky označující cesty k těmto skriptům a malý JavaScript pro inicializaci „padajícího sněhu“:
$(document).ready(function())(
$.fn.snow();
});
Aby se sníh objevil na stránce webu, stačí přidat dovnitř značky
.
Tento plugin má pouze čtyři nastavení. Jsou umístěny na samém začátku souboru jquery.snow.js a lze je změnit v libovolném editoru nebo v poznámkovém bloku:
minSize: 10 , // minimální velikost sněhové vločky
maxSize: 20 , // maximální velikost sněhové vločky
newOn: 500 , // četnost výskytu sněhových vloček v ms, tedy hustota sněhu
flakeColor: "#bbbbbb" // barva sněhových vloček
Všimněte si také hodnoty z-index:10 pro sníh, která je nastavena na prvních řádcích souboru jquery.snow.js. Nastavuje polohu sněhových vloček nad posuvníky (prezentace) a rozevíracími nabídkami, pokud je vaše stránka obsahuje.
Druhá verze "padajícího sněhu"
Pro tuto možnost použijete vlastní obrázky sněhových vloček, jak je znázorněno na obr. 1. Díky tomu je plugin barevnější a navíc se dá s úspěchem použít i na další efekty. Například nahrazením obrázků sněhových vloček okvětními lístky růží můžete ozdobit stránku svatebního webu a padající sedmikrásky se budou hodit na web o letní dovolené.
Obr. 1. "Padající sníh" na webových stránkách
K instalaci opět použijeme složku snow, jen do ní nyní rozbalíme další archiv, ve kterém jsou kromě skriptů čtyři různé obrázky sněhové vločky. Dále, podobně jako v prvním příkladu, dovnitř značky... vložte čáry označující cesty k novým souborům „padající sníh“:
A nakonec přidejte řádek do značky (nejlépe na začátek stránky)
.
Pokud nemáte sníh, ujistěte se, že jste do následujícího řádku v souboru snow.js správně zadali celou adresu obrázků sněhových vloček:
var img=" 
Úprava hustoty sněhu je specifikována ve stejném souboru číselným argumentem v řádku
setTimeout("snow("+id+");",100 ); // četnost sněhových vloček,
a rychlost pohybu sněhových vloček v řadě
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // rychlost pohybu sněhových vloček
Stejně jako u první možnosti si také dejte pozor na hodnotu z-index:10, aby sníh překrýval posuvníky, rozbalovací nabídky atd. umístěné na stránce.
Do zimy zbývá velmi málo času a velký počet webmasteři začínají na svých stránkách vytvářet tu správnou atmosféru. Při této příležitosti představujeme náš výběr sněhových efektů pro váš web.
jSnow – univerzální skript pro padající sníh v jQueryNáš výběr začneme velmi krásným sněhovým efektem, který je na stránky přidán pomocí pluginu s názvem „jSnow“.
Demonstrace:
Souhlas - nádhera!
Chcete-li nainstalovat tento efekt na svůj web, proveďte následující.
1. Stáhněte si archiv jsnow.zip na konci článku. Rozbalte a nahrajte obsah na svůj web přes FTP nebo jinou pro vás vhodnou metodu.
Bohužel s novými verzemi skript jQuery nefunguje, takže jsme spokojeni s tím, co máme.
3. Před K zahrnutí skriptů použijte uzavírací značku:
$(document).ready(function() ( $("body").jSnow(( vSize: 100, // Velikost oblasti vloček: 30, // Počet vloček flakeColor: ["#fff"], // Barva flakeMinSize: 10, // Minimální velikost sněhové vločky flakeMaxSize: 20, // Maximální velikost padající vločkySpeedMin: 1, // Minimální rychlost padající vločkySpeedMax: 2, // Maximální rychlost vločkyKód:["."] // Typ sněhové vločky )); ));
Tento kód upravuje velikost sněhových vloček, výšku oblasti, kterou zabírají, barvu a další komentované parametry.
Skript, jak víte, je univerzální a místo kulatého sněhu můžete přidat hvězdy, například takto:
FlakeCode:["*"] // Vzhled sněhové vločky
Nebo hromada kulatého sněhu a hvězd:
FlakeCode:[".", "*"] // Vzhled sněhové vločky
Stejně jako jakýkoli jiný symbol (a dokonce i znak dolaru - $).
Skript je skvělý pro zdobení horní části webu, aniž by se překrýval hlavní obsah.
Snowstorm – chytrý skript padajícího sněhu v JavaScriptuProč chytrý, ptáte se? Protože v tomto skriptu (na rozdíl od ostatních diskutovaných v tomto článku) je navíc efekt odpuzování sněhových vloček. To znamená, že když pohybujete kurzorem myši na svém webu, sněhové vločky se řítí opačným směrem od něj. Čím dále je kurzor od středu obrazovky, tím rychleji se sněhové vločky pohybují.
Demonstrace:
K instalaci tohoto efektu na váš web nejsou potřeba žádné další knihovny. Vše, co musíte udělat, je:
1. Stáhněte si archiv snowstorm.zip na konci článku. Rozbalte a nahrajte obsah na svůj web způsobem, který vám vyhovuje.
window.onload = function() ( snowStorm.snowColor = "#fff"; // Barva sněhových vloček snowStorm.flakesMaxActive = 100; // Maximální částka viditelné sněhové vločky snowStorm.followMouse = true; // true - honit kurzor, false - no snowStorm.snowCharacter = "."; // Pohled na sněhovou vločku);
V případě potřeby proveďte změny v animaci skriptu.
Kromě toho, že jsou sněhové vločky odsunuty od kurzoru, některé z nich ulpívají na spodní části obrazovky a vytvářejí lehký dojem, že vločky tvoří závěj.
Snowfall – efekt padajícího sněhu se sněhovými závějemi pomocí jQueryTento skript se mi líbí nejvíce, protože implementuje jemná zrnka sněhu a také sbírá malé závěje na zadaných prvcích.
Demonstrace:
Instalace tohoto efektu trvá o něco déle než ostatní.
1. Pokud váš web nemá knihovnu jQuery, zahrňte ji do sekce HEAD:
3. Přiřaďte třídu „darkBg“ k úvodní značce:
4. Před zahrňte skripty s uzavírací značkou:
$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((kolekce: ".collectonme", flakeCount: 200 // Počet sněhových vloček )); ));
5. A v konečné fázi přiřaďte třídu těm prvkům, nad kterými by se měly tvořit závěje:
Class="colletonme"
Pokud nechcete, aby se na webu tvořily závěje, odstraňte ze skriptu řádek:
Sbírka: ".colletonme",
Toto je povinná akce, jinak na váš web nenapadne sníh.
Skvělý scénář, přesně to jsme na našem webu dříve používali.
Hladký vrstvený efekt padajícího sněhu pomocí CSS3Zde se, jak jistě chápete, neuchýlíme k používání všemožných skriptů, ale vystačíme si s čistým CSS.
Demonstrace:
Kouzelné, že?
Chcete-li si tento efekt nainstalovat sami, proveďte tři jednoduché kroky.
1. Stáhněte si archiv snow_img.zip na konci článku. Rozbalte a nahrajte obsah na svůj web přes FTP nebo správce souborů hostování.
2. Do souboru stylu vložte (nejlépe úplně dole):
SnowContainer ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; z-index: -1; ) #snow ( šířka: 100 %; výška: 100 %; obrázek na pozadí: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animace: snow 20s linear infinite; ) @keyframes snow ( 0 % ( background-position: 0px 0px, 0px 0px, 0px 0px; ) 100% ( background-position : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes snow ( 0% (pozice na pozadí: 0px 0px, 0px 0px, 0px 0px; ) 100% (pozice na pozadí: 000px,310px40px 300px; ) ) @-webkit-keyframes snow ( 0 % (pozice na pozadí: 0px 0px, 0px 0px, 0px 0px; ) 100 % (pozice na pozadí: 500px 1000px, 400px 400px, 300px) 300px-300px; klíčové snímky sníh ( 0 % ( pozice na pozadí: 0px 0px, 0px 0px, 0px 0px; ) 100 % ( Pozice na pozadí: 500px 1000px, 400px 400px, 300px 300px; ))
Poté uložte všechny změny.
Takhle dobrý výběr sněhové efekty, které návštěvníky vašich stránek nepochybně potěší.