Өвөл болоход маш бага хугацаа үлдлээ, мөн олон тоонывэбмастерууд өөрсдийн сайт дээр зохих уур амьсгалыг бүрдүүлж эхэлдэг. Үүнтэй холбогдуулан бид таны вэбсайтад зориулсан цасны эффектүүдийг сонгон танилцуулж байна.

jSnow - jQuery-тэй Falling Snow-ийн ерөнхий скрипт

Бид эмхэтгэлээ "jSnow" нэртэй залгаасыг ашиглан сайтад нэмсэн маш үзэсгэлэнтэй цасны эффектээр эхлүүлж байна.

Жагсаал:

Зөвшөөрч байна - үзэсгэлэнтэй!

Энэ эффектийг өөрийн сайт дээр суулгахын тулд дараах зүйлийг хийнэ үү.

1. Архив татаж авах jsnow.zipнийтлэлийн төгсгөлд. Контентыг задлаад FTP-ээр эсвэл өөрт тохиромжтой аргаар сайтдаа байршуулна уу.

Харамсалтай нь скрипт нь jQuery-ийн шинэ хувилбаруудтай ажиллахгүй байгаа тул бид байгаа зүйлдээ сэтгэл хангалуун байна.

3. Өмнө ньхаалтын шошго скриптүүдийг холбох:

Энэ код нь цасан ширхгүүдийн хэмжээ, тэдгээрийн эзэлсэн талбайн өндөр, өнгө болон бусад тайлбарт параметрүүдийг тохируулдаг.

Скрипт нь таны ойлгож байгаагаар бүх нийтийнх бөгөөд дугуй цасны оронд та од нэмж болно, жишээлбэл:

FlakeCode:["*"] // Цасан ширхгийг харах

Эсвэл олон тооны дугуй цас, одод:

FlakeCode:[".", "*"] // Цасан ширхгийг харах

Бусад тэмдэгтүүдийн нэгэн адил (тэр ч байтугай долларын тэмдэг - $).

Скрипт нь үндсэн агуулгыг давхцуулахгүйгээр сайтын дээд хэсгийг чимэглэхэд тохиромжтой.

Цасан шуурга - Ухаалаг JavaScript Falling Snow Script

Яагаад ухаалаг гэж та асууж байна уу? Учир нь энэ скриптэд (энэ нийтлэлд хэлэлцсэн бусад зүйлсээс ялгаатай нь) цасан ширхгийг няцаах нэмэлт нөлөө бий. Өөрөөр хэлбэл, хулганын курсорыг сайт дээрээ хөдөлгөхөд цасан ширхгүүд түүний эсрэг чиглэлд урсана. Курсор дэлгэцийн дундаас хол байх тусам илүү хурдан хурдцасан ширхгийн хөдөлгөөн.

Жагсаал:

Энэ эффектийг өөрийн сайт дээр суулгахын тулд нэмэлт номын сан шаардлагагүй. Таны хийх ёстой зүйл бол:

1. Архив татаж авах цасан шуурга.zipнийтлэлийн төгсгөлд. Агуулгыг задлаад өөрт тохирсон байдлаар сайтдаа байршуулна уу.

Шаардлагатай бол скрипт анимацид өөрчлөлт оруулна уу.

Цасан ширхгүүд курсороос түлхэгдэхээс гадна тэдгээрийн зарим нь дэлгэцийн ёроолд наалдаж, цасан ширхгүүд цасан ширхгүүд үүссэн мэт бага зэрэг сэтгэгдэл төрүүлдэг.

Цас унах - jQuery дээрх цасан шуургатай цасны нөлөө

Би энэ скриптэд хамгийн их дуртай, учир нь энэ нь жижиг цасан тариаг хэрэгжүүлдэг, мөн заасан элементүүд дээр жижиг цасан шуурга цуглуулдаг.

Жагсаал:

Энэ эффектийг тохируулах нь бусадтай харьцуулахад арай удаан байна.

1. Хэрэв танай сайт jQuery номын сангүй бол энэ хэсэгт оруулаарай ТОЛГОЙ:

3. Нээлтийн шошго анги оноох" darkBg»:

4. Өмнө ньхаалтын шошго скрипт оруулах:

5. Эцсийн шатанд цасан шуурга үүсэх элементүүдэд ангилна.

Анги = "цуглуулга"

Хэрэв та сайт дээр цасан шуурга үүсэхийг хүсэхгүй байгаа бол скриптээс мөрийг устгана уу.

Цуглуулга: ".colletonme",

