Samar da Scrollable Content a HTML5 da CSS3 Ba tare da MARQUEE

Wadanda daga cikinku waɗanda suka rubuta HTML na dogon lokaci na iya tuna da kashi. Wannan wani ɓangaren mai bincike ne wanda ya halicci banner na rubutun gungura a fadin allon. Wannan nau'ikan ba'a karawa da ƙayyadaddun HTML ba kuma goyon baya ga shi ya bambanta a ko'ina cikin masu bincike. Mutane sau da yawa suna da ra'ayi mai ƙarfi game da amfani da wannan nau'ikan - duka masu kyau da kuma mummunan. Amma ko ka ƙaunaci ko ka ƙi shi, hakan ya yi amfani da manufar yin abun ciki wanda ya ɓoye ƙananan iyaka a bayyane.

Wani ɓangare na dalili da ba a taɓa aiwatar da shi ba ne da masu bincike, ba tare da ra'ayi mai kyau ba, shi ne cewa an dauki shi ne na gani kuma a irin haka, ba za a iya bayyana shi ta hanyar HTML ba, wanda ya bayyana tsarin. Maimakon haka, CSS ya kamata a gudanar da gani ko gabatarwa. Kuma CSS3 ƙara da alamar ka'idar don sarrafa yadda masu bincike ƙara lamba marque zuwa abubuwa.

Sabuwar CSS3 Properties

CSS3 tana ƙaddamar da sabon kayan haɗi guda biyar don taimakawa wajen sarrafawa yadda abun ciki naka ya nuna a cikin marquee: nau'in haɗi, lakabi-style, lakabi-wasa-count, alamar-shugabanci da lakabi.

ambaliya-style
Abubuwan da ke cikin masauki (wanda na kuma tattauna a cikin labarin CSS Overflow) ya bayyana fasalin da aka fi so don abinda ke ciki ya cika ambaliyar abun ciki. Idan ka saita darajar zuwa layin layi ko alamar-toshe abin da ke ciki zai zurawa cikin kuma zuwa hannun hagu / dama (lakabi-mark) ko sama / ƙasa (marke-block).

style-style
Wannan dukiya ta bayyana yadda abun ciki zai motsa ido (da kuma fita).

Zaɓuɓɓuka suna gungurawa, nunin faifai kuma madadin. Gungura yana farawa tare da abun ciki gaba daya kashe allon, sannan kuma yana motsawa cikin sashen bayyane har sai an kare gaba ɗaya. Gilashi farawa tare da abun ciki gaba daya daga allon kuma sai ya motsawa har sai abun ciki ya ci gaba a kan allon kuma babu sauran abin da ya rage don zugawa akan allon.

A ƙarshe, maɓallin ya ɗaga abubuwan da ke ciki daga gefe zuwa gefen, zakulo a baya da waje.

lakabi-play-count
Daya daga cikin kuskuren yin amfani da maƙidar MARQUEE ita ce martaba bata tsaya ba. Amma tare da lakabi-style-count-count-style za ka iya saita marquee don juya abun ciki a kan kuma kashe don wani adadin lokuta.

Alamar jagora
Hakanan zaka iya zaɓar jagorancin abin da abun ciki ya kamata gungura kan allon. Abubuwan da ke gaba da baya sun danganta ne a kan ma'anar rubutun a lokacin da ma'anar ambaliya ta kasance layi-layi kuma sama ko ƙasa yayin da zubar da jini ya kasance alamar alama.

Marquee-Direction Details

ambaliya-style Harshe Harshe gaba baya
layi-layi ltr hagu dama
rtl dama hagu
marke-block sama ƙasa

marker-sauri
Wannan dukiya yana ƙayyade yadda sauri abubuwan da ke ciki a kan allon. Matsayin suna da jinkiri, al'ada, da sauri. Ainihin gudun yana dogara da abun ciki da kuma mai bincike yana nuna shi, amma dabi'u dole ne jinkiri ya fi hankali fiye da al'ada wanda yake da hankali fiye da sauri.

Taimako na Bincike na Yankin Marquee

Kila iya buƙatar yin amfani da prefixes masu sayarwa don samo abubuwa na alama na CSS don aiki. Su ne kamar haka:

CSS3 Samfuri mai sayarwa
shafe-x: layi-layi; ambaliya-x: -webkit-marquee;
style-style -webkit-brande-style
lakabi-play-count -webkit-marquee-maimaitawa
Alamar jagora: gaba | baya; -webkit-marquee-direction: gaba | baya;
marker-sauri -webkit-marke-speed
babu daidai -webkit-marquee-increment

Abinda na ƙarshe ya ba ka damar ayyana yadda girman ko ƙananan matakai ya kamata a zama littattafan da ke cikin allo a cikin marquee.

Domin yin amfani da alamarku, ya kamata ku sa mai sayarwa ya fara ƙaddamar da ƙimar farko sannan ku bi su tare da ƙididdigar CSS3. Alal misali, a nan CSS ne don alamar da ke nuna rubutu sau biyar daga hagu zuwa dama a cikin akwatin 200x50.

{
nisa: 200px; tsawo: 50px; farar fata-sarari: toshe;
ambaliya: boye;
ambaliya-x: -webkit-marquee;
-webkit-marquee-direction: gaba;
-webkit-brande-style: gungura;
-webkit-marquee-gudun: al'ada;
-webkit-marquee-increment: kananan;
-webkit-marquee-maimaitawa: 5;
shafe-x: layi-layi;
Alamar jagora: gaba;
lakabi-style: gungurawa;
lakabi-sauri: al'ada;
lakabi-play-count: 5;
}