Kunning yaxshi vaqti va Yangi yilingiz bilan. Yangi yil arafasida men siz bilan juda engil, chiroyli va oddiy qor yog'adigan plaginni baham ko'rmoqchiman. Ushbu skript haqiqatan ham juda engil va osongina mos keladi html fayl o'zingiz bilan ishlashni qiyinlashtirmasdan html kodi ohm sayti. To'g'ri, siz uni tashqariga olib chiqishingiz mumkin alohida fayl... Lekin qulaylik uchun men hamma narsani bitta faylda qildim.

Bu erda aytadigan ko'p narsa yo'q, bu yog'ayotgan qorning namoyishini tomosha qilish yaxshiroqdir. Bundan tashqari, juda ham bor chiroyli fon va Google'dan chiroyli "Lobster" shriftida "Yangi yilingiz bilan" sarlavhasi. Ushbu faylni tabriklar bilan osongina Internet-postcartaga aylantirishingiz mumkin.

Tushgan qor parchalari skriptini tayyor saytga ulash

1. Biz jQuery kutubxonasini ulaymiz

U quyidagicha bog'lanadi: teglar o'rtasida va quyidagi kodni joylashtiring:

2. Biz uslublarni bog'laymiz

CSS kodini o'zingizga joylashtiring css fayli(odatda style.css):

#kanvas (chegara: 1px qattiq qora; joylashuv: mutlaq; z-indeks: 10000;) #flake (rang: #fff; pozitsiya: mutlaq; shrift o'lchami: 25px; tepa: -50px;)

3. snow.js faylini yarating

snow.js faylini yarating va u erga quyidagi JavaScript kodini joylashtiring:

Biz js faylini qo'shamiz :

4. HTML kodini kiriting

Xo'sh, eng muhimi qoladi - istalgan joyga yog'ayotgan qorning html kodini kiriting :

Agar siz hamma narsani to'g'ri bajargan bo'lsangiz, saytingizga qor yog'a boshlaydi.

Orqa fon tasvirini, katta sarlavhani va tushayotgan qor parchalarini ulash

Bu variant borligi bilan farq qiladi fon tasviri va "Yangi yilingiz bilan" katta sarlavhasi. Yog'ayotgan qor skriptining ushbu variantini saytga ulash juda oddiy. Kerak:

1. Arxivni yuklab oling va uni oching

2. Biz jQuery kutubxonasini ulaymiz

