JQuery või html uusaasta õnnitluskaardi mallil sajab lund. JQuery või html uusaasta õnnitluskaardi mallis sajab lund alla. Täitke taustapilt

Tere kõigile! Täpselt kolm aastat tagasi ma juba kirjutasin ,. Kuid nagu selgus, osutusid minu pakutud skript ja selle installimise viis paljudele minu ajaveebi lugejatele täiesti arusaamatuks. Mind ujutati sõna otseses mõttes küsimustega üle, sest sel juhul oli vaja kirjutada koodile täiendusi, laadida faile juurkausta ... Muidugi pidin ma aitama kõiki, kes ühendust võtsid, ja see, nagu te ise aru saate, võttis palju aega.

Kuid nagu öeldakse, aeg ei seisa paigal. Just eile leidsin meie kõiketeadva Interneti avarustes kogemata suurepärase skripti ja nüüd tean veel üht viisi, kuidas saidile langevaid lumehelbeid paigaldada. Lõbu pärast proovisin ära. Tulemusi näete ise. Skript ei aeglusta saidi lehtede laadimise kiirust, sobib peaaegu igale CMS-ile, ei häiri lugejaid - see lihtsalt loob hea tuju!

Neile, kellele need langevad lumehelbed meeldisid, ütlen teile nende "tegemise" üksikasjad. Ja nende valmistamiseks kasutatakse seda väikest skripti:

Ja see ongi kõik! Enam pole failikaustu ega üksikuid faile. Piisab selle koodi seadistamisest kohe pärast avamärgendit ja uusaasta meeleolu on juba teiega.

Kuid kõik teemad on erinevad ja minu puhul pidin skripti mujale installima. Lisasin selle skripti saidi päisesse failis header.php kohe pärast silti ja kõik töötab hästi.

Kuid ma hoiatan teid kohe, et kui te töötate teemiredaktoriga, peate igaks juhuks tegema varukoopia, et olla kindel. Järsku teete midagi valesti ja teete vea, siis saate kõik varukoopia abil probleemideta parandada.

Üksikasjade hulgast võin lisada, et skripti "õmmeldakse" 40 lumehelvest maksimaalse suurusega kuni 35px. Ja ma arvan ka, et need on optimaalsed väärtused. Kahjuks ei õnnestunud mul leitud väljaande autori nime teada saada, et tänada tehtud töö eest väga.

Ja lumehelbed ei kaunista mitte ainult saiti, vaid on ka suurepärane täiendus neile, kes valmistavad uusaasta jaoks viiruslikke õnnitluskaarte, kui selliseid hea tuju austajaid on ka seda artiklit lugemas. Muide, saate nendesse viiruskaartidesse kinnitada koode ja teenida neile raha.

Loodan, et see kohev lumesadu ei jäta teid ükskõikseks ja te rõõmustate sellega oma blogilugejaid kogu eelseisva pühade vältel.

Kui teil on küsimusi, võite neid küsida selle artikli kommentaarides. Soovin teile kõike head ja palju õnne tulemise tulemise puhul! Ootan teie kommentaare ja vastan neile meeleldi.

Enne jõule ja aastavahetust on oma veebisaiti väga lihtne kaunistada. Installige skript ja saidile ilmuvad kaunid lumehelbed.

Kuidas lumehelbeid oma veebisaidile installida

Kui te ei soovi faili allalaadimise ja hostimise üleslaadimisega vaeva näha, saate oma veebisaidi mallile lihtsalt ühe rea lisada.

Enne lõpumärgendit kleepige kood:

Kuid kui soovite teada, kuidas oma saidile lumehelvestega skripti installida või seda kohandada (kuigi see pole vajalik, kuid selline võimalus on olemas), siis soovitan lugemist jätkata.

Laadige skript alla

Pärast ühe alloleva nupu klõpsamist ilmub faili allalaadimiseks link.

