I manuset faller de i firkanter i stedet for snøfnugg. Fallende snø på jQuery eller html nyttårskortmal

Det er veldig enkelt å dekorere nettsiden din før jul og nyttår. Installer skriptet og vakre snøfnugg vil dukke opp på nettstedet.

Hvordan installere snøfnugg på nettstedet ditt

Hvis du ikke vil bry deg med å laste ned en fil og laste den opp til vertstjenesten din, kan du ganske enkelt legge til én linje i malen på nettstedet.

Før den avsluttende taggen, sett inn følgende kode:

Men hvis du vil lære hvordan du installerer et skript med snøfnugg på nettstedet ditt eller konfigurerer det (selv om dette ikke er nødvendig, det er mulig), anbefaler jeg å fortsette å lese.

Last ned skript

Etter å ha klikket på en av knappene nedenfor, vises en lenke for å laste ned filen.

Webmastere dekorerer nettsider

Mot slutten av hvert år prøver webansvarlige og nettstedeiere sitt beste for å dekorere nettsidene sine for å matche nyttårstemaet. En festlig atmosfære og en følelse av noe uvanlig skapes.

Det viktigste er ikke å overdrive det

Brukervennlighetseksperter advarer om at du ikke bør glemme at hvis du radikalt endrer utformingen av nettstedet, i dette tilfellet for nyttårstemaet, kan du miste kunder. Statistikk viser dette.

Faktum er at brukere som er vant til utformingen av nettstedet ditt kanskje rett og slett ikke liker innovasjonene, eller de vil kanskje ikke bruke tiden på å venne seg til det nye grensesnittet og vil derfor forlate nettstedet. Dette vil redusere konverteringen av besøkende til kjøpere.

Hvordan dekorere en nettside før nyttår

Den enkleste og mest smertefrie endringen kan være å bruke effekten av fallende snøfnugg.

Relatert artikkel: Hvordan koble Yandex.Speller til WordPress

Jeg brukte mye tid på å finne ferdige skript for fallende snøfnugg på Internett. Jeg klarte likevel å finne et manus med veldig fine. Det er dette jeg vil fortelle deg om.

Den første versjonen av manuset med snøfnugg. Ikke last ned denne versjonen av skriptet - det er rått.

Manus "Fallende snøfnugg"

Hvordan er det forskjellig fra andre skript som genererer snøfnugg? Faktum er det fallende snøfnugg er ikke bilder. Fallende snøfnugg er vanlige skrifttegn (stjerner "*"). Det vil si at formen på snøflakene avhenger av skrifttypen som er spesifisert i innstillingene. Du kan velge hvilken som helst annen standardfont og da blir snøfnuggene annerledes.

I tillegg til formen på snøfnugg, kan du også stille inn farge, størrelse, antall og fallhastighet.

Skriptinnstillinger: farge, form, størrelse og antall snøflak // Still inn antall snøflak (mer enn 30 - 40 anbefales ikke) var snowmax=35 // Still inn fargene for snøen. Legg til så mange farger du vil var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5") // Still inn fontene som lager snøflakene. Legg til så mange fonter du vil var snowtype=new Array("Times") // Angi bokstaven som lager snøfnugget ditt (anbefalt: *) var snowletter="*" // Still inn synkehastigheten (anbefalt verdiområde fra 0,3 til 2) var sinkspeed=0,6 // Sett maksimumsstørrelsen på snøfnuggene dine var snowmaxsize=35 // Still inn minimumsstørrelsen på snøfnuggene dine var snowminsize=8 // Sett snøfnuggene dine // Sett 1 for alle -over -snøing, sett 2 for snø på venstre side // Sett 3 for snø i midten, sett 4 for snø på høyre side var snowingzone=1

Manuset er borgerlig og kommentarene er på engelsk. Men programmerere har engelsk som morsmål. Jeg håper det ikke vil være noen vanskeligheter med dette.

Kjente problemer med skriptet