Энэ бол заавал хийх ёстой арга хэмжээ, эс тэгвээс таны сайт дээрх цас унахгүй.

Гайхалтай скрипт, үүнийг бид өмнө нь манай сайтад ашигладаг байсан.

CSS3-тай гөлгөр давхаргатай цасны эффект

Энд таны ойлгож байгаагаар бид бүх төрлийн скрипт ашиглахгүй, зөвхөн цэвэр CSS-ийг удирдах болно.

Жагсаал:

Ид шидтэй, тийм үү?

Энэ эффектийг өөртөө суулгахын тулд гурван энгийн алхамыг дагана уу.

1. Архив татаж авах snow_img.zipнийтлэлийн төгсгөлд. Агуулгыг задлаад FTP эсвэл дамжуулан өөрийн сайт руу байршуулна уу файлын менежерхостинг.

2. Загварын хуудас руугаа буулгана уу (хамгийн доод хэсэгт байвал сайн):

Цасан сав (өргөн: 100%; өндөр: 100%; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; z индекс: -1; ) #цас (өргөн: 100%; өндөр: 100%; дэвсгэр зураг: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: snow 20s linear infinite; -moz-animation: цас 20с шугаман хязгааргүй; -ms-animation: цас 20с шугаман хязгааргүй; хөдөлгөөнт дүрс: цас 20с шугаман хязгааргүй; ) @keyframes цас ( 0% ( дэвсгэр байрлал: 0px 0px, 0px 0px, 0px 0px; ) 100% ( дэвсгэр байрлал : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes цас ( 0% (арын дэвсгэр: 0px 0px, 0px 0px, 0px 0px; ) 100% (арын дэвсгэр: 500px 0px0, 0px040, 0px040, арын дэвсгэр 300px; ) ) @-webkit-keyframes цас ( 0% (арын байрлал: 0px 0px, 0px 0px, 0px 0px; ) 100% (арын байрлал: 500px 1000px, 400px 400px, 300px 300px) @-ms; түлхүүр фрэймийн цас ( 0% (арын байрлал: 0px 0px, 0px 0px, 0px 0px; ) 100% ( дэвсгэр байрлал: 500px 1000px, 400px 40 0px, 300px 300px; ) )

Дараа нь бүх өөрчлөлтийг хадгална уу.

Үүн шиг сайн сонголтЦасны нөлөөлөл нь танай сайтын зочдод таалагдах нь дамжиггүй.

jQuery ашиглан вэб дизайн хийх нь маш хялбар!

"Унасан цас" вэбсайт

Шинэ жил дөхөж байгаа энэ үед ихэнх сайтууд дээр "цас унах" болон хямдрал, хямдралын хуудас гэсэн хоёр зүйл гарч ирдэг. Аль аль нь хийхэд маш хялбар. Цас - jQuery залгаасуудын тусламжтайгаар үнийн шошгон дээр тод улаан шугамтай зургаар хямдрал, борлуулалт хийх боломжтой. илүү, хуучин үнэтэй тохирч байгаа гэх.

Гэсэн хэдий ч бид одоо зөвхөн сайтын хуудсан дээр "унасан цас" байрлуулах сонирхолтой байна. Үүнийг хийхийн тулд хэд хэдэн энгийн сонголтууд байдаг. Тэдгээрийн хоёрыг үндэслэн авч үзье jQuery.

Бид "унасан цас" суулгацыг шинэ хавтас үүсгэх замаар эхлүүлдэг, мэдээжийн хэрэг нэрээр цас, дараа нь архивыг татаж аваад энэ хавтсанд задлаарай. Бид үүнд хоёр скрипт авах болно jquery-1.8.3.min.jsболон jquery.snow.js

Дараа нь та шошгон доторх хуудасны гарчиг дээр нэмэх хэрэгтэй ... дараах мөрүүд, эдгээр скриптүүдийн замыг зааж, жижиг JavaScript"унах цас"-ыг эхлүүлэхийн тулд:

Сайтын хуудсан дээр цас орохын тулд шошгон дотор нэмэхэд хангалттай

Энэ залгаасын зөвхөн дөрвөн тохиргоо байдаг. Тэд файлын хамгийн эхэнд байна. jquery.snow.jsмөн тэдгээрийг дурын редактор эсвэл Notepad дээр өөрчилж болно:
Хамгийн бага хэмжээ: 10 // цасан ширхгийн хамгийн бага хэмжээ
Хамгийн их хэмжээ: 20 // цасан ширхгийн хамгийн их хэмжээ
шинэ: 500 , // цасан ширхгүүдийн харагдах давтамж, өөрөөр хэлбэл цасны нягтрал
flakeColor: "#bbbbbb" // цасан ширхгийн өнгө