Veebimeistrid kaunistavad veebisaite

Iga aasta lõpu poole teevad veebimeistrid ja saitide omanikud kõik endast oleneva, et oma saidid uue aasta teemale vastavaks kujundada. Tekib pidulik õhkkond ja tunne millegi ebatavalise kohta.

Peamine on mitte üle pingutada

Kasutatavuse eksperdid hoiatavad, et te ei tohiks unustada, et kui muudate saidi kujundust radikaalselt, siis antud juhul uusaasta teema jaoks võite kaotada kliente. Seda tõendab statistika.

Fakt on see, et teie saidi kujundusega harjunud kasutajatele ei pruugi uuendused lihtsalt meeldida või nad ei taha raisata aega uue liidesega harjumiseks ja seetõttu saidilt lahkuda. Seega väheneb külastajate pöördumine ostjate poole.

Kuidas kaunistada veebisaiti enne uut aastat

Lihtsaim ja valutuim muudatus võib olla langevate lumehelveste mõju kasutamine.

Seotud artikkel: Kuidas ühendada Yandex.Spellerit WordPressiga

Veetsin palju aega, et leida Internetist valmis skripte langevatest lumehelvestest. Mul õnnestus ikkagi leida stsenaarium väga toredatega. Ma tahan teile sellest ka rääkida.

Skripti esimene versioon lumehelvestega. Ärge laadige seda skripti versiooni alla - see on toores.

Skript "Langevad lumehelbed"

Kuidas see erineb teistest lumehelbeid genereerivatest skriptidest? Fakt on see langevad lumehelbed pole pildid. Langevad lumehelbed on tavalised fonditähed (tärnid "*"). See tähendab, et lumehelveste kuju sõltub seadetes määratud fontist. Võite valida mis tahes muu standardse fondi ja siis on lumehelbed erinevad.

Lisaks lumehelveste kujule saate määrata ka värvi, suuruse, koguse ja kukkumise kiiruse.

Skripti seaded: värv, kuju, suurus ja lumehelveste arv

Stsenaarium on kodanlik ja kommenteerib seetõttu inglise keeles. Kuid programmeerijate jaoks on inglise keel nende emakeel. Loodan, et sellega probleeme ei teki.

Skripti teadaolevad probleemid

Algne skript pole vigadeta. Kuid kõik need on juba edukalt kõrvaldatud.

1. Laiekraaniga ekraanil ei täitnud lumehelbed tervet ligipääsetavat ala. Ma ei tea Java-skripti kohta eriti midagi. Seetõttu palusin oma andekal sõbral Denis Balykinil, keda võrgus tuntakse hüüdnime BaDeVlad all, parandada selle skripti viga. Ta nuputas kiiresti kellegi teise koodi ja muutis seda vastavalt vajadusele.
2. Stsenaariumil oli väga tõsine viga. Skript mitte ainult ebaõnnestus rakenduses Doctype Strict, vaid ei toetanud üldse veebistandardeid. Kordasin kõik doktüübid uuesti - ükski neist ei lubanud sademeid lume kujul. Hiljem andis Alexey Yudin kommentaarides retsepti selle tõsise vaevuse ravimiseks. Mõne rea lõpus oli vaja märkida mõõtühikud, lisades + "px";

Kuidas lumehelvestega skripti oma hostiga ühendada

1. Laadige skript alla ja pange see oma hostile.
2. Määrake skripti asukoht järgmise konstruktsiooniga

Näiteks kui panete skripti kausta js, mis asub teie saidi juuril, on skriptiühendus selline: lisage see rida saidimallile näiteks enne silti keha:

2. Me ühendame stiilid

Kleepige css-kood oma css-faili (tavaliselt style.css):

#canvas (ääris: 1px must, must; positsioon: absoluutne; z-indeks: 10000;) #flake (värv: #fff; positsioon: absoluutne; fondi suurus: 25px; ülemine: -50px;)