JQuery kutubxonasini kiritish shart (agar sizda ushbu kutubxona ulangan bo'lsa, bu shart emas). U quyidagicha bog'lanadi: teglar o'rtasida va quyidagi kodni joylashtiring:

3. "Lobster" shriftini ulang

JQuery kutubxonasini ulashga o'xshab, biz "Yangi yilingiz bilan" yozuvimiz uchun shriftni bog'laymiz:

Tabiiyki, agar sizga ushbu yozuv va shrift kerak bo'lmasa, uni qo'sha olmaysiz, lekin keyin CSS-da H1 atributidan "shrift-family:" Lobster ", kursiv;" atributini olib tashlang yoki uni o'zingizning shriftingiz bilan almashtiring.

4. Biz uslublarni bog'laymiz

Variant A. CSS kodini CSS faylingizga joylashtiring. Mana kod:

Img.bg (/ * Fonni toʻldirish qoidalarini oʻrnatish * / min balandlik: 100%; min. kenglik: 1024px; / * Proportsional masshtabni oʻrnatish * / kenglik: 100%; balandlik: avtomatik; / * Joylashuvni sozlash * / joylashuv: sobit; tepa: 0; chap: 0;) h1 (shrift oilasi: "Lobster", kursiv; rang: #FFF; shrift o'lchami: 90px; matnni tekislash: markaz; chiziq balandligi: 95px; shrift- vazn: normal; chekka tepa: 300px; matn soyasi: 5px 5px 5px # 000;) @media ekrani va (maksimal kenglik: 1024px) (/ * Ushbu rasmga xos * / img.bg (chapda: 50%) ; chap chekka: -512px; / * 50% * /)) html, tana (shrift oilasi: Helvetica, Arial, sans-serif; shrift oʻlchami: 12px; chiziq balandligi: 16px; toʻldirish: 0; chet: 0; rang: # 333;) .bar (fon rangi: # 111; rang: # f0f0f0; quti soyasi: 0px 0px 2px # 333; chiziq balandligi: 25px; toʻldirish: 0px 20px; shaffoflik: 0.7;). satr: hover (shaffoflik: 1;) .bar a (rang: #DDD;) .bar a: hover (rang: #FFFFFF;) a (rang: #FFFFFF; matn bezatish: yo‘q;) a: hover (rang : #CCC;) #kanvas (chegara: 1px qattiq qora; joylashuvi: absolut e; z-indeks: 10000; ) #flake (rang: #fff; pozitsiyasi: mutlaq; shrift o'lchami: 25px; tepasi: -50px;) #sahifa (pozitsiya: nisbiy;)

Variant B. Shuningdek, siz alohida fayl yaratishingiz mumkin, masalan, snow.css va u erda bir xil kodni kiritishingiz mumkin, garchi u quyidagi tarzda boshga kiritilishi kerak bo'ladi:

5. Tushgan qor skriptini ulang

Variant A. Buning uchun biz saytning eng pastki qismiga (yopishdan oldin) kiritishimiz kerak

) quyidagi JavaScript kodi:

Variant B. CSS-kod bilan bir qatorda, JavaScript alohida faylga joylashtirilishi va snow.js deb ham ataladi va boshga kiritilishi mumkin:

6. Fon rasmini to'ldiring

Arxivdan saytingiz ildiziga bg.jpg rasmini to'ldiring

7. HTML kodini kiriting

Xo'sh, eng muhimi qoladi - yog'ayotgan qorning html kodini kiriting:

Falling snow skript muvaffaqiyatli ulandi. Ishda buni ko'rganingizga ishonch hosil qiling. Omad tilayman!

jQuery yordamida veb-dizayn juda oson!

Saytda "yomayotgan qor"

Yangi yil yaqinlashganda, ko'pchilik saytlarda ikkita narsa paydo bo'ladi: "yomayotgan qor" va savdo va chegirmalar sahifasi. Ikkalasini qilish juda oddiy. Qor - jQuery plaginlari yordamida va chegirmalar va sotuvlar narx yorlig'i ustidagi rasm orqali, go'yoki eski narxga mos keladigan kattaroq raqam bilan kesib tashlangan qalin qizil chiziq bilan.

Biroq, biz hozir faqat sayt sahifasida "yomayotgan qor" ning joylashuvi bilan qiziqamiz. Bir nechta bor oddiy variantlar... Ulardan ikkitasini ko'rib chiqing jQuery.

Biz "yomayotgan qor" ni o'rnatishni yangi papka yaratish orqali boshlaymiz, albatta, nomi bilan qor, keyin arxivni yuklab oling va uni ushbu jildga oching. Unda ikkita skript olamiz. jquery-1.8.3.min.js va jquery.snow.js.

Keyinchalik, teg ichidagi sahifa sarlavhasini qo'shishingiz kerak ... ushbu skriptlarga yo'llarni ko'rsatadigan quyidagi satrlar va kichik JavaScript"yomayotgan qor" ni ishga tushirish uchun:

Sayt sahifasida qor paydo bo'lishi uchun teg ichiga qo'shish kifoya

.

Ushbu plagin faqat to'rtta sozlamalarga ega. Ular faylning eng boshida joylashgan. jquery.snow.js va ularni har qanday tahrirlovchida yoki bloknotda o'zgartirish mumkin:
Minimal o'lchami: 10, // qor parchasining minimal o'lchami
Maksimal o'lcham: 20, // qor parchasining maksimal hajmi
yangi: 500, // qor parchalarining paydo bo'lish chastotasi milodiy, ya'ni qorning zichligi
flakeColor: "#bbbbbb" // qor parchasi rangi

Ma'nosiga ham e'tibor bering z-indeks: 10 faylning birinchi qatorlarida ko'rsatilgan qor uchun jquery.snow.js... Bu sizning sahifangizda mavjud bo'lsa, slayderlar (slayderlar) va ochiladigan menyular ustidagi qor parchalari o'rnini o'rnatadi.

"Qor yog'ishi" ning ikkinchi varianti
Ushbu parametr uchun siz 1-rasmda ko'rsatilganidek, qor parchalarining o'zingizning rasmlaringizdan foydalanasiz. Bu plaginni yanada rang-barang qiladi va bundan tashqari, uni boshqa effektlar uchun muvaffaqiyatli ishlatish mumkin. Misol uchun, qor parchalari rasmlarini atirgul barglari bilan almashtirib, siz to'y saytining sahifasini bezashingiz mumkin va tushayotgan papatyalar yozgi ta'til haqida saytga yordam beradi.

1-rasm... Saytda "yomayotgan qor"

Qayta o'rnatish uchun papkadan foydalaning qor, faqat endi biz unga boshqa arxivni ochamiz, unda skriptlardan tashqari to'rttasi ham mavjud turli xil tasvirlar qor parchalari. Bundan tashqari, birinchi misolga o'xshab, teg ichida ... "yomayotgan qor" ning yangi fayllariga yo'llarni ko'rsatadigan qatorlarni qo'ying:

Nihoyat, teg ichiga qo'shing (sahifa boshida yaxshiroq) qatori

.

Agar sizda qor bo'lmasa, qor parchalari tasvirlarining to'liq manzili faylning keyingi qatoriga kiritilganligiga ishonch hosil qiling. snow.js:
var img = " "; .

Qor zichligini sozlash satrdagi raqamli argument bilan bir xil faylda ko'rsatilgan
setTimeout ("qor (" + id + ");", 100); // qor parchalarining chastotasi,
va qor parchalarining ketma-ket harakatlanish tezligi
$ ("# snow _" + id) .animate ((yuqorida: "150%", chapda: "" + end_x + "%"), 20000, funktsiya () // qor parchalarining harakat tezligi

Bundan tashqari, birinchi variantda bo'lgani kabi, qiymatga e'tibor bering z-indeks: 10 sahifadagi qorni bir-biriga mos keladigan slayderlar, ochiladigan menyular va h.k. qilish.

Qishgacha juda oz vaqt qoldi va katta miqdorda veb-ustalar o'z saytlarida to'g'ri muhit yaratishni boshlaydilar. Shuning uchun biz sizning veb-saytingiz uchun qor effektlari tanlovini taqdim etamiz.

jSnow - umumiy jQuery qor yog'adigan skript

Biz kollektsiyamizni "jSnow" deb nomlangan plagin yordamida saytga qo'shilgan juda yaxshi qor effekti bilan boshlaymiz.

Namoyish:

Qabul qilaman - chiroyli!

Ushbu effektni saytingizga o'rnatish uchun quyidagilarni bajaring.

1. Arxivni yuklab oling jsnow.zip maqolaning oxirida. Tarkibni oching va FTP orqali yoki siz uchun qulay bo'lgan boshqa usulda saytingizga yuklang.

Afsuski, yangi versiyalar bilan jQuery skripti ishlamaydi, shuning uchun biz bor narsamiz bilan qanoatlanamiz.

3. Old yopish yorlig'i

skriptlarni ulash:

Ushbu kod qor parchalarining o'lchamini, ular egallagan maydonning balandligini, rangini va boshqa sharhlangan parametrlarni sozlaydi.

Skript, siz tushunganingizdek, universaldir va dumaloq qor o'rniga siz yulduzlarni qo'shishingiz mumkin, masalan:

FlakeCode: ["*"] // Qor parchasi ko'rinishi

Yoki bir guruh dumaloq qor va yulduzlar:

FlakeCode: [".", "*"] // Snowflake ko'rinishi

Va boshqa har qanday belgi (va hatto dollar belgisi - $).

Skript saytning yuqori qismini asosiy tarkibni bir-biriga yopishtirmasdan bezash uchun juda yaxshi.

Qor bo'roni - aqlli JavaScript qor yog'adigan skript

Nima uchun aqlli, deb so'rayapsizmi? Chunki bu skriptda (ushbu maqolada muhokama qilingan boshqalardan farqli o'laroq) qor parchalarini qaytarishning qo'shimcha ta'siri mavjud. Ya'ni, sichqoncha kursorini saytingizda harakatlantirsangiz, qor parchalari undan teskari tomonga yuguradi. Kursor ekranning o'rtasidan qanchalik uzoqroq bo'lsa, qor parchalarining harakat tezligi shunchalik tez bo'ladi.

Namoyish:

Ushbu effektni saytingizga o'rnatish uchun qo'shimcha kutubxonalar talab qilinmaydi. Siz qilishingiz kerak bo'lgan yagona narsa:

1. Arxivni yuklab olish qor bo'roni.zip maqolaning oxirida. Kontentni o'zingiz uchun qulay tarzda oching va saytingizga yuklang.

Agar kerak bo'lsa, skript animatsiyasini o'zgartiring.

Qor parchalari kursordan sakrab tushishiga qo'shimcha ravishda, ularning ba'zilari ekranning pastki qismiga yopishib qoladi va qor parchalari qor ko'chkisini hosil qilayotgandek ozgina taassurot qoldiradi.

Qor yog'ishi - jQuery drifts bilan yog'ayotgan qor effekti

Menga bu skript eng yoqadi, chunki u kichik qor granulalarini amalga oshiradi, shuningdek, ko'rsatilgan elementlarda kichik qor ko'chkilarini to'playdi.

Namoyish:

Ushbu effektni o'rnatish uchun biroz ko'proq vaqt kerak bo'ladi.

1. Agar saytingizda jQuery kutubxonasi bo'lmasa, uni bo'limga qo'shing BOSH:

3. Ochilish yorlig'i sinfni tayinlash " darkBg»:

4. Old yopish yorlig'i

skriptlarni ulash:

5. Va oxirgi bosqichda, drift hosil bo'lishi kerak bo'lgan elementlarga sinf tayinlang:

Sinf = "to'plam"

Agar siz saytda qor ko'chkilari paydo bo'lishini xohlamasangiz, skriptdan chiziqni olib tashlang:

To'plam: ".colletonme",

Bu talab qilinadigan harakatdir, aks holda saytingizdagi qor tushmaydi.

Ajoyib skript, bu biz avvalroq saytimizda foydalanganmiz.

CSS3-da silliq qatlamli qor effekti

Bu erda, siz tushunganingizdek, biz har xil skriptlardan foydalanishga murojaat qilmaymiz, faqat sof CSS bilan boshqaramiz.

Namoyish:

Sehrli, shunday emasmi?

O'zingiz uchun ushbu effektni o'rnatish uchun uchta oddiy qadamni bajaring.

1. Arxivni yuklab oling snow_img.zip maqolaning oxirida. Tarkibni oching va FTP yoki orqali saytingizga yuklang fayl menejeri xosting.

2. Uslublar varaqingizga joylashtiring (yaxshisi eng pastki qismida):

Qor konteyneri (kengligi: 100%; balandlik: 100%; pozitsiyasi: mutlaq; tepa: 0; chap: 0; z-indeks: -1;) #qor (kengligi: 100%; balandlik: 100%; fon tasviri: url ("/snow/snow_1.png"), url ("/ snow / snow_2.png"), url ("/ snow / snow_3.png"); -webkit-animatsiya: qor 20s chiziqli cheksiz; -moz-animatsiya: qor 20s chiziqli cheksiz; -ms-animatsiya: qor 20s chiziqli cheksiz; animatsiya: qor 20s chiziqli cheksiz;) @keyframes snow (0% (fon pozitsiyasi: 0px 0px, 0px 0px, 0px 0px;) 100% (fon pozitsiyasi) : 500px 1000px, 400px 400px, 300px 300px;)) @ -moz-keyframes qor (0% (fon holati: 0px 0px, 0px 0px, 0px 0px;) 100% (fon pozitsiyasi: 500px 0px0,0px0,01px0, 300px;)) @ -webkit-keyframes qor (0% (fon holati: 0px 0px, 0px 0px, 0px 0px;) 100% (fon pozitsiyasi: 500px 1000px, 400px 400px, 300px @300px;) -ms; asosiy kadrlar qor (0% (fon holati: 0px 0px, 0px 0px, 0px 0px;) 100% (fon pozitsiyasi: 500px 1000px, 400px 40 0px, 300px 300px; ))

Keyin barcha o'zgarishlarni saqlang.

Mana shunday yaxshi tanlov saytingizga tashrif buyuruvchilarni shubhasiz quvontiradigan qor effektlari.