Nagyon kevés idő van hátra a télig, ill nagyszámú a webmesterek elkezdik megteremteni a megfelelő légkört webhelyeiken. Ebből az alkalomból bemutatjuk a hóeffektusok választékát az Ön webhelyére.
jSnow – Általános hulló hó szkript a jQuery segítségével
Összeállításunkat egy nagyon szép hóeffektussal kezdjük, amelyet a „jSnow” nevű plugin segítségével adunk az oldalhoz.
Demonstráció:
Egyetértek - gyönyörű!
Ha ezt a hatást szeretné telepíteni a webhelyére, tegye a következőket.
1.
Archívum letöltése jsnow.zip a cikk végén. Csomagolja ki és töltse fel a tartalmat a webhelyére FTP-n keresztül vagy más, Önnek megfelelő módon.
Sajnos a szkript nem működik a jQuery új verzióival, így elégedettek vagyunk azzal, amink van.
3.
Előtt záró címke
szkriptek csatlakoztatása:
Ez a kód beállítja a hópelyhek méretét, az általuk elfoglalt terület magasságát, színét és egyéb megjegyzésekkel ellátott paramétereket.
A forgatókönyv, amint megérti, univerzális, és a kerek hó helyett csillagokat adhat hozzá, például így:
FlakeCode:["*"] // Hópehely nézet
Vagy egy csomó kerek hó és csillagok:
FlakeCode:[", "*"] // Hópehely nézet
Valamint bármely más karakter (és még a dollárjel is - $).
A szkript kiválóan alkalmas a webhely tetejének díszítésére anélkül, hogy átfedné a fő tartalmat.
Hóvihar – Intelligens JavaScript esõ hó Script
Miért okos, kérdezed? Mert ebben a forgatókönyvben (ellentétben a cikkben tárgyalt többivel) van egy további hatása a hópelyhek taszításának. Vagyis amikor az egérkurzort a webhelyén mozgatja, a hópelyhek az ellenkező irányba rohannak. Minél távolabb van a kurzor a képernyő közepétől, a gyorsabb sebesség hópehely mozdulatok.
Demonstráció:
Ennek a hatásnak a webhelyén történő telepítéséhez nincs szükség további könyvtárakra. Mindössze annyit kell tennie, hogy:
1.
Archívum letöltése hóvihar.zip a cikk végén. Csomagolja ki és töltse fel a tartalmat webhelyére az Ön számára kényelmes módon.
Szükség szerint módosítsa a szkript-animációt.
Amellett, hogy a hópelyhek taszítják a kurzort, némelyikük a képernyő aljához tapad, enyhe benyomást keltve a hópelyhek hófúvás képződéséről.
Hóesés – hóesés hatás hófúvásokkal a jQuery-n
Ezt a forgatókönyvet szeretem a legjobban, mert kis hódarákat valósít meg, és a megadott elemeken összegyűjti a kis hótorlaszokat is.
Demonstráció:
Ennek a hatásnak a beállítása kicsit hosszabb, mint a többinél.
1.
Ha webhelye nem rendelkezik jQuery könyvtárral, vegye fel a szakaszba FEJ:
3.
Nyitási címke
osztály hozzárendelése " sötétBg»:
4.
Előtt záró címke tartalmazza a szkripteket:
5.
Az utolsó szakaszban pedig rendeljen osztályt azokhoz az elemekhez, amelyek felett hófúvásnak kell kialakulnia:
Class="collectonme"
Ha nem szeretné, hogy hófúvások képződjenek a webhelyen, távolítsa el a sort a szkriptből:
Gyűjtemény: ".collectonme",
Ez egy kötelező intézkedés, különben nem esik le a hó a webhelyén.
Remek forgatókönyv, ezt használtuk korábban az oldalunkon.
Sima réteges hóesés hatás CSS3-mal
Itt, amint érti, nem fogunk mindenféle szkript használatához folyamodni, hanem csak a tiszta CSS-t kezeljük.
Demonstráció:
Varázslatos, nem?
Ennek a hatásnak a telepítéséhez kövesse három egyszerű lépést.
1.
Archívum letöltése snow_img.zip a cikk végén. Csomagolja ki és töltse fel a tartalmat webhelyére FTP-n vagy ezen keresztül fájl kezelő hosting.
2.
Illessze be a stíluslapba (lehetőleg a legaljára):
Mint ez jó választás hó hatásai, ami kétségtelenül örömet okoz webhelyének látogatóinak.
A webdesign a jQuery segítségével nagyon egyszerű!
"Falling Snow" weboldal
Az újév közeledtével a legtöbb oldalon két dolog jelenik meg: a "hulló hó" és az akciók és kedvezmények oldala. Mindkettőt nagyon könnyű megtenni. Snow - jQuery bővítmények segítségével, valamint kedvezmények és eladások az árcédula feletti képen keresztül, félkövér piros vonallal több, állítólag a régi árnak felel meg.
Azonban most már csak a "hulló hó" elhelyezése érdekel minket az oldal oldalán. Ehhez több egyszerű lehetőség is van. Ezek alapján nézzünk meg kettőt jQuery.
A "hulló hó" telepítését egy új mappa létrehozásával kezdjük, természetesen a névvel hó, majd töltse le az archívumot, és csomagolja ki ebbe a mappába. Két forgatókönyvet kapunk benne jquery-1.8.3.min.jsés jquery.snow.js
Ezután hozzá kell adnia az oldal címét a címkén belül ... a következő sorokat, amelyek jelzik a szkriptek elérési útját, és egy kis JavaScript a "hulló hó" inicializálásához:
Ahhoz, hogy a hó megjelenjen a webhely oldalán, elegendő a címkén belül hozzáadni
.
Ennek a bővítménynek csak négy beállítása van. A fájl legelején vannak. jquery.snow.jsés bármelyik szerkesztőben vagy a Jegyzettömbben módosíthatók: Minimális méret: 10 // minimális hópehelyméret Maximális méret: 20 // maximális hópehelyméret újon: 500 , // hópelyhek megjelenési gyakorisága ms-ban, azaz hósűrűség flakeColor: "#bbbbbb" // hópehely színe
Vegye figyelembe az értéket is z-index:10 hóhoz, amely a fájl első soraiban van megadva jquery.snow.js. Beállítja a hópelyhek helyzetét a csúszkák (diavetítések) és a legördülő menük tetején, ha az oldalon vannak.
A "hulló hó" második változata Ennél a lehetőségnél a saját hópelyhek képeit használják, amint az 1. ábrán látható. Ennek köszönhetően a plugin színesebb, ráadásul más effektusokhoz is sikeresen használható. Például, ha a hópehely rajzokat rózsasziromra cseréli, feldíszítheti egy esküvői oldal oldalát, a hulló százszorszépek pedig jól jönnek a nyári szünidőről szóló oldalon.
1. ábra. "Falling Snow" weboldal
Az újbóli telepítéshez használja a mappát hó, csak most csomagoljunk ki bele egy újabb archívumot, amiben a szkripteken kívül négy különböző hópelyhes kép is található. Továbbá az első példához hasonlóan a címkén belül ... szúrja be az új "hulló hó" fájlok elérési útját jelző sorokat:
Végül pedig adja hozzá a címke belsejébe
(jobb az oldal tetején) sor
.
Ha nincs hó, akkor feltétlenül adja meg a hópehely képek teljes címét a fájl következő sorában. snow.js: varimg=" "; .
A hósűrűség beállítása ugyanabban a fájlban van beállítva, a sorban egy numerikus argumentummal setTimeout("snow("+id+");",100 ); hópelyhek gyakorisága, és a hópelyhek egymás utáni mozgásának sebességét $("#hó_"+id).animate((fent:"150%",balra:""+end_x+"%"),20000 ,function() // hópelyhek sebessége
Továbbá, mint az első lehetőségnél, ügyeljen az értékre z-index:10 hogy a hó átfedje az oldalcsúszkákat, legördülő menüket stb.
Szép napot és boldog új évet. Az újév előestéjén szeretnék megosztani veletek egy nagyon könnyű, gyönyörű és szerény hóeső plugint. Ez a szkript valóban nagyon könnyű, és könnyen elhelyezhető egy html fájlban anélkül, hogy megnehezítené a vele való munkát. html kódot oldal om. Igaz, ki lehet venni külön fájl. De a kényelem kedvéért mindent egy fájlban csináltam.
Itt keveset lehet mondani, jobb, ha megnézzük ennek a hóesésnek a bemutatóját. Ezen kívül van egy nagyon szép háttér és a "Happy New Year" felirat gyönyörű betűtípus"Homár" a Google-tól. Ezt a fájlt könnyedén internetes képeslappá alakíthatja gratulációval.
A hulló hópelyhek forgatókönyvének összekapcsolása a kész oldallal
1. Tartalmazza a jQuery könyvtárat
Így kapcsolódik: címkék között
és illessze be a következő kódot:
2. Stílusok összekapcsolása
Illessze be a css kódot a css fájlba (általában style.css):
Hozzon létre egy snow.js fájlt, és illessze be oda a következő javascript kódot:
Helyezze be a js fájlt
:
4. Illessze be a html kódot
Nos, a legfontosabb dolog továbbra is megmarad - illessze be a hóesés html kódját bármely helyre
:
❄
Ha mindent jól csinált, akkor a hó elkezd esni a webhelyén.
Háttérkép, nagy fejléc és hulló hópelyhek összekapcsolása
Ez a változat abban különbözik, hogy van háttérképés egy nagy "Boldog Új Évet" felirat. A hóesés szkript ezen verziójának csatlakoztatása a webhelyhez meglehetősen egyszerű. Szükség:
1. Töltse le az archívumot, és csomagolja ki
2. Tartalmazza a jQuery könyvtárat
Ügyeljen arra, hogy tartalmazza a jQuery könyvtárat (nem szükséges, ha ez a könyvtár már benne van). Így kapcsolódik: címkék között
és illessze be a következő kódot:
3. Csatlakoztassa a "Lobster" betűtípust
A jQuery könyvtárhoz hasonlóan a "Boldog új évet" feliratú betűtípust is megadjuk:
Természetesen, ha nincs szüksége erre a feliratra és betűtípusra, akkor nem helyezheti be, de a css-ben távolítsa el a "font-family: "Lobster", cursive;" attribútumot a H1-ből, vagy cserélje ki saját betűtípusára
4. Stílusokkal együtt
A lehetőség. Illessze be a css kódot a css fájlba. Íme a kód:
B lehetőség. Létrehozhat egy külön fájlt is, például a snow.css-t, és oda illessze be ugyanazt a kódot, bár azt a következőképpen kell szerepeltetnie a fejben:
5. Csatlakoztassa a hulló hó scriptet
A lehetőség. Ehhez be kell szúrnunk az oldal aljára (bezárás előtt) a következő javascript kódot:
B lehetőség. Csakúgy, mint a css kódnál, a javascript is behelyezhető egy külön fájlba, és snow.js-nek is nevezhető, és bekerülhet a fejbe:
6. Töltse ki a háttérképet
Töltse fel a bg.jpg képet az archívumból a webhelye gyökerébe
7. Illessze be a html kódot
Nos, a legfontosabb dolog marad - beilleszteni a hulló hó html kódját:
Boldog új évet!
❄
A hulló hó szkript sikeresen csatlakoztatva. Mindenképpen nézze meg működés közben. Minden jót!
sushiandbox.ru A számítógép elsajátítása - Internet. Skype. Közösségi hálózatok. Leckék a Windowsról.
"; .