3. Looge fail snow.js

Looge fail snow.js ja kleepige järgmine javascripti kood sinna:

Lisame faili js :

4. Sisestage HTML-kood

Noh, kõige tähtsam on endiselt - sisestage langeva lume HTML-kood suvalisse kohta :

Kui tegite kõik õigesti, siis hakkab teie saidil lund sadama.

Taustpildi, suure päise ja langevate lumehelveste ühendamine

See valik erineb selle poolest, et sellel on taustpilt ja suur pealkiri "Head uut aastat". Selle langeva lume skripti varianti on saidiga lihtne ühendada. Vaja:

1. Laadige arhiiv alla ja pakkige see lahti

2. Ühendame jQuery teegi

JQuery teek on kohustuslik lisada (see pole vajalik, kui see teek on juba ühendatud). See on ühendatud nii: siltide vahel ja kleepige järgmine kood:

3. Ühendage font "Lobster"

Sarnaselt jQuery teegi ühendamisele ühendame ka meie kirjutise "Head uut aastat" fondi:

Loomulikult, kui te ei vaja seda pealdist ja fonti, ei saa te seda lisada, kuid seejärel eemaldage css-is atribuudist H1 atribuut "font-family:" Lobster ", cursive;" või asendage see oma fontiga

4. Me ühendame stiilid

Variant A. Kleepige css-kood oma css-faili. Siin on kood:

Img.bg (/ * Määra reeglid tausta täitmiseks * / min-kõrgus: 100%; min-laius: 1024 pikslit; / * Seadista proportsionaalne mastaapimine * / laius: 100%; kõrgus: automaatne; / * Seadista positsioneerimine * / positsioon: fikseeritud; ülemine: 0; vasak: 0;) h1 (fondipere: "Lobster", kursor; värv: #FFF; fondi suurus: 90px; teksti joondamine: keskel; joone kõrgus: 95px; font- kaal: normaalne; veerise ülaosa: 300 pikslit; teksti vari: 5 pikslit 5 pikslit 5 pikslit # 000;) @meediaekraan ja (maksimaalne laius: 1024 pikslit) (/ * Spetsiifiline just sellele pildile * / img.bg (vasakul: 50% ; margin-left: -512px; / * 50% * /)) html, body (font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; polster: 0; veeris: 0; värv: # 333;). Riba (taustavärv: # 111; värv: # f0f0f0; kast-vari: 0px 0px 2px # 333; joone kõrgus: 25px; polster: 0px 20px; läbipaistmatus: 0,7;). riba: hõljumine (läbipaistmatus: 1;). riba a (värv: #DDD;). riba: hõljutamine (värv: #FFFFFF;) a (värv: #FFFFFF; tekstikaunistus: puudub;) a: hõljumine (värv : #CCC;) # lõuend (ääris: 1px mustvalge; positsioon: absoluutne e; z-indeks: 10000; ) #helbe (värv: #fff; positsioon: absoluutne; fondi suurus: 25 pikslit; ülemine: -50 pikslit;) # leht (positsioon: suhteline;)

Variant B. Võite luua ka eraldi faili, näiteks snow.css, ja sisestada sama kood sinna, kuigi see tuleb lisada järgmiselt:

5. Ühendage langeva lume skript

Variant A. Selleks peame sisestama saidi kõige põhja (enne sulgemist) järgmine javascripti kood:

Variant B. Lisaks css-koodile saab javascripti paigutada ka eraldi faili ja seda nimetatakse ka lumeks.js ning lisada pea:

6. Täitke taustpilt

Täitke pilt bg.jpg arhiivist saidi juureni

7. Sisestage HTML-kood

Noh, kõige tähtsam jääb - sisestage langeva lume HTML-kood:

Langeva lume skript on edukalt ühendatud. Vaadake seda kindlasti tööl. Kõike paremat!

Kaunistame oma blogi uueks aastaks. Juhin teie tähelepanu vanale, kuid blogijate poolt unustamata ja armastatud vidinale KUULUVAD LUMEKEELED.

Internetis ringi liikudes leidsin hämmastava ajaveebi ja lugesin artiklist sellist teksti: „Olen ​​vana sõjaväelane ja ei tea armastusõnu ning seetõttu ei lisanud ma kuidagi oma blogisse lumehelbeid ebaväärikas ”.

Autor tegi sel teemal postituse, mis tähendab, et kõigile meeldib ilu ja me kõik oleme hinges lapsed ja ootame pühi imetlusega ning soovime puhkust mitte ainult reaalses, vaid ka virtuaalses maailmas . Tõesti, kui lugesin autori sõnu, tulid meelde Valeri Leontijevi laulu sõnad: „Armastada tahavad kõik, nii sõdur kui ka madrus. Kõik tahavad endale pruuti ja sõpra. Armastada tahavad kõik, nii sõdur kui ka madrus. Ainult päevad on rasked, ainult meie päevad on lumetuisk.

Kuid see on tekst ja lisavesi tekstis. Ma ise olen meeletult nagu vares, armastan igasuguseid trikke internetis: emotikone, gife, vidinaid, vidinaid ja jagan suure heameelega oma teadmisi ka teile, kallid lugejad.

Kuidas installida kukkuvate lumehelveste vidinat

Valige Bloggeri administraatori paneel> Kujundus> Lisa HTML / JavaScripti vidin. Kleepige kood aknasse.

Pärast koodi vidinasse sisestamist on soovitatav see tõsta nii kõrgele kui võimalik. Seda pole keeruline teha, haarake hiire vasaku nupuga HTML / JavaScripti vidin ja lohistage see malli all üles ja vabastage, see ei töötanud esimest korda, korrake uuesti.

Oma saitide ja ajaveebide kaunistamine uusaasta ja jõulupühade ajal on hea asi. Tore on isegi selliseid saite külastada :).