Det originale manuset er ikke uten feil. Men alle av dem har allerede blitt eliminert.

På en widescreen-skjerm fylte ikke snøfnugg hele det tilgjengelige området. Jeg er ikke spesielt bevandret i Java-script. Derfor ba jeg min talentfulle venn Denis Balykin, kjent på nettet under kallenavnet BaDeVlad, om å rette feilen i dette manuset. Han fant raskt ut andres kode og redigerte den etter behov.

Manuset hadde en veldig alvorlig feil. Skriptet fungerte ikke bare i Doctype Strict, men støttet heller ikke nettstandarder i det hele tatt. Jeg prøvde alle doctypes - ingen av dem tillot nedbør i form av snø. Senere, i kommentarene, ga Alexey Yudin en oppskrift for å kurere denne alvorlige sykdommen. Det var nødvendig å spesifisere måleenhetene ved å legge til +"px" på slutten av noen linjer;

Hvordan koble et skript med snøfnugg til hostingen din

Last ned skriptet og plasser det på hostingen din.

Angi plasseringen der skriptet er plassert med følgende konstruksjon

For eksempel, hvis du legger skriptet i js-mappen, som ligger i roten av nettstedet ditt, vil koblingen av skriptet være slik: legg til denne linjen i nettstedsmalen, for eksempel før body-taggen:

høyde - 89)(Den nedre grensen for synlighet for snøfnugg er lenger, jo mindre tallet trekkes fra høyden. Hvis vi, i stedet for det angitte tallet "89", setter, for eksempel, "49", vil snøfnuggene "snurre" ” i eksempelfiguren og forsvinner allerede bak hans delestrimmel.

Antall snøflak er satt i 14. linje i js-koden til skriptet, i uttrykket: var col = Math.round(height/25); Jo mindre tallet som er skrevet i dette uttrykket, desto større antall snøflak.

Hastigheten til snøfnugg justeres i den 50. kodelinjen, i uttrykket: setTimeout("snow()", 40); Hastigheten til snøfnugg er større, jo lavere forsinkelsestallet er.

** For eksempel, ved å spesifisere en ganske liten verdi for disse tallene, si "5", kan du arrangere et "ekte snøfall" på siden til nettstedet ditt. "Buran"!

Og i tillegg til det!

Ikke glem(!) i den første kodelinjen: var imgsrc="image/snow/snow.gif"; angi stien til ønsket snøfnuggbilde.

Forresten! Du kan trygt indikere HVERT BILDE fra denne mappen. For testens skyld tok jeg og skrev ned bilder: snow.gif ÷ snow6.gif (*interessant; de er alle forskjellige), absolutt UTEN eventuelle endringer i snøkoden.

For at snøfnuggene skal fordele seg jevnt over hele sidens høyde, er det VIKTIG(!) hvor du setter inn JavaScript-koden. Det er best å forhindre at den nederste rullingen av siden "rykker" ved å sette inn snøskriptkoden helt på slutten av siden. KRYSSET AV!
**Og videre! IKKE SETT skriptkode inn i taggen! VIRKER IKKE!

Å dekorere nettsidene og bloggene dine i løpet av nyttår og juleferie er en god ting. Det er hyggelig å besøke selv slike nettsteder :).

Bloggen min er intet unntak, den har også blitt forvandlet for denne vinterferien. Du har sikkert lagt merke til den nye logoen, som jeg ikke kan skryte av å ha skrevet et innlegg om, den er for tiden pyntet med et juletre og støvet med snø.

Før hadde jeg aldri installert skript for fallende snøfnugg på et nettsted, fordi jeg så dette miraklet på andre nettsteder, og for å være ærlig likte jeg det ikke, og noen ganger irriterte det meg til og med.

Nylig dukket det opp en ny funksjon på Google. Jeg rapporterte om det i - dette er fallende snø og en frossen skjerm, som du deretter kan slette med fingeren. Prøv det, skriv inn søket "i søkemotoren" la det snø ”.

