css3 ашиглан баннер үүсгэхэд хялбар. CSS3 ашиглан хөдөлгөөнт баннер. Хөдөлгөөнт шилжилттэй CSS3 навигаци

Тэмдэглэгээний бүтцийг ойлгохын тулд завин дээр хэсэг хугацаанд анхаарлаа хандуулцгаая.

>

>
>
>
Одоо demo хуудасны эхний баннерыг харцгаая. Усан онгоцонд гурван тусдаа хөдөлгөөнт дүрс байдаг:
• Хөдөлгөөнт дүрс - завь зүүн талдаа гулсах үед. Энэ нь шууд эрэмблэгдээгүй жагсаалтад (завины элементүүдийн бүлэг) хамаарна.
• Хөдөлгөөнт дүрслэл - энэ нь усан дээр хөвж буй завийг дуурайж, завинд сэгсрэх эффект өгдөг. Энэ нь жагсаалтын зүйлд (завь) шууд хамаарна.
• Хөдөлгөөнт дүрс - асуултын тэмдгийг нуудаг. Энэ нь div (асуултын тэмдэг)-д хамаарна.
Хэрэв та далайн өвчнөөр өвддөггүй бол демо хуудсыг дахин хараарай. Жагсаалтын зүйлд (завь) хэрэглэсэн хөдөлгөөнт дүрс нь завийг дээшлүүлж, доторх DIV-д (асуултын тэмдэгтэй) нөлөөлж байгааг та харах болно. Нэмж дурдахад, эрэмбэлэгдээгүй жагсаалтад (бүлэг) хэрэглэгдэх "гулсуулах" хөдөлгөөнт дүрс нь жагсаалтын элемент болон доторх DIV-д (завь ба асуултын тэмдэг) мөн нөлөөлдөг. Энэ нь биднийг чухал ажиглалтад хүргэдэг:
Хүүхдийн элементүүд нь өөрийн хөдөлгөөнөөс гадна эцэг эхээсээ хөдөлгөөнт дүрсийг өвлөн авдаг.Энэхүү мэдлэгийг манай зэвсэглэлд нэмж оруулсан боловч хөдөлгөөнт дүрс үүсгэх үед хүүхэд/эцэг эхийн элементүүдийн тоо таны оюун санааг (мөн таны эмээгийн зөөврийн компьютер дээрх процессор) сүйрүүлэх болно!
CSS
Бид үнэхээр сонирхолтой зүйл рүү орж, хөдөлгөөнт дүрс үүсгэж эхлэхээсээ өмнө 18-р зуунд гацсан хөтчүүдэд зориулж хэв маягийг бий болгох шаардлагатай хэвээр байна.
Хуучин хөтчүүдэд зориулсан буцах загварууд

Бид зүгээр л CSS анимэйшн байхгүй юм шиг арын загваруудыг бий болгоно (CSS хөдөлгөөнт дүрс байхгүй гэж бодохоор ямар ч насанд хүрсэн хүн уйлуулаад зогсохгүй миний хажууд дүүжлэгдэх болно :)). Өөрөөр хэлбэл, хэрэв манай хөдөлгөөнт дүрс тоглуулж чадахгүй бол баннер сайхан харагдах ёстой. Ингэснээр хэн нэгэн хуучин хөтчөөр баннерыг үзэхэд хоосон зайны оронд ердийн, хөдөлгөөнгүй баннер харагдах болно.
Жишээ нь: хэрэв хэн нэгэн ийм CSS ашигладаг бол асуудал гарна:
/* БУРУУ ЗАМ! */

