Անցումային բովանդակություն ստեղծելով HTML5 եւ CSS3 առանց MARQUEE

Ձեզանից շատերը, ովքեր երկար ժամանակ գրել են HTML , կարող են հիշել տարրը: Սա դիտարկիչի յուրահատուկ տարր էր, որը ստեղծեց էկրանին մատչելի տեքստի դրոշակ: Այս տարրը երբեք չի ավելացվել HTML հստակեցում, եւ դրա համար աջակցությունը բրաուզերներում լայնորեն տարբերվում է: Մարդիկ հաճախ շատ հստակ կարծիք ունեին այս տարրի օգտագործման մասին, թե դրական, թե բացասական: Բայց արդյոք դուք սիրում եք կամ ատում եք այն, այն ծառայում է այն բովանդակությունը դարձնելու նպատակին, որը երեւում է վանդակի սահմանները:

Բանն այն է, որ այն երբեք լիովին չի իրականացվում բրաուզերների կողմից, բացառությամբ անձնական անձնական կարծիքից, այն համարվում է տեսողական ազդեցություն, եւ այդպիսով այն չպետք է սահմանվի HTML- ի կողմից, որը սահմանում է կառուցվածքը: Փոխարենը, տեսողական կամ ներկայացման ազդեցությունները պետք է կառավարվեն CSS- ով: Եվ CSS3- ը ավելացնում է երթեւեկության մոդուլը `վերահսկելու համար, թե ինչպես են բրաուզերները մարկետի ազդեցությունը տարրեր ավելացնելու համար:

CSS3- ի նոր հատկություններ

CSS3- ն ավելացնում է հինգ նոր հատկություններ, որոնք կօգնեն վերահսկել ձեր բովանդակությունը շքանշանի մեջ `գերշահագործման ոճով, շքեղ ոճով, շքամուտքի, մարկետինգային ուղղությամբ եւ շքեղ արագությամբ:

գերբեռնված ոճով
Overflow-style- ի գույքը (որը ես նաեւ քննարկեցի CSS Overflow- ում հոդվածում) սահմանում է այն բովանդակության նախընտրելի ոճը, որը գերազանցում է բովանդակության վանդակը: Եթե ​​դուք սահմանել արժեքը marquee-line կամ marquee- արգելափակում ձեր բովանդակությունը slide դուրս եւ դեպի ձախ / աջ (marquee- line) կամ վեր կամ վար (marquee- բլոկ).

շքեղ ոճը
Այս հատկությունը սահմանում է, թե ինչպես բովանդակությունը կտեղափոխվի տեսքով (եւ դուրս):

Ընտրանքներն ոլորման, սահեցնելու եւ այլընտրանք են: Ոլորման սկսվում է բովանդակությունից ամբողջովին անջատված էկրանով, այնուհետեւ այն շարժվում է տեսանելի տարածքի վրա, մինչեւ որ ամբողջովին ամբողջովին անջատված էկրանի վրա: Սահիկը սկսվում է բովանդակությունից ամբողջովին անջատված էկրանով, այնուհետեւ այն անցնում է մինչեւ բովանդակությունը ամբողջովին տեղափոխվել է էկրանին, եւ էկրանին սահեցնելու համար այլեւս չկա բովանդակություն:

Վերջապես, այլընտրանքային բովանդակությունը բախվում է կողքից, շարժվում դեպի ետ եւ առաջ:

շքեղ խաղաքարտը
MARQUEE- ի տարրը օգտագործելու թերություններից մեկն այն է, որ շքեղությունը երբեք չի դադարում: Բայց ոճի գույքային երթեւեկության խաղարկության հաշվարկով դուք կարող եք սահմանել երթեւեկությունը, բովանդակությունը շրջադարձելու համար որոշակի ժամանակահատվածի համար:

երթեւեկության ուղղություն
Կարող եք նաեւ ընտրել այն ուղղությունը, որը բովանդակությունը պետք է ոլորել էկրանին: Առաջնային եւ հակադարձ արժեքները հիմնված են տեքստի ուղղությանը, երբ գերբեռնվածության ոճը շերտագիծ է եւ վեր կամ վար, երբ գերբեռնվածության ոճը շքեղություն է:

Մարեկի-ուղղության մանրամասները

գերբեռնված ոճով Լեզվի ուղղություն առաջ հակառակ
մարկետինգային գիծ ltr ձախ ճիշտ
rtl ճիշտ ձախ
շքեղ-բլոկ վերը ներքեւում

երթեւեկության արագություն
Այս հատկությունը որոշում է, թե որքան արագ է բովանդակությունը շրջադարձային էկրանին: Արժեքները դանդաղ են, նորմալ եւ արագ: Իրական արագությունը կախված է բովանդակությունից եւ բրաուզերից այն ցուցադրելով, բայց արժեքները պետք է դանդաղ դանդաղ լինեն, քան նորմալ է, որը դանդաղ է, քան արագը:

Browser աջակցությունը Marquee Properties

Հնարավոր է, դուք պետք է օգտագործեք վաճառողի նախածանցները `CSS- ի մարկետի տարրերը աշխատելու համար: Դրանք հետեւյալն են.

CSS3 Վաճառողի նախածանցը
overflow-x: marquee-line; overflow-x: -webkit-marquee;
շքեղ ոճը -հայ-շղարշ-ոճ
շքեղ խաղաքարտը -վեբիտ-մարկետի-կրկնությունը
marquee-direction: առաջ | հակադարձ; -վեբիտ-մարկետինգ-ուղղություն. առաջընթաց | հետընթաց;
երթեւեկության արագություն -վեբկիթ-մարիխու-արագություն
ոչ համարժեք -վեբիտ-մարկետի-ավելացում

Վերջին գույքը թույլ է տալիս սահմանել, թե որքան մեծ կամ փոքր քայլերը պետք է լինեն, քանի որ բովանդակությունը շրջադարձային էկրանի վրա:

Որպեսզի ձեր շքանշանը աշխատի, դուք պետք է նախ վաճառեք նախորդ գումարները եւ ապա հետեւեք նրանց CSS3 ճշգրտման արժեքներին: Օրինակ, այստեղ CSS- ի համար նախատեսված մարկետին է, որը տեքստը հինգ անգամ սահում է ձախից դեպի աջ 200x50 վանդակում:

{
լայնությունը `200px; բարձրությունը `50px; սպիտակ տարածություն.
գերբնակեցված: թաքնված;
overflow-x: -webkit-marquee;
-հայ-երթուղային-ուղղություն.
-վեբիտ-մարկետի ոճ: ոլորման;
-վեբիտ-մարկետի արագություն. նորմալ;
-բջջային-մարկետի-աճ: փոքր;
-վեբիտ-մարկետինգ-կրկնություն. 5;
overflow-x: marquee-line;
marquee-direction: առաջ;
marquee-style: ոլորման;
marquee-speed: նորմալ;
marquee-play-count: 5;
}