Në skenar, në vend të flokeve të borës, ato bien në katrorë. Dëbora që bie në shabllonin e kartës përshëndetëse të Vitit të Ri jQuery ose html. Shtojcat e borës në rënie të Vitit të Ri për WordPress
Duke çaktivizuar përdorimin e JavaScript, nuk do të mund të shihni shembuj interesantë të përdorimit të tij!
Efekti i borës në rënie JavaScriptDuke përdorur gjuhën e programimit JavaScript, mund të krijoni një efekt shumë interesant të rënies së borës në faqen tuaj të internetit.
Për të bërë borën që bie në faqen time të internetit, unë lidha një skript mjaft të gjatë të borës me rënie në këtë faqe, të zbatuar duke përdorur kodin JavaScript.
Nëse duhet të shtoni efektin e rënies së borës në një sajt HTML, atëherë mjafton vetëm të konfiguroni këtë skript.
Skenari i borës në faqen e internetitDukshmëria e flokeve të borës - kodi i borës i shfaq ato në gjithçka "trupi" faqet e internetit, d.m.th. vepron në etiketë, duke i nxjerrë ato nga faqja nëse janë të vendosura. A nga poshtë Flokët e dëborës zhduken aty ku janë vendosur në shkrimin e borës.
Kufiri i poshtëm i dukshmërisë së flokeve të borës shkruhet në deklaratën if të funksionit të borës(), në rreshtin e 42-të të kodit, në shprehjen: if (y_pos[i] > lartësia - 89)( Kufiri i poshtëm i dukshmërisë së borës është më tej, aq më i vogël është numri i zbritur nga lartësia Nëse, në vend të numrit të treguar "89", vendosim, le të themi, "49", atëherë fijet e dëborës do të "rrotullohen" në figurën e shembullit dhe do të zhduken. mbrapa e tij shirit ndarës.
Numri i flokeve të borës vendoset në rreshtin e 14-të të kodit js të skriptit, në shprehjen: var col = Math.round(lartësi/25); Sa më i vogël të jetë numri i shkruar në këtë shprehje, aq më i madh është numri i borës.
Shpejtësia e borës rregullohet në rreshtin e 50-të të kodit, në shprehjen: setTimeout("snow()", 40); Shpejtësia e flokeve të borës është më e madhe, aq më i ulët është numri i vonesës.
** Për shembull, duke specifikuar një vlerë mjaft të vogël për këta numra, të themi "5", mund të organizoni një "reshje të vërtetë bore" në faqen e faqes tuaj të internetit. "Buran"!
Dhe përveç kësaj!
Mos harroni(!) në rreshtin e parë të kodit: var imgsrc="image/snow/snow.gif"; tregoni rrugën drejt figurës së dëshiruar të flokeve të dëborës.
Meqe ra fjala! Ju mund të tregoni me siguri NDONJE FOTO nga kjo dosje. Për hir të testimit, bëra dhe shkruajta fotografi: snow.gif ÷ snow6.gif (*interesant; të gjithë janë të ndryshëm), absolutisht PA çdo ndryshim në kodin e borës.
Në mënyrë që floket e borës të shpërndahen në mënyrë të barabartë në të gjithë lartësinë e faqes, është e RËNDËSISHME(!) ku të vendosni kodin JavaScript. Është më mirë të parandaloni "dridhjen" e rrotullës së poshtme të faqes duke futur kodin e skriptit të borës në fund të faqes. KONTROLLOHUAR!
**Dhe më tej! MOS SHQYRO kodin e skriptit në etiketë!!
. Ju shkoni në vend, dhe atje, bien borë ose fjolla dëbore, ju ndjeni frymën e festës dhe krijoni menjëherë një humor të mirë pushimi. Edhe pse bora është virtuale, prapë më gëzon. A jeni dakord? Mirë sigurisht. Pastaj, sot do t'ju tregoj - Si të shtoni, aktivizoni, instaloni borë ose borë në faqe.
Për këtë, ekzistojnë shtojca speciale me të cilat mund të aktivizoni rënien e borës ose flokeve të borës në faqe gjatë pushimeve, dhe për ata që kanë frikë nga modulet, ekziston një skript për rënien e borës në faqe. Unë do t'ju prezantoj skenarin në fund të postimit. Ndërkohë, shtojcat më të thjeshta që janë të përditësuara dhe të pajtueshme me versionin më të fundit të WordPress.
Shtojca Snow Flurry - po bie borë në faqen e WordPress
Një shtojcë e thjeshtë dhe plotësisht e personalizueshme. Me aftësinë për të instaluar: madhësinë maksimale të flokeve të dëborës; sa shpesh krijohen thekon të rinj; shtoni shpejtësinë minimale dhe maksimale të rënies së borës, ngjyrën e flokeve të borës dhe gjithashtu mundësinë për të çaktivizuar shtojcën pas një numri të caktuar sekondash. Pas instalimit dhe aktivizimit të shtojcës, një seksion me emrin e duhur do të shfaqet në panelin e administratorit:Super plugin WFS Let It Snow - shton reshjet e borës në faqen tuaj
Shtojca WFS Let It Snow
Një shtojcë e shkëlqyeshme për JQuery, me ndihmën e saj mund të krijoni një reshje të vërtetë bore në sit, domethënë një zbardhje. Në cilësimet, mund të zgjidhni llojin e reshjeve të borës nga katër opsione: e lehtë, e mesme, e rëndë dhe e bardhë. Dhe gjithashtu, bëni floke dëbore që bien vetëm në faqen kryesore ose në të gjitha ato; aktivizoni/çaktivizoni borën; madhësia minimale dhe maksimale e borës; shpejtësia minimale dhe maksimale e flakjes; aktivizoni hijet (për faqet e internetit me sfond të bardhë):
Konfigurimi i shtojcës WFS Let It Snow
Këtu, gjithashtu pas instalimit dhe aktivizimit të shtojcës, në seksionin e cilësimeve do të shfaqet nënseksioni Let It Snow, klikoni dhe konfiguroni. Le të vazhdojmë.
Stuhia e tmerrshme e borës - një stuhi dëbore në faqen tuaj
Kjo ndoshta është e gjitha me modulet për dekorimin e një faqe interneti me borë që bie, të cilave ia vlen t'u kushtoni vëmendje. Do të kem gjithashtu një stuhi dëbore në blog më afër Vitit të Ri. Është për të ardhur keq që nëse keni një sfond të lehtë të uebsajtit (edhe unë), do t'ju duhet ta ndryshoni borën e bardhë në diçka tjetër, për shembull: blu ose blu. Diçka e tillë. Pothuajse harrova, të gjitha shtojcat e paraqitura janë instaluar në mënyrën standarde, përmes panelit të administratorit - shtoni një shtojcë dhe shkruani emrin e saj në fushën e kërkimit.
Tani, për ata që nuk duan të ngatërrohen me shtojcat, një mënyrë e thjeshtë është si të instaloni borën që bie në një faqe interneti pa një shtojcë .
Skenari i borës që bie në vendSkripti i snowflakes në rënie është i përshtatshëm për çdo faqe interneti ose blog në çdo platformë. Thjesht duhet të ndërhyni (skripti duhet të ngarkohet në hostin tuaj), mund të përdorni hostin tuaj ku ndodhet faqja juaj, ose mund të përdorni një të palës së tretë, për shembull: falas dhe Google Drive. Dhe këtu është kodi i skriptit:
/* Snow Fall 1 - pa imazhe - Java Script Vizitoni http://rainbow.arch.scriptmania.com/scripts/ për këtë skenar dhe shumë të tjera */ // Caktoni numrin e flokeve të dëborës (më shumë se 30 - 400 nuk rekomandohen) var snowmax=100 // Cakto ngjyrat për borën. Shtoni sa ngjyra të doni var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5") // Vendosni fontet që krijojnë fjokat e borës. Shtoni sa më shumë shkronja të doni var snowtype=new Array("Times") // Vendosni shkronjën që krijon flok dëbore (rekomandohet: *) var snowletter="*" // Caktoni shpejtësinë e fundosjes (vargu i vlerave të rekomanduara nga 0,3 në 2) var sinkspeed=0,6 // Cakto madhësinë maksimale të flokeve të dëborës var snowmaxsize=35 // Cakto madhësinë minimale të flokeve të dëborës var snowminsize=8 // Cakto zonën e borës // Vendos 1 për të gjithë -mbi -borë, vendos 2 për borë në anën e majtë // Set 3 për borë në qendër, vendos 4 për borë në anën e djathtë var snowingzone=1 //////////////// // //////////////////////////////////////////////////////////////////////// /////// // KONFIGURIMI PËRFUNDON KETU ////////////////////////////////////////////////////////////// ///////////////////////////////// // Mos e modifikoni nën këtë rresht var snow=new Array () var marginbottom var marginright var timer var i_snow=0 var x_mv=array i ri(); var crds=array i ri(); var lftrght=array i ri(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/5)| ns6||funksioni opera randommaker(range) ( rand=Math.floor(range*Math.random()) return rand ) funksioni initsnow() ( if (ie5 || opera) ( marginbottom = document.body.scrollHeight marginright = dokument .body.clientWidth-15 ) other if (ns6) ( marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 ) var snowsizerange=snowmaxsize-snowminsize for (i=0;i(marginright-3*lftrght[i] ))( nëse (zona e borës==1) (bora[i].posx=randommaker(marginright-borë[i].madhësia)) nëse (zone bore==2) (borë[i].posx=randommaker(marginright/2 -borë[i].madhësia)) nëse (zona e borës==3) (bora[i].posx=prodhuesi i rastësishëm(marginright/2-bora[i].madhësia)+diferenca e drejtë/4) nëse (zona e borës==4) ( për (i=0;i= strtotime ("2015-12-01" ) && kohë () ne e lidhim skriptin tonë me këtë rresht:
|
Për qartësi, do t'ju tregoj se ku e kam futur:
Sigurohuni që të ruani të gjitha ndryshimet dhe kjo është ajo që duhet të merrni në sit:
Tani mund të "luani" me flokët tona të dëborës në sit, domethënë të vendosni shpejtësinë, madhësinë, numrin e vetë flokeve të dëborës dhe parametra të tjerë. Për ta bërë këtë, ne duhet të bëjmë ndryshime të vogla në skenar.
Ngjitni kodin e mëposhtëm më poshtë në zonën e futbollit:
snowStorm.snowColor = "#99ccff"; // snowflakes kaltërosh, ngjyra mund të ndryshohet Storm.flakesMaxActive = 100; // Trego numrin e flokeve të borës në faqen SnowStorm.useTwinkleEffect = e vërtetë; // efekt dridhje
Në shabllon gjithçka do të duket kështu:
Tani le të shohim se çfarë ndodh në shfletuesin:
Siç mund ta shohim, flokët tanë të borës në sit janë bërë një ngjyrë e butë kaltërosh, duket si reshje e vërtetë bore në vend :)
Cilësimet e tjera të skriptit të flokeve të borësPër të ngatërruar edhe më shumë skenarin, do të kaloj nëpër opsione të tjera.
stuhi bore. autoStart = e vërtetë; — zgjidhni nëse bora do të shfaqet automatikisht kur faqja të ngarkohet apo jo.
stuhi bore. animacionInterval = 33 ; — matja e intervalit të milisekondave për kornizë. Me vlerë = 20 është i shpejtë dhe i qetë, por do të ngarkojë procesorin. Nëse vendosni = 50, atëherë është më konservatore, por më e ngadaltë.
stuhi bore. flakeBottom = null ; — kufizimi i ngjitjes së borës në fund të faqes. Nëse nuk specifikohet, bora thjesht do të ngjitet në fund të faqes së faqes dhe do të zhduket me lëvizje ose lëvizje.
stuhi bore. flakesMax = 128; — vendosja e numrit maksimal të borës që bien në çdo pjesë të faqes për njësi të kohës.
stuhi bore. flakesMaxActive = 64; — vendos kufirin e rënies së flokeve të borës (d.m.th. lëvizja në ekran dhe konsiderohet aktive).
stuhi bore. followMouse = e vërtetë; — lejon që dëbora të lëvizë në vend me "erën" në lidhje me lëvizjen e miut përgjatë boshtit X (djathtas/majtas).
stuhi bore. freezeOnBlur = e vërtetë; — ne ndalojmë efektin e flokeve të borës kur përdoruesi aktualisht del nga dritarja e shfletuesit, për shembull, kalon në një skedë tjetër, pastaj bora ndalon. Kjo kursen CPU-në dhe është më e këndshme për përdoruesin.
stuhi bore. borëNgjyra = "#fff" ; — ngjyra e bardhë e borës (mos hani ose përdorni borë të verdhë në vend :-))
stuhi bore. borëKarakter = " " ; — . ( ) = plumb. · entiteti (·) nuk përdoret sepse konsiderohet katror në disa sisteme. Çdo ndryshim mund të shkaktojë prerjen e fjollës sonë të borës dhe gjithashtu mund të shkaktojë ndryshimin e gjerësisë/lartësisë së flakeve, prandaj kini kujdes.
stuhi bore. Shkop dëbore = e vërtetë; — parametri lejon që floket e dëborës të "ngjiten" në fund të ekranit kur fiken, bora nuk do të vendoset kurrë në fund të ekranit.
stuhi bore. targetElement = null ; - këtu është pak më e ndërlikuar, e kuptova pasi elementi html është shkruar si parazgjedhje në trupin e dokumentit (trupin). Mund të jetë një element ID i vargut, si p.sh. 'myDiV' ose një referencë DOM. Diçka si kjo.
stuhi bore. useMeltEffect = e vërtetë; — me mbështetjen e këtij parametri, bora e rënë do të shkrihet kur vlera të ndizet.
stuhi bore. useTwinkleEffect = e vërtetë; — lejon që bora të dridhet nga shikimi ndërsa bie.
stuhi bore. usePositionFixed = false; - nëse vlera boolean është e vërtetë - dritarja lëvizëse nuk do të ndikojë në rënien e borës, d.m.th. do të vazhdojë dhe do të vazhdojë. Kjo rrit ndjeshëm ngarkesën në procesor. Parazgjedhja është false.
stuhi bore. vMaxX = 8; stuhi bore. vMaxY = 5; - vlera e shpejtësisë së flokeve të borës në x dhe y për stuhinë. Një ndryshore e rastësishme në këtë diapazon zgjidhet për çdo fjollë dëbore.
Kjo është e gjitha, të dashur miq, është shumë e mundur që kam bërë një gabim diku në shpjegimin e cilësimeve të skenarit, atëherë ju lutem më korrigjoni. Në përgjithësi, gjithçka funksionon mirë për mua dhe është e këndshme për syrin. Faleminderit për vëmendjen tuaj, pres me padurim komentet dhe diskutimet tuaja. Unë kam një pyetje për ju - çfarë efekti përdorni për faqen kur vjen dimri? 🙂
Dekorimi i blogut tuaj për Vitin e Ri. Unë sjell në vëmendjen tuaj një widget të vjetër, por jo të harruar dhe të dashur nga blogerët, FALLING SNOWFLAKES.
Duke ecur nëpër internet, hasa në një blog të mrekullueshëm dhe lexova këtë tekst në artikull: "Unë jam një ushtar i vjetër dhe nuk di fjalë dashurie dhe kjo është arsyeja pse nuk kam shtuar fjolla dëbore në blogun tim, është disi jo dinjitoze.”
Autori ka bërë një postim për këtë temë, që do të thotë se të gjithëve u pëlqen bukuria dhe të gjithë jemi fëmijë në zemër dhe i presim festat me admirim dhe duam një festë jo vetëm në botën reale, por edhe në atë virtuale. Me të vërtetë, kur lexova fjalët e autorit, më erdhën në mendje fjalët nga kënga e Valery Leontyev: "Të gjithë duan të duan, si një ushtar ashtu edhe një marinar. Të gjithë duan të kenë një nuse dhe një mik. Të gjithë duan të duan, si ushtarët, ashtu edhe marinarët, vetëm ditët janë të vështira, vetëm ditët tona janë stuhi, stuhi.
Por këto janë tekste dhe ujë të panevojshëm në tekst. Unë vetë, si një sorrë, adhuroj të gjitha llojet e veglave në internet: emoticons, gifs, widget, vegla dhe me kënaqësi të madhe do të ndaj njohuritë e mia me ju, të dashur lexues.
Si të instaloni veglën Falling SnowflakesShkoni te Paneli Administrativ i Blogger > Dizajni > Shto vegël HTML/JavaScript. Ngjit kodin në dritare.
Pas futjes së kodit në vegël, këshillohet ta ngrini atë sa më lart që të jetë e mundur. Kjo nuk është e vështirë për t'u bërë, kapni vegël HTML/JavaScript me butonin e majtë të miut dhe tërhiqeni nën shabllon dhe lëshojeni, nuk funksionoi herën e parë, përsërisni përsëri.
Ka mbetur shumë pak kohë para dimrit dhe një numër i madh webmasterësh kanë filluar të krijojnë atmosferën e duhur në faqet e tyre. Me këtë rast, ne paraqesim përzgjedhjen tonë të efekteve të borës për faqen tuaj të internetit.
jSnow – skript universal i borës që bie në jQueryNe do të fillojmë përzgjedhjen tonë me një efekt shumë të bukur bore, i cili shtohet në faqe duke përdorur një shtojcë të quajtur "jSnow".
Demonstrimi:
Dakord - e bukur!
Për të instaluar këtë efekt në faqen tuaj të internetit, bëni sa më poshtë.
1. Shkarkoni arkivin jsnow.zip në fund të artikullit. Shkëputni dhe ngarkoni përmbajtjen në faqen tuaj të internetit nëpërmjet FTP ose një metode tjetër të përshtatshme për ju.
Fatkeqësisht, skripti nuk funksionon me versionet e reja të jQuery, kështu që ne jemi të kënaqur me atë që kemi.
3. Përpara Përdorni etiketën mbyllëse për të përfshirë skriptet:
$(document).ready(function() ( $("body").jSnow(( vMadhësia: 100, // Madhësia e zonës së thekoneve: 30, // Numri i flokeve të borës flakeNgjyra: ["#fff"], // Ngjyra flakeMinSize : 10, // Madhësia minimale e një flok dëbore, Madhësia maksimale: 20, // Madhësia maksimale e një flok bore që bieShpejtësiaMin: 1, // Shpejtësia minimale e rënies së një flok dëboreShpejtësiaMaksimi: 2, // Shpejtësia maksimale e një flok dëbore:["Code: ] // Lloji i borës ));
Ky kod rregullon madhësinë e borës, lartësinë e zonës që zënë, ngjyrën dhe parametrat e tjerë të komentuar.
Skenari, siç e kuptoni, është universal, dhe në vend të borës së rrumbullakët mund të shtoni yje, për shembull, si kjo:
FlakeCode:["*"] // Pamja e flokeve të borës
Ose një tufë dëbore e rrumbullakët dhe yje:
FlakeCode:[".", "*"] // Pamja e flokeve të borës
Si dhe çdo simbol tjetër (dhe madje edhe shenja e dollarit - $).
Skenari është i shkëlqyeshëm për të dekoruar pjesën e sipërme të faqes pa mbivendosje të përmbajtjes kryesore.
Snowstorm – një skenar i zgjuar i borës që bie në JavaScriptPse i zgjuar, ju pyesni? Sepse në këtë skenar (ndryshe nga të tjerët të diskutuar në këtë artikull) ka një efekt shtesë të zmbrapsjes së flokeve të dëborës. Kjo do të thotë, kur lëvizni kursorin e miut në faqen tuaj, flokët e dëborës nxitojnë në drejtim të kundërt nga ai. Sa më larg të jetë kursori nga mesi i ekranit, aq më shpejt lëvizin fjokat e borës.
Demonstrimi:
Për të instaluar këtë efekt në faqen tuaj, nuk kërkohen biblioteka shtesë. Gjithçka që duhet të bëni është:
1. Shkarkoni arkivin snowstorm.zip në fund të artikullit. Shkëputni dhe ngarkoni përmbajtjen në faqen tuaj në një mënyrë të përshtatshme për ju.
window.onload = funksion() ( snowStorm.snowColor = "#fff"; // Ngjyra e flokeve të borës Storm.flakesMaxActive = 100; // Numri maksimal i flokeve të dukshme dëbore Storm.followMouse = e vërtetë; // e vërtetë - ndjek kursorin, false - pa SnowStorm.snowCharacter = "." // Lloji i flokeve );
Nëse është e nevojshme, bëni ndryshime në animacionin e skenarit.
Përveç faktit që flokët e dëborës janë larguar nga kursori, disa prej tyre ngjiten në fund të ekranit, duke krijuar një përshtypje të lehtë të borës që formojnë një rrëshqitje dëbore.
Reshjet e borës – efekti i rënies së borës me reshje dëbore duke përdorur jQueryMë pëlqen më shumë ky skenar, sepse zbaton kokrra të holla bore dhe gjithashtu mbledh rrëshqitje të vogla dëbore në elementët e specifikuar.
Demonstrimi:
Ky efekt kërkon pak më shumë kohë për t'u instaluar se të tjerët.
1. Nëse faqja juaj nuk ka bibliotekën jQuery, përfshijeni atë në seksionin HEAD:
3. Caktoni klasën “darkBg” në etiketën hapëse:
4. Përpara përfshini skriptet me etiketën mbyllëse:
$(document).ready(funksion() (dokument.body.className = "darkBg"; $(document).snowfall((mbledhja: ".collectonme", Numri i flakeve: 200 // Numri i flokeve të borës )); ));
5. Dhe në fazën përfundimtare, caktoni një klasë për ata elementë mbi të cilët duhet të formohen shirat e dëborës:
Class="collectonme"
Nëse nuk dëshironi që rrëshqitjet e dëborës të formohen në sit, hiqni rreshtin nga skenari:
Koleksioni: ".collectonme",
Ky është një veprim i detyrueshëm, përndryshe bora nuk do të bjerë në faqen tuaj.
Skrip i shkëlqyeshëm, kjo është pikërisht ajo që kemi përdorur në faqen tonë të internetit më parë.
Efekti me shtresa të lëmuara të borës në rënie duke përdorur CSS3Këtu, siç e kuptoni, ne nuk do të përdorim të gjitha llojet e skripteve, por do të mjaftohemi me CSS të pastër.
Demonstrimi:
Magjike, apo jo?
Për të instaluar këtë efekt për veten tuaj, ndërmerrni tre hapa të thjeshtë.
1. Shkarkoni arkivin snow_img.zip në fund të artikullit. Shkëputni dhe ngarkoni përmbajtjen në faqen tuaj nëpërmjet FTP ose përmes menaxherit të skedarëve pritës.
2. Në skedarin tuaj të stilit, futni (mundësisht në fund):
SnowContainer ( gjerësia: 100%; lartësia: 100%; pozicioni: absolute; lart: 0; majtas: 0; z-indeksi: -1; ) #borë ( gjerësia: 100%; lartësia: 100%; imazhi i sfondit: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png" -webkit-animation: borë 20s linear infinite; -ms-animacion: borë 20s linear infinite: borë 20s linear infinite ) @keyframes borë ( 0% (background-position: 0px, 0px 0px; ) 100% (background-position : 500px 400px, ; 300 px; korniza kyçe borë ( 0% ( pozicioni i sfondit: 0 pik. 0 pik., 0 pik. 0 pik., 0 pik. 0 pik. pozicioni: 0px 0px, 0px 0px, 0px 0px ) 100% (në sfond: 500px 1000px, 400px 400px, 300px 300px; ))
Pastaj ruani të gjitha ndryshimet.
Këtu është një përzgjedhje e mirë e efekteve të borës që padyshim do të kënaqin vizitorët e faqes suaj të internetit.