0% (тунгалаг байдал: 0; )
100% (тунгалаг байдал: 1; )
}
Див (
тунгалаг байдал: 0; /* Энэ блок анхдагчаар далдлагдсан!*/

}
Хэрэв хэрэглэгчийн хөтөч хөдөлгөөнт дүрсийг дэмждэггүй бол баннер нь хэрэглэгчдэд үл үзэгдэх болно. Дараа нь үйлчлүүлэгч гартаа цахилгаан хөрөө барин худалдагчийн оффисын хаалгыг эвдэж, яагаад бүтээгдэхүүнээ зараагүйгээ тайлбарлахыг шаардах болно! Хэрэв тэд хөтчийг ийм өрөвдмөөр гэдгийг ойлгохгүй бол тэдний амьдрал аймшигтайгаар дуусч, сүүлчийн үг нь Internet Explorer-г хараах болно... :)
Гэхдээ санаа зовох хэрэггүй, бид хөтөчийн өргөтгөсөн дэмжлэг үзүүлэх болно:
/* ЗӨВ ЗАМ */
@keyframe бидний анимац дахь бүдгэрч (
0% (тунгалаг байдал: 0; )
100% (тунгалаг байдал: 1; )
}
Див (
тунгалаг байдал: 1; /* энэ div нь анхдагчаар харагдах болно */
хөдөлгөөнт дүрс: бидний-хөдөлгөөнт 1s 1 ;
}
Таны харж байгаагаар хөдөлгөөнт дүрс тоглуулж чадаагүй ч DIV харагдах болно. Хэрэв хөдөлгөөнт дүрс тоглох боломжтой бол DIV шууд нуугдаж, хөдөлгөөнт дүрс дуустал тоглогдоно.
Одоо бид хөдөлгөөнт баннеруудаа хуучин хөтчүүдийг хэрхэн дэмжихээ мэддэг болсон тул үндсэн CSS рүү шилжье.
Гурван гол зүйлийг анхаарч үзэх хэрэгтэй.
• Эдгээр зарыг янз бүрийн вэбсайтад ашиглаж болох тул, Бид бүх CSS загвараа маш тодорхой болгох болно. Бид сонгогч бүрийн мэдэгдлийг id: #ad-1-ээр эхлүүлнэ. Энэ нь манай баннерын хэв маягийг одоо байгаа хэв маяг, элементүүдэд саад учруулахгүй байх болно.
• Бид зорилготой байх болно хөдөлгөөнт саатлын функцийг үл тоомсорлохбидний хөдөлгөөнт дүрсийг үүсгэх үед. Хэрэв бид хөдөлгөөнт дүрсийг хойшлуулах функц, түүнчлэн элементүүдийнхээ дизайныг зөв ашигласан бол (анхдагчаар харагдана) энэ бүхэн хөдөлгөөнт дүрсийг тоглож эхлэхээс өмнө дэлгэцэн дээр харагдах болно. Ийм учраас хөдөлгөөнт дүрс нэн даруй эхэлдэг бөгөөд энэ нь бидэнд хэрэгтэй болтол дэлгэцэн дээрх элементүүдийг нуух боломжийг олгодог. Бид үргэлжлэх хугацааг нэмэгдүүлэх, түлхүүр фрэймүүдийг гараар тохируулах замаар хөдөлгөөнт дүрсийн саатлыг дуурайна. Бид хөдөлгөөнт дүрс үүсгэж эхлэх үед та үүний жишээг харах болно.
• Хэрвээ боломжтой бол, олон элементэд нэг хөдөлгөөнт дүрс ашиглах. Ингэснээр бид маш их цаг хэмнэж, кодын бөглөрөлтийг багасгаж чадна. Та үргэлжлэх хугацаа болон шилжилтийг тохируулснаар нэг хөдөлгөөнт дүрс дотор хэд хэдэн өөр эффект үүсгэж болно.
Тиймээс бид сурталчилгааны баннераа бүтээж эхэлнэ. Түүний доторх элементүүдийг зөв байрлуулахын тулд харьцангуй байрлалтай (байрлал: харьцангуй) байгаа эсэхийг шалгацгаая. Мөн бид overflow: hidden property нь шаардлагагүй бүх зүйлийг нуухаар ​​тохируулагдсан эсэхийг шалгах хэрэгтэй:
#зар-1 (
өргөн: 720px;
өндөр: 300px;
хөвөх: зүүн;
захын зай: 40px автомат 0;
background-image: url (../images/ad-1/background.png );
дэвсгэр байрлал: төв;
дэвсгэр давталт: давтагдахгүй;
халих: далд;
албан тушаал: харьцангуй;
хайрцаг-сүүдэр: 0px 0px 6px #000 ;
}
#зар-1 #контент (
өргөн: 325px;
хөвөх: баруун;
захын зай: 40px;
текстийг зэрэгцүүлэх: төв;
z индекс: 4;
албан тушаал: харьцангуй;
халих: харагдахуйц;
}
#ad-1 ц2 (
font-family : "Alfa Slab One" , курсив;
өнгө: #137dd5;
үсгийн хэмжээ: 50px;
шугамын өндөр: 50px;

хөдөлгөөнт дүрс: удаашралтай бүдгэрч-хөдөлгөөнт дүрс 7s 1 хялбараар гарах; /* H2 нь дууриамал хөдөлгөөнт сааталаар унтарна */
}
#ad-1 ц3 (

өнгө: #202224;
үсгийн хэмжээ: 31px;
шугамын өндөр: 31px;
текст-сүүдэр: 0px 0px 4px #fff ;
хөдөлгөөнт дүрс: удаашралтай бүдгэрч анимейшн 10 секундын 1 хялбар оруулах; /* H3 дууриамал хөдөлгөөнт сааталаар унтарна */
}
#ad-1 маягт (
захын зай: 30px 0 0 6px;
албан тушаал: харьцангуй;
хөдөлгөөнт дүрс: хэлбэр-хөдөлгөөнт 12s 1 хялбар оруулах; /* Энэ код нь манай цахим шуудангийн маягтыг зөөнө */
}
#зар-1 #имэйл (
өргөн: 158px;
өндөр: 48px;
хөвөх: зүүн;
дүүргэх: 0 20px;
үсгийн хэмжээ: 16px;
font-family: "Lucida Grande", sans-serif;
өнгө: #fff;
текст-сүүдэр: 1px 1px 0px #a2917d ;
хилийн-дээд-зүүн-радиус: 5px ;
хилийн-доод-зүүн-радиус: 5px ;
хил: 1px хатуу #a2917d;
тойм: байхгүй;
хайрцаг-сүүдэр: -1px -1px 1px #fff ;
дэвсгэр өнгө: #c7b29b;
дэвсгэр зураг: шугаман-градиент (доод, rgb (216, 201, 185) 0%, rgb (199, 178, 155) 100%);
}
#зар-1 #мэйл :фокус (
дэвсгэр зураг: шугаман-градиент (доод, rgb (199, 178, 155) 0%, rgb (199, 178, 155) 100%);
}
#зар-1 #илгээх (
өндөр: 50px;
хөвөх: зүүн;
курсор: заагч;
дүүргэх: 0 20px;
үсгийн хэмжээ: 20px;
font-family : "Boogaloo" , курсив ;
өнгө: #137dd5;
текст-сүүдэр: 1px 1px 0px #fff ;
хүрээ-дээд-баруун-радиус: 5px ;
хүрээ-доод-баруун-радиус: 5px ;
хүрээ: 1px хатуу #bcc0c4;
хилийн зүүн : байхгүй ;
дэвсгэр өнгө: #fff;
дэвсгэр зураг: шугаман градиент (доод, rgb (245, 247, 249) 0%, rgb (255, 255, 255) 100%);
}
#зар-1 #илгээх :хулгана (
дэвсгэр зураг: шугаман-градиент (доод, rgb (255, 255, 255) 0%, rgb (255, 255, 255) 100%);
}
Одоо бид усны хэв маягийг үүсгэж, тохирох хөдөлгөөнт дүрсийг дуудах болно.
#ad-1 ul#ус (
/* Хэрэв бид усанд өөр хөдөлгөөнт дүрс нэмэхийг хүсвэл (жишээлбэл, хэвтээ чиглэлд хөдөлж байгаа бол) энд хийж болно */
}
#ad-1 li#ус-буцах (
өргөн: 1200px;
өндөр: 84px;
background-image: url (../images/ad-1/water-back.png );