Minu blogi pole erand, see muutus ka nende talvepuhkuste perioodiks. Ilmselt olete märganud uut logo, millega ma ei saa kiidelda pärast selle kohta postituse kirjutamist, praegu on see kaunistatud kalasabaga ja puistatud lumega.

Varem pole ma kunagi saidile installinud langevate lumehelveste skripte, sest nägin seda imet ka teistel saitidel ja ausalt öeldes ei meeldinud see mulle tegelikult ja mõnikord see isegi häiris mind.

Hiljuti on Google'is ilmunud uus funktsioon. Ma teatasin sellest - see on lumi ja külmav ekraan, mille saate seejärel sõrmega kustutada. Proovige, sisestage päring „ Las sajab lund ”.

Mulle meeldis selline lähenemine kahel põhjusel:

1 ... Tundub väga ilus;

2 ... Lund hakkab alles sadama kasutaja soovil.

Siin on minu jaoks selline kaunistus. Kuid ma ei saa ekraani külmutamist rakendada - ma pole programmeerija, tahan tellida programmeerija, kuid ma pole kindel, mis selle uue aasta jaoks saab. Kuid Google'i stiilis langeva lumega ja külastaja "nõudmisel" - see on võimalik :). Tõde jällegi mitte iseenesest, vaid ühe hea "välismaalase" abiga :), kuid mitte sisuliselt.

Enne kui ma oma blogis teile lumega tutvustan, tuletame kõigepealt lühidalt meelde mõned head WordPress-pistikprogrammid lumi saidile.

Langevad lumepistikprogrammid WordPressi jaoks