Jeg likte denne tilnærmingen av to grunner:

1 . Ser veldig fint ut;

2. Snø begynner å falle kun på brukerens forespørsel.

Dette er en type dekorasjon jeg liker. Men jeg vil ikke kunne implementere frysing av skjermen - jeg er ikke en programmerer, jeg vil bestille den fra en programmerer, men jeg er ikke sikker på at det vil bli gjort i tide til dette nye året. Men med fallende snø i Google-stil og "etter ordre" fra den besøkende - dette er mulig :). Sant, igjen, ikke på egen hånd, men med hjelp av en god "utlending" :), men det er ikke poenget.

Før jeg introduserer deg for snø på bloggen min, la oss først kort huske noen få WordPress-plugins som genererer god snø for nettstedet.

Nyttårs Falling Snow Plugins for WordPress

En veldig god plugin. Det er ganske mange forskjellige innstillinger: animasjonshastighet, farge på fallende snø, størrelse på flak, antall samtidig fallende snøflak, osv. Det er til og med noe som å fryse, men jeg kunne ikke få det til å fungere :(.

Ved første øyekast ser snøen på stedet ikke dårlig ut, prøv det, kanskje du liker det.

Men denne plugin-en fungerte ikke for meg. For det første liker jeg egentlig ikke plugins og bruker dem bare når det er absolutt nødvendig, og for det andre begynner snøen å "falle" umiddelbart etter at siden er lastet inn (husker du det andre punktet?) og distraherer noen ganger fra hovedinnholdet på nettstedet ( fluer blinker foran øynene mine, pokker :)), og snøfnuggene er alle like store.

De sier det er en god plugin. Av en eller annen grunn startet den ikke for meg, selv om den installerte fint, men det var ingen snø :). Prøv det, kanskje du klarer det bedre.

Denne pluginen lager akkurat den samme snøen som jeg har nå. Det er ingen spesielle innstillinger, bare sett den opp og det begynte å snø. Selv om du, hvis du vil, fortsatt kan tilpasse enkelte ting (farger, hastighet, etc.) i plugin-editoren, dvs. ved å redigere selve plugin-filen.

Alt ville være bra, men ulempene er de samme som før: det er fortsatt en plugin, selv om det ikke er "tungt", og det snør konstant, selv om brukeren generelt ikke trenger det.

Denne plugin-en kan kalles en universell ferie-plugin. I tillegg til selve snøen kan dette manuset også slippe oppblåsbare baller og alle slags løv :).

En veldig interessant plugin...jeg ønsket til og med å installere den. Men... jeg har allerede min egen snø :).

Snø på stedet på forespørsel fra bruker

Dette er faktisk løsningen som etter min mening er den beste av alle de som er oppført ovenfor. Selvfølgelig er ikke alt her like kult som i den samme "Snø, ballonger og mer", men enklere betyr ikke verre.

Den viktigste fordelen med dette skriptet er "snø på bestilling". Snø vil ikke falle av seg selv, det må forårsakes ved å trykke på en knapp. På denne måten vil den besøkende ikke bli stresset over de hvite flakene på skjermen som uendelig forstyrrer lesingen. Hvis han vil ha snø, vil han se det.

For å komme i gang, last ned disse filene og last dem opp til serveren din i ønsket mappe: , . Forresten, knappen ser slik ut:

Skriv deretter banen til skriptene mellom taggene:

< script type= "text/javascript" src= "путь/jquery.min.js?ver=1.7" > < script src= "путь/jquery.letsinsnow.js" >

Vær oppmerksom på at hvis du allerede har jquery-biblioteket inkludert, trenger du ikke å aktivere det på nytt i det hele tatt. Så er det bare å skrive banen til jquery.letsinsnow.js.

I filen jquery.letsinsnow.js på linje 15 ('color' : '#79B3EC',) kan du endre fargen på snøfnuggene. Jeg tror resten kan stå som standard ;).