z индекс: 1;
байрлал: үнэмлэхүй;
доод тал: 10px;
зүүн: -20px;
хөдөлгөөнт дүрс: ус буцах хөдөлгөөнт 3s хязгааргүй хялбар оруулах; /* Ус үсрэх эффект */
}
#ad-1 li#усан урд (
өргөн: 1200px;
өндөр: 158px;
дэвсгэр зураг: url ( ../images/ad-1/water-front.png) ;
дэвсгэр-давталт: давтах-x;
z индекс: 3;
байрлал: үнэмлэхүй;
доод тал: -70px;
зүүн: -30px;
хөдөлгөөнт дүрс: усан урд-хөдөлгөөнт 2s хязгааргүй хялбар оруулах; /* Өөр нэг ус үсрэх нөлөө - энэ нь арай өөр юм. Бид хэтийн төлөвийг бий болгохын тулд энэ хөдөлгөөнт дүрсийг бага зэрэг хурдасгах болно. */
}
Одоо завь болон түүний бүх элементүүдийн хэв маягийг бий болгоцгооё. Дахин хэлэхэд бид тохирох хөдөлгөөнт дүрсийг дуудах болно:
#ad-1 ul#завь (
өргөн: 249px;
өндөр: 215px;
z индекс: 2;
байрлал: үнэмлэхүй;
доод: 25px;
зүүн: 20px;
халих: харагдахуйц;
хөдөлгөөнт дүрс: boat-in-animation 3s 1 ease-out; /* Бүлгийг эхэнд нь шилжүүлэх */
}
#ad-1 ul#boat li (
өргөн: 249px;
өндөр: 215px;
background-image: url (../images/ad-1/boat.png );
байрлал: үнэмлэхүй;
доод: 0px;
зүүн: 0px;
халих: харагдахуйц;
хөдөлгөөнт дүрс: завь-хөдөлгөөнт 2s-ийн хязгааргүй хялбар; /* Усан дээр эргэлдэж буй завины дууриамал - үүнтэй төстэй хөдөлгөөнт дүрсийг усан дээр аль хэдийн ашигласан. */
}
#зар-1 #асуултын тэмдэг (
өргөн: 24px;
өндөр: 50px;
дэвсгэр зураг: url ( ../images/ad-1/question-mark.png) ;
байрлал: үнэмлэхүй;
баруун: 34px;
дээд: -30px;
хөдөлгөөнт дүрс: хоцролттой бүдгэрч анимейшн 4с 1 хялбархан гарах; /* Асуултын тэмдгийг нуух */
}
Эцэст нь бид бүлэг үүл болон нэг үүлэнд зориулсан хэв маягийг бий болгоно. Бид мөн тэдэнд тасралтгүй гүйлгэх эффект өгөх хөөрхөн хөдөлгөөнт дүрсийг өдөөх болно. Юу болох тухай жишээ энд байна:

Эдгээр нь хэв маяг юм:
#зар-1 #үүл (
байрлал: үнэмлэхүй;
дээд: 0px;
z индекс: 0;
хөдөлгөөнт дүрс: үүл-хөдөлгөөнт 30-аад оны хязгааргүй шугаман; /* Үүлийг зүүн тийш хязгааргүй олон удаа зөөнө */
}
#ad-1 #Cloud-group-1 (
өргөн: 720px;
байрлал: үнэмлэхүй;
зүүн: 0px;
}
#ad-1 #Cloud-group-2 (
өргөн: 720px;
байрлал: үнэмлэхүй;
зүүн: 720px;
}
#ad-1 .Cloud-1 (
өргөн: 172px;
өндөр: 121px;
background-image: url (../images/ad-1 /cloud-1 .png);
байрлал: үнэмлэхүй;
дээд: 10px;
зүүн: 40px;
}
#ad-1 .Cloud-2 (
өргөн: 121px;
өндөр: 75px;
background-image: url (../images/ad-1 /cloud-2 .png);
байрлал: үнэмлэхүй;
дээд: -25px;
зүүн: 300px;
}
#ad-1 .Cloud-3 (
өргөн: 132px;
өндөр: 105px;
background-image: url (../images/ad-1 /cloud-3 .png);
байрлал: үнэмлэхүй;
дээд: -5px;
зүүн: 530px;
}
Уфф! Маш олон CSS код байсан. Гэхдээ хамгийн сонирхолтой зүйл бол дараагийнх юм!
Хөдөлгөөнт дүрс

