အားလုံးပဲ မင်္ဂလာပါ။ ညီမကတော့ Spiceworks Myanmar မှာ Junior Web Designer အဖြစ် တာဝန်ယူလုပ်ကိုင်နေတဲ့ ခိုင်သဉ္ဇာသွယ် ဖြစ်ပါတယ်။ ဒီတစ်ပတ်မှာတော့ “The Marquee” ဆိုတဲ့ခေါင်းစဉ်နဲ့ marquee html element အကြောင်းကို မျှဝေပေးချင်ပါတယ်။
Marquee
Marquee ဆိုတာက HTML element တစ်ခု ဖြစ်ပါတယ်။ text တွေ၊ image တွေကို horizontally or vertically automatic scroll ဖြစ်အောင် ဖန်တီးပေးတဲ့ tag တစ်ခု ဖြစ်ပါတယ်။
ပထမဆုံးအနေနဲ့ ကိုယ့်ရဲ့ index.html ရဲ့ body အဖွင့်အပိတ်ထဲမှာ ဒီ code ကိုထည့်ကြည့်ပါ။
Figure01
live server နဲ့ run လိုက်ရင် စာသားတွေ right to left ပြေးနေတာကို မြင်ရပါလိမ့်မယ်။ အဲ့ဒါ marquee ရဲ့ default ပေါ်တဲ့ပုံစံပါ။
ပြီးရင် အောက်မှာဖော်ပြထားတဲ့ code တွေကို ထပ်ထည့်ပြီး run ကြည့်ပါ။ marquee မှာ direction ဆိုတဲ့ property လေးရှိပါတယ်။ value နေရာမှာ up, down, right, left ဆိုပြီးထည့်လို့ရပါတယ်။ width, height properties တွေလည်း ရှိတာမလို့ ထည့်ကြည့်လို့ရပါတယ်။
Figure02
Figure03
run လိုက်ရင် text တွေ down to up, up to down, left to right နဲ့ right to left သွားနေတာကို မြင်ရပါလိမ့်မယ်။
Marquee Effect with CSS
ဒါပေမယ့် marquee က HTML 5 မှာ deprecated ဖြစ်သွားပါပြီ။ HTML principles တွေနဲ့ မကိုက်ညီတဲ့ အတွက်ကြောင့်ပါ။ အလွယ်ပြောရရင် HTML မဆန်ဘဲ CSS animation ဆန်နေလို့ လို့မှတ်ရင် ရပါတယ်။ အဲ့ဒါဆိုရင် marquee tag မသုံးဘဲ marquee effect လိုမျိုးဖြစ်အောင် CSS @keyframes နဲ့ animation ဖန်တီးကြည့်ပါမယ်။
Scroll Up
scroll up effect ရဖို့အတွက် အောက်က code ကို html နဲ့ css file မှာထည့်ပြီး run ကြည့်ပါ။
Figure04
Figure05
Scroll Down
scroll down effect ရဖို့အတွက် အောက်က code ကို html နဲ့ css file မှာထည့်ပြီး run ကြည့်ပါ။
Figure06
Figure07
Scroll Left
scroll left effect ရဖို့အတွက် အောက်က code ကို html နဲ့ css file မှာထည့်ပြီး run ကြည့်ပါ။
Figure08
Figure09
Scroll Right
scroll right effect ရဖို့အတွက် အောက်က code ကို html နဲ့ css file မှာထည့်ပြီး run ကြည့်ပါ။
Figure10
Figure11
ဒီထက်ပိုပြီး details ကျကျနဲ့ marquee ရဲ့ တခြား properties တွေကို လေ့လာချင်ရင် reference ပေးထားတဲ့ website တွေမှာ လေ့လာလို့ရပါတယ်။ ကျေးဇူးအများကြီးတင်ပါတယ်ရှင့်။