Alt som gjenstår er å legge til en knapp på siden, ved å klikke hvilken snø som faller. For å gjøre dette må du følge et par enkle trinn:

1 . Plasser knappekoden på ønsket sted på siden:

< input name= "snowbutton" TYPE = "button" onclick= "$("body").snowFall();" title= "Snøfnugg!" class= "snowbutton" />

Jeg har en knapp i bloggoverskriften. Det er derfor jeg la til koden i header.php-filen til WordPress-malen min.

2. Legg til følgende stil i stilfilen (vanligvis style.css):

.snowbutton ( bakgrunn : url ( "snowflake.png") 100 % ingen repetisjon ; bredde : 64px ; høyde : 64px ; overløp : synlig ; marg-topp : 80px ; margin-venstre : 740px ; kantlinje : 0 kantlinje ; ;)

Her må du justere et par parametere:

— bane til knappebildet: background:url("snowflake.png") 100 % ingen repetisjon;.

— plassering av knappen på nettstedet: margin-top:80px;(innrykk øverst på skjermen) og margin-venstre:740px;(innrykk til venstre).

Selvfølgelig kan du skrive helt andre stiler og bruke en annen knapp. Jeg ga nettopp et eksempel som jobber på bloggen min for øyeblikket.

Prøv det forresten. Knappen er plassert i bloggoverskriften, ved siden av søkeskjemaet:

Lykke til til dere venner! Godt nytt år og god jul!

Godteri for i dag: Fin melodi, fin sang, fin julevideo. Nyt :)

Det er veldig kort tid igjen før vinteren, og et stort antall nettredaktører begynner å skape den rette atmosfæren på sidene sine. I denne anledning presenterer vi vårt utvalg av snøeffekter for din nettside.

jSnow – universelt fallende snøskript i jQuery

Vi vil starte utvalget vårt med en veldig vakker snøeffekt, som legges til nettstedet ved hjelp av en plugin kalt "jSnow".

Demonstrasjon:

Enig - vakkert!

For å installere denne effekten på nettstedet ditt, gjør følgende.

1. Last ned jsnow.zip-arkivet på slutten av artikkelen. Pakk ut og last opp innholdet til nettstedet ditt via FTP eller en annen metode som er praktisk for deg.

Dessverre fungerer ikke skriptet med nye versjoner av jQuery, så vi er fornøyd med det vi har.

3. Før Bruk den avsluttende taggen for å inkludere skript:

$(document).ready(function() ( $("body").jSnow(( vStørrelse: 100, // Flakes områdestørrelse: 30, // Antall snøflak flakeFarge: ["#fff"], // Farge flakeMinSize : 10, // Minimum størrelse på et snøfnugg flakeMaxSize: 20, // Maksimal størrelse på et snøfnugg fallingSpeedMin: 1, // Minimum speed of a snowflake fallingSpeedMax: 2, // Maksimal hastighet på et snøfnugg flakeCode:["." ] // Type snøfnugg )); ) );

Denne koden justerer størrelsen på snøflakene, høyden på området de okkuperer, farge og andre kommenterte parametere.

Manuset, som du forstår, er universelt, og i stedet for rund snø kan du legge til stjerner, for eksempel slik:

FlakeCode:["*"] // Snøfnuggutseende

Eller en haug med rund snø og stjerner:

FlakeCode:[".", "*"] // Snøfnuggutseende

I tillegg til et hvilket som helst annet symbol (og til og med dollartegnet - $).

Skriptet er flott for å dekorere toppen av nettstedet uten å overlappe hovedinnholdet.

Snowstorm – et smart fallende snøskript i JavaScript

Hvorfor smart, spør du? Fordi i dette manuset (i motsetning til andre diskutert i denne artikkelen) er det en ekstra effekt av å avvise snøflak. Det vil si at når du flytter musepekeren på nettstedet ditt, suser snøflak i motsatt retning fra den. Jo lenger markøren er fra midten av skjermen, jo raskere beveger snøfnuggene seg.

Demonstrasjon:

For å installere denne effekten på nettstedet ditt, kreves det ingen ekstra biblioteker. Alt du trenger å gjøre er:

1. Last ned snowstorm.zip-arkivet på slutten av artikkelen. Pakk ut og last opp innhold til nettstedet ditt på en måte som passer deg.

window.onload = function() ( snowStorm.snowColor = "#fff"; // Farge på snøfnugg snowStorm.flakesMaxActive = 100; // Maksimalt antall synlige snøfnugg snowStorm.followMouse = true; // true - jage markøren, usant - no snowStorm.snowCharacter = "."; // Type snøfnugg );

Gjør om nødvendig endringer i skriptanimasjonen.

I tillegg til at snøfnuggene skyves bort fra markøren, fester noen av dem seg til bunnen av skjermen, og skaper et lite inntrykk av at snøfnuggene danner en snøfonn.

Snøfall – effekten av fallende snø med snøfonner ved hjelp av jQuery

Jeg liker dette manuset best, fordi det implementerer fine snøkorn og samler også små snøfonner på de angitte elementene.

Demonstrasjon:

Denne effekten tar litt lengre tid å installere enn andre.

1. Hvis nettstedet ditt ikke har jQuery-biblioteket, inkluderer du det i HEAD-delen:

3. Tilordne klassen "darkBg" til åpningstaggen:

4. Før inkludere skriptene med den avsluttende taggen:

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((samling: ".collectonme", flakeCount: 200 // Antall snøflak )); ));

5. Og på det siste stadiet, tilordne en klasse til de elementene som snøfonner skal dannes over:

Class="collectonme"

Hvis du ikke vil ha dannelsen av snøfonner på stedet, fjern linjen fra skriptet:

Samling: ".collectonme",

Dette er en obligatorisk handling, ellers vil det ikke falle snø på nettstedet ditt.

Utmerket manus, dette er akkurat det vi brukte på nettsiden vår før.

Glatt lagdelt fallende snøeffekt ved bruk av CSS3

Her vil vi, som du forstår, ikke ty til å bruke alle slags skript, men nøye oss med ren CSS.

Demonstrasjon:

Magisk, ikke sant?

For å installere denne effekten selv, ta tre enkle trinn.

1. Last ned snow_img.zip-arkivet på slutten av artikkelen. Pakk ut og last opp innholdet til nettstedet ditt via FTP eller gjennom filbehandleren din.

2. I stilfilen din setter du inn (helst helt nederst):

SnowContainer ( bredde: 100 %; høyde: 100 %; posisjon: absolutt; topp: 0; venstre: 0; z-indeks: -1; ) #snø (bredde: 100 %; høyde: 100 %; bakgrunnsbilde: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animasjon: snø 20s lineær uendelig; -moz-animasjon: snø 20s lineær uendelig; -ms-animasjon: snø 20s lineær uendelig; animasjon: snø 20s lineær uendelig; ) @keyframes snø ( 0% ( bakgrunnsposisjon: 0px 0px, 0px 0px, 0px 0px; ) 100% ( bakgrunnsposisjon : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes snø ( 0% (bakgrunnsposisjon: 0px 0px, 0px 0px, 0px 0px; (0px 0px; 0px 0px; 0px 0px; 0px 0px; 0 posisjon 100px; 0px 0:0px) x 400px, 300px 300px; ) ) @-webkit-keyframes snø ( 0% (bakgrunnsposisjon: 0px 0px, 0px 0px, 0px 0px; ) 100% (bakgrunnsposisjon: 500px 1000px, 400px 4000px,-3 000px, - ms) keyframes snø ( 0 % (bakgrunnsposisjon: 0px 0px, 0px 0px, 0px 0px; ) 100 % (bakgrunnsposisjon: 500px 1000px, 400px 400px, 300px 300px; ) )

Lagre deretter alle endringer.

Her er et godt utvalg av snøeffekter som utvilsomt vil glede de besøkende på nettstedet ditt.