Санаж байна уу: Энэ мөч хүртэл бодит хөдөлгөөнт дүрс байгаагүй. Хэрэв та одоо баннерыг үзэх гэж байгаа бол хуучин хөтчөөс ч харуулах ямар нэг зүйлийг харах болно - статик зар. ХАМТодооБид CSS коддоо аль хэдийн дуудсан хөдөлгөөнт дүрсийг бүтээх болно.
Одоо манай баннер сайн харагдаж байгаа тул энэ статик зарыг амилуулцгаая! Код руу шууд орцгооё - би танд юу болохыг тайлбар дээр хэлэх болно.
Дүгнэлт
Энэ хичээлийн үеэр бид хуучин хөтчүүдийг дэмждэг хөдөлгөөнт дүрс үүсгэх гол санааг олж мэдсэн.
1. Хүүхдийн элементүүд нь өөрийн хөдөлгөөнөөс гадна эцэг эхийнхээ хөдөлгөөнт дүрсийг өвлөн авдаг. Үүнийг бид илүү төвөгтэй хөдөлгөөнт дүрс үүсгэхэд ашиглаж болно.
2. Манай зар сурталчилгааны хэв маягийн хувьд бид маш тодорхой сонгогч ашиглах ёстой бөгөөд ингэснээр манай зарыг бусад сайтын хэв маягаар дарахгүй байх ёстой.
3. Элементүүдийн хэв маягийг тохируулах шаардлагатай бөгөөд хэрэв бидний хөдөлгөөнт дүрс тоглуулах боломжгүй бол зар нь зохистой харагдах болно.
4. Боломжтой бол хэд хэдэн элементэд нэг хөдөлгөөнт дүрс ашиглана уу - бид цагийг хэмнэж, кодын тархалтаас сэргийлдэг.
5. Бид жигшин зэвүүцсэн, уурласандаа нударгаараа сэгсэрч байхдаа Internet Explorer-г ихэвчлэн "18-р зууны хөтөч" гэж нэрлэдэг. :)
Таны CSS туршилтанд амжилт хүсье.
Сайн байцгаана уу, даалгавар бол: "Дэлгэцийн өөр өөр хэмжээтэй тохирох HTML баннер үүсгэх, энэ нь үлдсэн хугацаанд тоолуур, хаах товчлууртай байх ба энэ бүхэн шилжилтийн статистикийг цуглуулахын тулд товшилтыг тоолох ёстой. TT Adriver дээр."
Эхлээд ийм баннер үүсгэхэд хамгийн алдартай формат юу болохыг олж мэдье.
Ерөнхийдөө эдгээр баннеруудын тоо маш их байдаг бөгөөд та эндээс бүх техникийн шаардлага, форматтай танилцаж болно: товшино уу, гэхдээ бид зөвхөн цөөн хэдэн зүйлийг ашиглах болно; Үлдсэн хэсэг нь хамааралгүй болсон эсвэл бараг давтах нь:
1. FullScreen баннерууд - метронд эсвэл wifi вэбсайтаас үзэх боломжтой баннерууд нь бүтэн дэлгэц болж өргөжиж, тоолуур болон хаах товчлууртай. Ийм баннер үүсгэхийн тулд бид зүгээр л статик зураг эсвэл энгийн GIF хөдөлгөөнт дүрс (600KB-аас ихгүй) бэлдэж, дараа нь бүх зүйлийг HTML дээр байрлуулна.

   Бүтэн дэлгэцийн баннер

2. FullWidth баннер нь аль хэдийн илүү сонирхолтой болсон боловч үнэн хэрэгтээ энэ нь ердийн HTML5 баннер бөгөөд зөвхөн дэлгэцийн өргөний 100% хүртэл сунадаг, гэхдээ тогтмол өндөртэй. Ийм баннерууд нь ихэвчлэн хөдөлгөөнт дүрсийг ашигладаг бөгөөд аль хэдийн ийм программ дээр бүтээгдсэн байдаг google вэб дизайнер, Adobe Edge Animate , Adobe Animate CC . Би хувьдаа Edge Animate-г идэвхтэй ашигладаг, энэ нь илүү тохиромжтой, хурдан бөгөөд HTML5 руу хурдан байршуулах чадвартай. Ийм баннер үүсгэх үед энэ баннер нь янз бүрийн дэлгэцийн хэмжээтэй хэрхэн харагдах тухай сонголт бүхий өгүүллийн самбарыг бүтээдэг.

   

   100% өргөнтэй баннер өгүүллэгийн самбар

3. Тогтмол хэмжээтэй эсвэл статик баннер - энэ нь маш энгийн зүйл юм. Энд та зүгээр л бүтээлч эсвэл үлгэрийн самбар үүсгэх бөгөөд товшилтыг тоолох кодыг бичих л үлдлээ. Ийм баннер үүсгэхийн тулд би ихэвчлэн Adobe Photoshop эсвэл Edge Animate ашигладаг - хэрэв энэ нь хөдөлгөөнт дүрс юм. Энд хэзээ ч GIF бүү ашиглаарай!Та 600KB хүртэлх хэмжээтэй gif хөдөлгөөнт дүрсийг хэзээ ч байршуулах боломжгүй бөгөөд хэрэв хөдөлгөөнт дүрс нь илүү жинтэй бол үүнийг зөвшөөрөхгүй. Ердийн HTML баннер нь 200 КБ жинтэй ч хүрэхгүй тул та энд бүрэн хэмжээгээр үүсгэж болно гэсэн үг юм.

Тогтмол хэмжээс бүхий баннер өгүүллэгийн самбар
Бүх дүрмийн дагуу FullScreen баннер үүсгэх гарын авлага
Ийм баннер үүсгэх нь дэлгэцийн хэмжээ өөрчлөгдөхөд түүний хэмжээ өөрчлөгдөх бөгөөд энэ нь дэлгэцийн бүх хэсгийг эзлэх болно гэсэн үг юм.
Энэ нь зураг нь бүх төхөөрөмж дээр адилхан сайн харагдах ёстой гэсэн үг бөгөөд ийм байх ёстой гэсэн дүгнэлтэд хүрч байна нэлээд сайн чанартайхэмжээ нь ойролцоо байна дөрвөлжин(тогтмол хэмжээ байхгүй, энд бүх зүйл уян хатан байдаг). Одоогийн байдлаар бид хөдөлгөөнт төхөөрөмж (гар утас) болон таблет (таблет) дээр анхаарлаа төвлөрүүлж байгаа тул хөрөг горимд (хөрөг) үзэхийн тулд тэгш өнцөгтийг авдаг. Photoshop руу очоод шаардлагатай хэмжээтэй баримт бичгийг үүсгээрэй, энэ тохиолдолд ийм байна 536x714:

FullScreen баннер үүсгэх Gif эх сурвалж
Би хоёр фреймээс GIF бүтээсэн, жин нь 242KB, бидний жин үргэлж 600KB хүртэл байх ёстой, үүнийг санаарай. Одоо бид үүнийг жинхэнэ HTML баннер болгох хэрэгтэй. Бид FullScreen баннер үүсгэх зааврыг нээж, түүнээс техникийн шаардлагыг аваад хаадаг, энэ нь маш болхи бичигдсэн байдаг. Flash-ийн тухай март, энэ нь баатарлаг үхлээр нас барсан, бидэнд зөвхөн HTML5 байгаа тул Ajax кодыг ашиглан баннер үүсгэх техникийн шаардлага хэрэгтэй.
Бүдүүвч дээр ямар ч хязгаарлалт байхгүй, энд бид хүссэн бүхнээ хийх боломжтой, гол зүйл бол үндсэн шинж чанарууд байдаг, тухайлбал: Баннераас товшихыг уншсан, тоолуур, хаах загалмай байдаг. Кодлохын тулд би Sublime Text үнэгүй програм хангамжийг ашигладаг.
Бид миний загвараас HTML файлыг нээгээд харна:

Стандарт FullScreen баннер код



Хаах товч
Баннер дээрх товшилтыг өөрөө хэрхэн уншдаг вэ? Бид яагаад баннер хөтлөх ёстой хуудсуудын холбоосыг оруулаагүй юм бэ? Тиймээс... Adriver систем нь сайт руу орох линкүүдийг бүртгэх боломжийг олгодог ба баннеруудыг системд ачаалсны дараа бид эх коддоо зөвхөн системд ачаалах үед солигддог хувьсагчийг бүртгэдэг болох нь харагдаж байна. бидний ажил байхаа больсон. Энэ тохиолдолд бид манай баннер байрладаг бүх контейнер, ерөнхийдөө бидний байрлуулсан бүх зүйл дээр товшилтыг бүртгэдэг.
бидний хувьд энэ нь баннер бөгөөд товшилтыг эндээс уншдаг. Бусад баннеруудын хувьд өөр өөр техникийн шаардлага байдаг бөгөөд товшилтыг өөр өөрөөр уншдаг, одоо бид тодорхой жишээг харж байна.
Баннер бүхий сав
Бусад хичээлүүд дээр би анимейшн ашиглан дэлгэцийн 100% өргөнтэй баннер хэрхэн үүсгэх, бүх дүрмийн дагуу вэбсайтын байршлыг хэрхэн үүсгэж, бэлтгэх талаар танд хэлэх болно.
Хичээлийн файлууд:
1. Бүрэн дэлгэцийн бэлэн баннерууд: товшино уу
Анхаарал тавьсанд баярлалаа.
Хамгийн тодуудын нэг нь эргэлзээгүй чиг хандлага 2012хөгжүүлэлт явагдаж байна CCS3, HTML5. Өнөөдөр бид жишээнүүдийн том бөгөөд маш хэрэгтэй тоймыг санал болгож байна " 20+: CSS3 дээр бүтээлч, хэрэгтэй хичээлүүд"дээр санал болгож байна Specky Boy. Бүх жишээнүүд дээр хийгдсэн JavaScriptгүйгээр цэвэрхэн, танилцуулсан хичээлүүд нь демо болон татаж авахад бэлэн CSS3 файлуудыг агуулдаг.
Эдгээр аргууд нь вэб хөгжүүлэгчдэд хэрэг болно гэдэгт бид итгэлтэй байна!
css3 хичээлүүд :
1. CSS3 зургийн галерей, гулсагч, зурагтай эффект
1.1.CSS3 дээрх гулсагч
Би үүнд итгэж чадахгүй байна, гэхдээ өөр өөр эффект бүхий энэ гулсагчийг зөвхөн CSS3 дээр хийсэн, маш гайхалтай.
1.2. CSS3 ашиглан гулсагч эффект бүхий бүтэн дэлгэцийн вэбсайтын арын дэвсгэр
Вэб дизайнерууд удаан хугацааны туршид сайтын өөр өөр дэвсгэрийг туршиж үзсэн боловч өнөөг хүртэл цэвэр CSSБид JS-г ашиглах ёстой байсан зүйл маш бага байсан; Одоо CSS3 нь танд сайтынхаа арын дэвсгэрийг хүссэнээрээ хийх боломжийг олгож байна - та том хэмжээтэй, өндөр чанартай гэрэл зурагтай нэг дэвсгэртэй байх боломжтой, янз бүрийн эффект бүхий хэд хэдэн дэвсгэрийг өөрчлөх боломжтой, арын дэвсгэрийн цар хүрээг өөрчлөх боломжтой. дэлгэцийн параметрүүд. Ерөнхийдөө бүтээлч сайтуудын хувьд гайхалтай боломж.
1.3. CSS3 дээрх Lightbox
Энэхүү зааварчилгааны тусламжтайгаар та цэвэр CSS ашиглан төрөл бүрийн эффект бүхий Lightbox хэрхэн бүтээх талаар суралцах боломжтой.
1.4. CSS3 зургийн шинж чанарууд
Энэ заавар нь дугуйрсан булан, сүүдэр болон бусад эффект гэх мэт зургийн шинж чанаруудын CSS3-ийн шинэ боломжуудыг харуулж байна.
1.5. CSS3 бүхий хөдөлгөөнт баннер
1.6 CSS3 дээр ачаалах самбар
1.7. CSS3 бүхий 3D тууз