Väga hea pistikprogramm. Seal on üsna palju erinevaid seadeid: animatsiooni kiirus, langeva lume värv, helveste suurus, samaaegselt langevate lumehelveste arv jne. On isegi midagi sellist, nagu külmumine, kuid ma ei suutnud seda käivitada :(.

Esmapilgul ei paista lumi sellel saidil halb, proovige seda, see võib teile meeldida.

Kuid see pistikprogramm mulle ei sobinud. Esiteks, mulle ei meeldi pistikprogrammid ja kasutan neid ainult siis, kui see on hädavajalik, ja teiseks hakkab lumi kohe pärast lehe laadimist "sadama" (mäletate teist punkti?) Ja mõnikord juhib tähelepanu saidi põhisisu tähelepanu (mu silmade ees virvendavad kärbsed, neetud :)) ja lumehelbed on kõik ühesuurused.

Nad ütlevad, et hea pistikprogramm. Millegipärast ei hakanud see minu jaoks käima, kuigi paigaldati normaalselt, aga lund pole :). Proovige, võite olla parem.

See pistikprogramm teeb täpselt sama lume kui mul praegu. Spetsiaalseid seadeid pole, lihtsalt nad installisid selle ja hakkas lund sadama. Kuigi soovi korral saate pistikprogrammi redigeerijas siiski midagi seadistada (värvid, kiirus jne), s.t. redigeerides pistikprogrammi faili ennast.

Kõik oleks hea, kuid puudused on samad nagu varem: see on ikkagi pistikprogramm, kuigi mitte "raske", ja see sajab kogu aeg lund, isegi kui kasutaja seda tegelikult ei vaja.

Seda pistikprogrammi võib nimetada mitmekülgseks puhkuse pistikprogrammiks. Lisaks tegelikule lumele võib see skript lasta täispuhutavad pallid ja igasugused lehed :).

Väga huvitav pistikprogramm ... tahtsin seda isegi installida. Aga ... mul on juba oma lumi :).

Kasutaja palvel on saidil lund

Siin on lahendus, mis on minu arvates parim kõigist eelnevatest. Muidugi pole siin kõik nii lahe kui samas “Lumes, õhupallides ja mujal”, kuid lihtsam ei tähenda hullemat.

Selle stsenaariumi peamine eelis on „nõudmisel lumi“. Lumi ei lähe iseenesest, see tuleb käivitada nupule vajutades. Seega ei häiri külastajat ekraanil lõputult segavad valged helbed. Kui ta tahab lund, siis ta näeb seda.

Esiteks laadige need failid alla ja laadige need oma serverisse üles soovitud kausta:,. Nupp näeb muide välja selline:

Siis siltide vahel kirjuta skriptide tee:

Pange tähele, et kui teil on juba jquery-teek kaasas, ei pea te seda üldse uuesti kaasama. Seejärel lisage lihtsalt tee saidile jquery.letsinsnow.js.

Jquery.letsinsnow.js real 15 (‘color’: ‘# 79B3EC’,) saate muuta lumehelveste värvi. Ma arvan, et ülejäänud saab vaikimisi jätta;).

Jääb vaid lisada saidile nupp, millele klõpsates lund sajab. Selleks peate järgima paari lihtsat sammu:

1 ... Asetage nupu kood saidil soovitud kohta:

Minu blogi päises on nupp. Seetõttu lisasin koodi oma WordPress malli päise.php faili.

2 ... Lisage oma stiililehele järgmine stiil (tavaliselt style.css):

Siin peate kohandama paar parameetrit:

- tee nupupildi juurde: taust: url ("snowflake.png") 100% ei kordu;.

- nupu asukoht saidil: ülemine serv: 80 pikslit;(ülemine veeris) ja serv vasakul: 740 pikslit;(vasak taane).

Muidugi võite kirjutada täiesti erinevaid stiile ja kasutada erinevat nuppu. Toon just näite, mis töötab nüüd minu blogis.

Muide, proovige seda. Nupp asub ajaveebi päises otsinguvormi kõrval:

Õnne sõbrad! Head uut aastat ja häid jõule!

Armas tänaseks: Mõnus meloodia, kena laul, kena jõuluvideo. Nautige 🙂