Uzun müddət HTML yazdığınız şəxs elementi xatırlaya bilər. Bu, ekranda scrolling mətnin bannerini yaratmış bir brauzer özəlliyi elementi idi. Bu element heç vaxt HTML spesifikasiyasına əlavə olunmayıb və bunun üçün dəstək brauzerlər arasında fərqlənirdi. İnsanlar tez-tez bu elementin istifadəsi haqqında - çox müsbət, həm də mənfi fikirlər olduqca güclü idi. Amma sevdiyinizə və ya nifrət etdiyinə baxmayaraq, bu, qutu sərhədlərini görünən məzmun yaratmaq məqsədi daşıyırdı.
Brauzerlər tərəfindən heç bir şəkildə tam şəkildə həyata keçirilməməsi səbəbinin bir hissəsi, güclü şəxsi rəydən kənar olaraq, bu vizual effekt hesab olunurdu və buna görə də strukturu müəyyən edən HTML tərəfindən müəyyən edilməməlidir. Bunun əvəzinə vizual və ya təqdimat təsirləri CSS tərəfindən idarə olunmalıdır. Və CSS3 brauzerlər elementlərin marquee təsiri necə əlavə nəzarət etmək üçün marquee modulu əlavə edir .
Yeni CSS3 xüsusiyyətləri
CSS3, içeriğinizin marquee'de nasıl göründüğünü kontrol etmek üçün beş yeni özellik ekler: taşma tarzı, marquee style, marquee-play-count, marquee-direction və marquee-speed.
daşqın tərzi
Taşma tərzi mülkiyyəti (mən də CSS Overflow məqaləsində də müzakirə etdiyim) content qutusunu daşan məzmunlar üçün üstünlük stilini müəyyənləşdirir. Qiyməti marquee-line və ya marquee-bloka qoyarsanız, məzmununuz sola / sağa (marquee-line) və ya yuxarıya / aşağıya (marquee-blok) daxil olur və çıxır.
marquee-style
Bu xüsusiyyət məzmunun görünmə (və həyata) necə keçiriləcəyini müəyyən edir.
Seçimlər fırladın, slayd və alternativdir. Kaydırma məzmunu tamamilə söndürmə ekranı ilə başlayır və sonra yenidən tamamilə ekrana qədər görünən ərazidə hərəkət edir. Slayd məzmunu tamamilə söndürmə ekranından başlayır və sonra kontentin tam ekrana köçürülməsinə və ekranda slayd üçün daha çox məzmunun qalmasına qədər hərəkət edir.
Nəhayət, alternativ kontentləri bir tərəfdən tərəfə sıçradır, geri və irəli sürüşür.
marquee-play-sayı
MARQUEE elementindən istifadə edilən çatışmamazlıqlar arasında marquee heç vaxt dayanmır. Ancaq stil mülkiyyəti marquee-play-saytı ilə marquee müəyyən bir neçə dəfə məzmunu açma və qapmaq üçün təyin edə bilərsiniz.
marquee istiqaməti
Ayrıca məzmunun ekranda hərəkət etməsi istiqamətini də seçə bilərsiniz. Üst-üstə düşən tərs üfüqi tərzi marquee-block olduğunda və yuxarı və ya aşağı olduğunda, irəli və geri dəyərlər mətn istiqamətinə əsaslanır.
Marquee-Direction Details
| daşqın tərzi | Dil istiqaməti | irəli | ters |
|---|---|---|---|
| marquee-line | ltr | sola çıxdı | sağ olun |
| rtl | sağ olun | sola çıxdı | |
| marquee-block | up | aşağı |
marquee-speed
Bu xüsusiyyət ekranda məzmunun nə qədər tez keçdiyini müəyyən edir. Qiymətlər yavaş, normal və sürətlidir. Həqiqi sürət məzmunu və onu göstərən brauzerdən asılıdır, amma dəyərlər yavaş olmalıdır ki, bu da sürətlidan daha yavaş olur.
Marquee xüsusiyyətlərinin brauzer dəstəyi
CSS marquee elementlərini işləmək üçün satıcı prefikslərini istifadə etmək tələb oluna bilər. Bunlar aşağıdakılardır:
| CSS3 | Satıcı Prefiksi |
|---|---|
| daşqın-x: marquee-line; | daşqın-x: -webkit-marquee; |
| marquee-style | -webkit-marquee-stili |
| marquee-play-sayı | -webkit-marquee-təkrarlama |
| marquee-direction: forward | reverse; | -webkit-marquee-direction: forwards | geriyə; |
| marquee-speed | -webkit-marquee-speed |
| heç bir ekvivalent | -webkit-marquee-increment |
Son əmlak marşrutdakı ekranda konteynerlər kimi hərəkət etməsi kimi addımların necə böyük və ya kiçik olduğunu müəyyən etməyə imkan verir.
Sifarişinizin işləməsini təmin etmək üçün, satıcıdan əvvəlcədən təyin olunmuş dəyərləri yerləşdirin və sonra CSS3 spesifikasiyası dəyərlərinə əməl edin. Məsələn, burada mətn 5 dəfə soldan sağa 200x50 qutu içərisində keçən bir marquee üçün CSS-dir.
{
genişlik: 200px; boy: 50px; ağ-boşluq: nowrap;
daşqın: gizli;
daşqın-x: -webkit-marquee;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: kiçik;
-webkit-marquee-təkrarlama: 5;
daşqın-x: marquee-line;
marquee istiqaməti: irəli;
marquee-style: scroll;
marquee-speed: normal;
marquee-play-sayı: 5;
}