Демо үзэх эсвэл CSS3 кодын файлуудыг татаж авах →
2. CSS3 цэс, навигаци болон товчлуурууд
2.1. CSS3 дээрх Apple.com цэс
CSS3 дээр алдартай Apple.com цэсийг үүсгэх заавар.
2.2. CSS3 дээрх хөдөлгөөнт хэвтээ цэс
CSS3 дээр янз бүрийн эффект бүхий хөдөлгөөнт цэсийг хэрхэн хийхийг харуулсан энгийн заавар.
2.3. CSS3 бүхий хөдөлгөөнт босоо цэс
2.4. CSS3 бүхий хөдөлгөөнт товчлуурууд
Хөдөлгөөнт бүтээлч товчлуурын 7 жишээ бүхий гайхалтай заавар.
2.5. CSS3 ашиглан зураг бүхий бүтээлч хөдөлгөөнт цэс
Энэ хичээл дээр танилцуулсан 10 жишээ нь зүгээр л нүдийг нээж байна. Ийм цогц бүтээлч цэсийг зөвхөн JS ашиглан бүтээдэг байсан. Сэтгэл хөдөлгөм!
2.6. CSS3-тай дугуй чиглүүлэх эффект
Сонгосон навигацийн зүйл дээр хулганыг дүрс бүхий тойрог хэлбэрээр гүйлгэхэд ер бусын нөлөө үзүүлдэг. Тэмдэглэл авах!
2.7. CSS3 дээрх унадаг цэс
CSS3 дээр дэд түвшний энгийн унждаг цэсийг хэрэгжүүлэх заавар.
2.8. Хөдөлгөөнт шилжилттэй CSS3 навигаци
3. CSS3 дээр янз бүрийн эффектүүд
3.1. JQuery-гүй CSS3 дээрх хөдөлгөөнт хэрэгслийн зөвлөмж

CSS3 ашиглан сурталчилгааны баннер хийцгээе. Одоогоор зөвхөн CSS3 хөдөлгөөнт дүрсийг бүрэн дэмжиж байна Firefox хөтчүүдболон WebKit. Гэхдээ баннерыг бусад хөтөч дээр ажиллуулахад хангалттай хялбар. Гэсэн хэдий ч, хамгийн сүүлийн үеийн CSS техникийг туршиж үзэхдээ хаа сайгүй (ялангуяа IE 7 ба түүнээс дээш хувилбаруудад) гайхалтай гүйцэтгэлийг хүлээх хэрэггүй.
Жич:Хуудас дээрх зай хэмнэхийн тулд бүх хөтөч үйлдвэрлэгчийн угтваруудыг хассан. Кодыг эх сурвалжаас харна уу.
HTML тэмдэглэгээ
Эхлээд HTML дээрх баннерын бүтцийг харцгаая. Энэ үе шатанд бид хөдөлгөөнт дүрс хэрхэн ажиллахыг төсөөлөх хэрэгтэй.
Алдагдсан уу?
Тайвшир - бид туслах болно.

Тэмдэглэгээний бүтцийг илүү гүнзгий ойлгохын тулд завь дээр анхаарлаа хандуулцгаая.
Завьтай хамт гурван хөдөлгөөнт дүрс гардаг:
Завь зүүн талаараа гулсаж байна. Эрэмбэлэгдээгүй жагсаалтад (бүлэг) хамаарна.

Усан дээр эргэлдэж буй завины дууриамал. Жагсаалтын зүйлд (завь) хамаарна.

Асуултын тэмдгийн харагдах байдал. div элементэд (асуултын тэмдэг) хамаарна.
Хэрэв та демо хуудсыг харвал жагсаалтын зүйлд (завь) зориулсан хөдөлгөөнт дүрс нь түүний доторх div элементэд (Асуулт тэмдэг) нөлөөлж байгааг харж болно. Мөн эрэмблэгдээгүй жагсаалтын "гулсах" хөдөлгөөнт дүрс нь жагсаалтын зүйл (завь болон асуултын тэмдэг) дээр ажилладаг.
Тиймээс хүүхдийн элементүүд өөрсдийн үйлдлээс гадна эцэг эхийнхээ хөдөлгөөнт дүрсийг хүлээн авдаг гэж бид дүгнэж болно. Одоо зөвхөн эцэг эх/хүүхдийн бүтцийг жагсаах л үлдлээ.
CSS
Хөдөлгөөнт дүрс үүсгэж эхлэхээсээ өмнө хуучин хөтчүүдтэй буцаж нийцэж байгаа эсэхийг шалгах хэрэгтэй.
хоцрогдсон нийцтэй байдал
Бид зүгээр л CSS хөдөлгөөнт дүрс огт байхгүй мэт тэмдэглэгээг хийснээр буцаах нийцтэй байдлыг хангах болно. Хэрэв хэн нэгэн энэ хуудсыг хуучин хөтөч дээр харвал хоосон зай биш харин тогтмол статик дүрсийг харах болно.
Жишээлбэл: Хэрэв та CSS ашигладаг бол яах вэ? Дараахтай адил асуудал гарна:
/* БУРУУ! */ @keyframe бидний бүдгэрч буй хөдөлгөөнт дүрс ( 0% (тунгалаг байдал: 0;) 100% (тунгалаг байдал: 1;) ) div ( тунгалаг байдал: 0; /* Энэ див нь анхдагчаар далдлагдсан - уу! */ хөдөлгөөнт дүрс: манай -хөдөлгөөнт дүрслэл 1s 1 )
Хэрэв хөтөч хөдөлгөөнт дүрсийг дэмждэггүй бол div элемент нь хэрэглэгчдэд үл үзэгдэх болно.
Ингэж бид хуучин хөтчүүдтэй хоцрогдсон нийцтэй байдлыг хангах болно:
/* ҮНЭН */ @keyframe бидний бүдгэрч буй хөдөлгөөнт дүрс ( 0% (тунгалаг байдал:0;) 100% (тунгалаг байдал:1;) ) div ( тунгалаг байдал: 1; /* Энэ див нь анхдагчаар харагдана */ хөдөлгөөнт дүрс: манай -хөдөлгөөнт дүрслэл 1s 1 )
Одоо хөдөлгөөнт дүрс эхлэхгүй байсан ч div элемент харагдах болно. Тэгээд дотор орчин үеийн хөтөчХөдөлгөөнт дүрслэл хийх явцад эхлээд div нуугдах болно.
Суурь
Одоо бид хоцрогдсон нийцтэй байдлыг хэрхэн хангахаа мэддэг (энэ нь бодит төслүүдтэй ажиллахад бэрхшээлээс зайлсхийхэд тусална). Манай CSS кодын суурийг бий болгох цаг болжээ.
Та 3 цэгийг санах хэрэгтэй:
Баннерыг өөр өөр сайтуудад ашиглах тул Бид бүх CSS сонгогчоо онцгой болгох болно.Тэд бүгд #ad-1 танигчаас эхэлнэ. Ингэснээр бид өөрсдийн код болон сайтын кодын хооронд давхцахаас зайлсхийхийг хичээх болно.