Мөн утгыг анхаарч үзээрэй z индекс: 10файлын эхний мөрөнд заасан цасны хувьд jquery.snow.js. Энэ нь таны хуудсан дээр байгаа бол гулсагч (слайд шоу) болон унждаг цэсний дээд хэсэгт цасан ширхгүүдийн байрлалыг тохируулдаг.

"Цас унах" хоёр дахь хувилбар
Энэ сонголтын хувьд 1-р зурагт үзүүлсэн шиг цасан ширхгүүдийн өөрсдийн зургийг ашигласан болно. Үүний ачаар залгаас нь илүү өнгөлөг болсон бөгөөд үүнээс гадна бусад эффектүүдэд амжилттай ашиглаж болно. Жишээлбэл, цасан ширхгийн зургийг сарнайн дэлбээгээр сольсноор та хуримын сайтын хуудсыг чимэглэх боломжтой бөгөөд унасан мандарваа цэцэг зуны амралтын тухай сайтад хэрэг болно.

Зураг 1. "Унасан цас" вэбсайт

Дахин суулгахын тулд фолдерыг ашиглана уу цас, одоо л скриптээс гадна цасан ширхгүүдийн дөрвөн өөр дүрс бүхий өөр архивыг задалцгаая. Цаашилбал, эхний жишээтэй адил шошгон дотор ... "Цас унах" шинэ файлуудын замыг харуулсан мөрүүдийг оруулна уу:

Эцэст нь шошгон дотор нэмнэ үү (хуудасны дээд талд илүү сайн) мөр

Хэрэв танд цас байхгүй бол файлын дараагийн мөрөнд цасан ширхгийн зургийн бүрэн хаягийг оруулна уу. snow.js:
varimg=" "; .