Бид хөдөлгөөнт дүрсний саатлыг санаатайгаар үл тоомсорлож байнасуурилуулалтанд. Хэрэв та элементүүдийн анхдагч харагдахуйц хэв маягийг тохируулахдаа хөдөлгөөнт дүрсний саатал ашигладаг бол хөдөлгөөнт дүрс дууссаны дараа зургийн хэсэг гэнэт алга болох эсвэл харагдах байдлаас болж баннерын бүтэц эвдрэх болно. Хөдөлгөөнт дүрсний саатлыг фреймүүдийн үргэлжлэх хугацаа, тохиргоогоор дүрсэлдэг.

Боломжтой бол Бид хэд хэдэн элементэд нэг хөдөлгөөнт дүрсийг ашигладаг.Ингэснээр бид цаг хэмнэж, кодын хэмжээг багасгадаг.
Тиймээс хошууныхаа суурийг бий болгоё. Дотоод элементүүдийг зөв байрлуулахын тулд харьцангуй байрлалыг тогтооцгооё. Мөн элементийн хамрах хүрээнээс гадуур аливаа зүйлийг нуух болно:
#ad-1 (өргөн: 720px; өндөр: 300px; хөвөх: зүүн; захын зай: 40px авто 0; дэвсгэр зураг: url(../images/ad-1/background.png); дэвсгэр байрлал: төв; дэвсгэр -давталт: давтагдахгүй: нуугдмал: 0px 6px #000;
Дараа нь бид текст болон оруулах талбарт хэв маягийг тохируулна. Тохирох хөдөлгөөнт дүрсүүдийг дуудна уу. Та мөн хөдөлгөөнт хэсгүүдийг давхцуулахгүйн тулд контент нь хамгийн өндөр z-индекстэй эсэхийг шалгах хэрэгтэй:
#ad-1 #content (өргөн: 325px; хөвөх: баруун; захын зай: 40px; текстийг зэрэгцүүлэх: төв; z индекс: 4; байрлал: харьцангуй; халих: харагдахуйц; ) #ad-1 h2 ( font-family: "Alfa Slab One", курсийн өнгө: #137dd5; саатал */ ) #ad-1 h3 (фонт-гэр бүл: "Boogaloo", курсив; өнгө: #202224; үсгийн хэмжээ: 31px; мөрийн өндөр: 31px; текст-сүүдэр: 0px 0px 4px #fff; хөдөлгөөнт дүрс: саатсан -fade-animation 10s 1 ease-in-out; /* Загварласан сааталтай h3-ийн харагдах байдал */ ) #ad-1 хэлбэр (маржин: 30px 0 0 6px; байрлал: харьцангуй; хөдөлгөөнт дүрс: form-animation 12s 1 ease-in) -out; /* Захиалгат сааталтай имэйл хаяг оруулах маягтыг гулсуулж байна */ ) #ad-1 #email ( өргөн: 158px; өндөр: 48px; хөвөх: зүүн; padding: 0 20px; үсгийн хэмжээ: 16px; font-family: "Lucida Grande", sans-serif: 1px 1px 0px #a2917d хүрээ-доод-радиус: 5px; хил: 1px хатуу #a2917d; тойм: байхгүй; хайрцаг-сүүдэр: -1px -1px 1px #fff; дэвсгэр өнгө: #c7b29b; дэвсгэр зураг: шугаман-градиент(доод, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus (арын дэвсгэр зураг: шугаман-градиент(доод, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit (өндөр: 50px; хөвөх: зүүн cursor: padding: 0 20px font-shadow, cursive: 1px 0px #fff border: 1px background-color; fff; background-gradient(доод, rgb(245,247,249) 0% 255,255,255) 100%) ) #ad-1 #submit:hover (background-gradient(доод, rgb(255,255,255,525)%) ) 100%);
Одоо усны хэв маягийг тохируулж, тохирох хөдөлгөөнт дүрсийг дуудъя:
#ad-1 ul#water( /* Хэрэв танд усны өөр хөдөлгөөнт дүрс хэрэгтэй бол энд нэмж болно */ ) #ad-1 li#water-back ( өргөн: 1200px; өндөр: 84px; background-image: url( .. /images/ad-1/water-back.png); #ad-1 li#water-front (өргөн: 1200px; өндөр: 158px; дэвсгэр зураг: url(../images/ad-1/water-front .png); дэвсгэр давталт: z-индекс: 3; доод: -70px хөдөлгөөнт дүрс: усан урд анимейшн 2s-ийг дуурайх долгионы дүр төрхийг бий болгохын тулд хөдөлгөөнт дүрсийг бага зэрэг хурдан гүйцэтгэнэ */ )
Завь болон түүний элементүүдийн хэв маягийг тохируулцгаая. Бид мөн холбогдох хөдөлгөөнт дүрсүүдийг дууддаг:
#ad-1 ul#boat (өргөн: 249px; өндөр: 215px; z-индекс: 2; байрлал: үнэмлэхүй; доод тал: 25px; зүүн: 20px; халих: харагдахуйц; хөдөлгөөнт дүрс: завь-in-animation 3s 1 хялбар гарах ; /* Зар сурталчилгаа эхлэхэд бүлгийг гулсуулна */ ) #ad-1 ul#boat li ( өргөн: 249px; өндөр: 215px; background-image: url(../images/ad-1/boat.png); байрлал: абсолют: 0px overflow: animation: boat-animation 2s infinite ease-out - усан дээр аль хэдийн ашигласан хөдөлгөөнтэй төстэй. ad-1 #асуултын тэмдэг (өргөн: 24px; өндөр: 50px; дэвсгэр зураг: url(../images/ad-1/question-mark.png); байрлал: үнэмлэхүй; баруун: 34px; дээд: -30px анимейшн: хоцрогдсон анимаци 4с /* асуултын тэмдгээр бүдгэрэх */ ;
Одоо үүлэнд зориулсан хэв маягийг бий болгоцгооё. Тэдний хувьд бид төгсгөлгүй хөдөлгөөний эффект бүхий хөдөлгөөнт дүрсийг ашиглах болно. Зураг нь санааны мөн чанарыг харуулж байна:

Мөн энд CSS код байна:
#ad-1 #clouds (байрлал: үнэмлэхүй; дээд: 0px; z-индекс: 0; хөдөлгөөнт дүрс: cloud-animation 30s infinite linear; /* Үүлийг зүүн тийш гүйлгэж, дахин тохируулаад */ ) #ad-1 # cloud-group -1 (өргөн:720px; байрлал: үнэмлэхүй; зүүн:0px; ) #ad-1 #cloud-group-2 (өргөн: 720px; байрлал: үнэмлэхүй; зүүн: 720px; ) #ad-1 .cloud- 1 (өргөн: 172px; өндөр: 121px; url(../images/ad-1/cloud-1.png); байрлал: үнэмлэхүй дээд: 40px; (өргөн: 121px; өндөр: 75px; дэвсгэр зураг: url( ../images/ad-1/cloud-2.png); дээд: -25px; 300px; : url(../images/ad-1/cloud-3.png: дээд: 530px;
Анимацууд
Сануулга:Энэ мөчөөс эхлэн юу ч хөдөлгөөнтэй байдаггүй. Хэрэв та одоо манай баннерыг харвал хөдөлгөөнгүй дүрс харагдах болно. Энэ бол дээрх кодоор анимацуудыг үүсгэж, дууддаг газар юм.
Одоо үзэсгэлэнтэй статик зурагтаа амьсгаа авцгаая:
/* Загварчилсан саатлын хөдөлгөөнт дүрсийг олон элемент харуулахад ашигладаг. Сааталтай симуляцийг хөдөлгөөнт дүрсийн 80% үргэлжилсэн (мөн шууд биш) процессыг эхлүүлэх замаар гүйцэтгэдэг. Ингэснээр та аливаа саатлыг дуурайж болно: */ @keyframes delayed-fade-animation ( 0% (тунгалаг байдал: 0;) 80% (тунгалаг байдал: 0;) 100% (тунгалаг байдал: 1;) ) /* Маягтыг харуулах хөдөлгөөнт дүрс хамт имэйл хаягболон товчлуур. Саатал дууриахыг мөн ашигладаг */ @keyframes form-animation ( 0% (тунгалаг байдал: 0; баруун: -400px;) 90% (тунгалаг байдал: 0; баруун: -400px;) 95% (тунгалаг байдал: 0.5; баруун: 20px; ;) 100% (тунгалаг байдал: 1; баруун: 0px;) ) /* Энэ хөдөлгөөнт дүрс нь видеоны эхэнд завийг дэлгэцээс гаргахад ашиглагддаг: */ @keyframes boat-in-animation ( 0% (зүүн: -200px;) 100% (зүүн : 20px;) ) /* Үүлэнд зориулсан хөдөлгөөнт дүрс. Эхний бүлэг үүл нь төвөөс, хоёр дахь нь дэлгэцийн баруун талд хөдөлж эхэлдэг. Эхний бүлгийг дэлгэцээс аажмаар арилгаж, хоёр дахь нь баруун талд гарч ирнэ. Зүүн бүлэг бүрэн далдлагдсаны дараа үүл нь маш хурдан анхны байрлалдаа буцаж ирдэг: */ @keyframes cloud-animation ( 0% (зүүн: 0px;) 99.9999% (зүүн: -720px;) 100% (зүүн: 0px; ) ) / * Сүүлийн гурван хөдөлгөөнт дүрс нь бараг ижил байна - ялгаа нь элементүүдийн байршилд оршдог. Тэд далайн давалгаа цацрахыг дуурайдаг: */ @keyframes boat-animation ( 0% (доод: 0px; зүүн: 0px;) 25% (доод: -2px; зүүн: -2px;) 70% (доод: 2px; зүүн : - 4px;) 100% (доод: -1px; зүүн: 0px;) ) @keyframes ус буцах хөдөлгөөнт дүрс ( 0% (доод: 10px; зүүн: -20px;) 25% (доод: 8px; зүүн: - 22px; ) 70% (доод: 12px; зүүн: -24px;) 100% (доод: 9px; зүүн: -20px;) ) @keyframes water-front-animation ( 0% (доод: -70px; зүүн: -30px); ;) 25% (доод: -68px; зүүн: -32px;) 70% (доод: -72px; зүүн: -34px;) 100% (доод: -69px; зүүн: -30px;) )
Дүгнэлт
Энэ хичээлээр бид хэд хэдэн үндсэн ойлголтыг сурсан:
1. Өв залгамжлагч элементүүд өөрсдийн хөдөлгөөнөөс гадна эцэг эхийнхээ хөдөлгөөнт дүрсийг хүлээн авдаг.
2. Баннер үүсгэхдээ одоо байгаа CSS төсөлтэй код давхцахаас зайлсхийхийн тулд өвөрмөц танигч ашиглахыг хичээх хэрэгтэй.
3. Урьдчилан нийцтэй байдлыг хангахын тулд элементүүдийн байрлал, хэв маягийг хөдөлгөөнт дүрс байхгүй мэт сонгох хэрэгтэй.
4. Боломжтой бол та хэд хэдэн элементэд нэг хөдөлгөөнт дүрс ашиглах хэрэгтэй.