Цасны нягтын тохируулгыг мөрөнд тоон аргумент бүхий нэг файлд тохируулна
setTimeout("цас("+id+");",100 ); // цасан ширхгийн давтамж,
мөн цасан ширхгүүдийн дараалсан хөдөлгөөний хурд
$("#цас_"+id).animate((дээд:"150%",зүүн:""+төгсгөл_x+"%"),20000 ,функц() // цасан ширхгийн хурд

Мөн эхний сонголттой адил үнэ цэнийг анхаарч үзээрэй z индекс: 10ингэснээр цас хуудасны гулсагч, доош унах цэс гэх мэтийг давхцуулна.

Өдрийн мэнд, шинэ оны мэнд хүргэе. Шинэ оны өмнөхөн би та бүхэнтэй маш хөнгөн, үзэсгэлэнтэй, мадаггүй зөв унадаг цас залгаасыг хуваалцахыг хүсч байна. Энэ скрипт нь үнэхээр хөнгөн бөгөөд html файлд хялбархан байрлуулж, ажиллахад хүндрэл учруулахгүй. html кодсайт уу. Үнэн, үүнийг гадагш гаргаж болно тусдаа файл. Гэхдээ ая тухтай байлгахын тулд би бүгдийг нэг файлд хийсэн.

Энд хэлэх зүйл бага байна, энэ цас орж байгаа жагсаалыг үзэх нь дээр. Үүнээс гадна маш сайхан дэвсгэр, "Шинэ жилийн мэнд хүргэе" гэсэн бичээстэй сайхан фонт Google-ийн "Лобстер". Та энэ файлыг хялбархан интернетийн ил захидал болгож, баяр хүргэж болно.

Цасан ширхгүүд унах скриптийг бэлэн сайт руу холбох

1. jQuery номын санг оруулна уу

Энэ нь дараах байдлаар холбогддог: шошго хооронд болондараах кодыг буулгана уу:

2. Загваруудыг холбох

css кодыг css файлдаа буулгана уу (ихэвчлэн style.css):

#canvas (хүрээ: 1px хатуу хар; байрлал: үнэмлэхүй; z-индекс: 10000; ) #flake (өнгө: #fff; байрлал: үнэмлэхүй; үсгийн хэмжээ: 25px; дээд: -50px; )

3. snow.js файл үүсгэнэ

snow.js файл үүсгээд дараах javascript кодыг энд оруулцгаая.

js файлыг оруулна уу :

4. HTML код оруулна уу

За, хамгийн чухал зүйл бол цас унах html кодыг аль ч газарт оруулах явдал юм :

Хэрэв та бүх зүйлийг зөв хийсэн бол таны сайт дээр цас орж эхэлнэ.

Дэвсгэр зураг, том толгой, унасан цасан ширхгийг холбож байна

Энэ хувилбар нь байгаа гэдгээрээ ялгаатай Арын зурагмөн том "Шинэ жилийн мэнд хүргэе" гэсэн гарчигтай. Цасан скриптийн энэ хувилбарыг сайт руу холбох нь маш энгийн. Хэрэгтэй:

1. Архивыг татаж аваад задлаарай

2. jQuery номын санг оруулна уу

jQuery номын санг оруулахаа мартуузай (хэрэв танд энэ номын сан байгаа бол шаардлагагүй). Энэ нь дараах байдлаар холбогддог: шошго хооронд болондараах кодыг буулгана уу:

3. "Лобстер" фонтыг холбоно уу.

jQuery номын сантай адил бид "Шинэ жилийн мэнд хүргэе" гэсэн бичээсийнхээ фонтыг оруулсан болно.

Мэдээжийн хэрэг, хэрэв танд энэ бичээс, фонт хэрэггүй бол та үүнийг оруулах боломжгүй, гэхдээ дараа нь css дээр "font-family: "Lobster", cursive;" шинж чанарыг H1-ээс хасах эсвэл өөрийн фонтоор солих хэрэгтэй.

4. Загварууд орно

Сонголт А. css кодыг css файлдаа буулгана уу. Энд код байна:

Img.bg ( /* Арын дэвсгэрийг дүүргэх дүрмийг тохируулах */ мин-өндөр: 100%; мин-өргөн: 1024px; /* Пропорциональ масштабыг тохируулах */ өргөн: 100%; өндөр: автомат; /* Байршлыг тохируулах */ байрлал: тогтмол; дээд: 0; зүүн: 0; ) h1 (фонт-гэр бүл: "Хамч", курсив; өнгө: #FFF; үсгийн хэмжээ: 90px; текстийг зэрэгцүүлэх: төв; мөрийн өндөр: 95px; фонт- жин: хэвийн; захын дээд: 300 пиксел; текст-сүүдэр: 5px 5px 5px #000; ) @media дэлгэц ба (хамгийн их өргөн: 1024px) ( /* Энэ зургийн онцлог */ img.bg ( зүүн: 50% ; зүүн талын ирмэг: -512px; /* 50% */ ) ) html, бие (фонт-бүлэг: Helvetica, Arial, sans-serif; үсгийн хэмжээ: 12px; мөрийн өндөр: 16px; дүүргэх: 0; захын зай: 0; өнгө: #333; ) .bar (арын дэвсгэр өнгө: #111; өнгө: #f0f0f0; хайрцаг-сүүдэр: 0px 0px 2px #333; шугамын өндөр: 25px; дүүргэлт: 0px 20px; тунгалаг байдал: 0.7; ) . bar:hover ( тунгалаг байдал: 1; ) .bar a (өнгө: #DDD; ) .bar a:hover ( өнгө: #FFFFFF; ) a ( өнгө: #FFFFFF; текстийн чимэглэл: байхгүй; ) a:hover ( өнгө : #CCC; ) #canvas (хүрээ: 1px хатуу хар; байрлал: абсолют e; z индекс: 10000 ) #flake (өнгө: #fff; байрлал: үнэмлэхүй; үсгийн хэмжээ: 25px; дээд: -50px; ) #хуудас (байршил: харьцангуй; )

Б хувилбар.Та мөн тусдаа файл үүсгэж болно, жишээ нь snow.css мөн ижил кодыг тэнд буулгаж болно, гэхдээ үүнийг толгойд дараах байдлаар оруулах шаардлагатай болно.

5. Унаж буй цасны скриптийг холбоно

Сонголт А.Үүнийг хийхийн тулд бид сайтын хамгийн доод хэсэгт (хаахаас өмнө) оруулах хэрэгтэй) дараах javascript код:

Б хувилбар.Яг л css кодын нэгэн адил javascript-г тусдаа файлд хийж, мөн snow.js гэж нэрлээд толгойд нь оруулж болно:

6. Арын дэвсгэр зургийг бөглөнө үү

Архиваас bg.jpg зургийг сайтынхаа эх рүү байршуулна уу

7. HTML код оруулах

Хамгийн чухал зүйл бол цас орж буй html кодыг оруулах явдал юм.

Цас унах скрипт амжилттай холбогдсон. Үйлдлээр нь шалгахаа мартуузай. Хамгийн сайн сайхныг хүсье!