Parallax Scrolling လုပ်နည်း
CSS ဖြင့် "parallax" scrolling effect ဖန်တီးနည်းကို လေ့လာပါ။
Parallax
Parallax scrolling သည် နောက်ခံအကြောင်းအရာ (ဆိုလိုသည်မှာ ပုံတစ်ပုံ) ကို လှိမ့်နေစဉ် ရှေ့ဘက်အကြောင်းအရာထက် မတူညီသော အမြန်နှုန်းဖြင့် ရွှေ့သည့် ဝဘ်ဆိုက်လမ်းကြောင်းတစ်ခုဖြစ်သည်။ parallax scrolling ဖြင့် ဝဘ်ဆိုဒ်တစ်ခုကြား ခြားနားချက်ကို ကြည့်ရန် အောက်ပါလင့်ခ်များကို နှိပ်ပါ။
parallax scrolling ဖြင့် ဒီမို
parallax scrolling မပါဘဲ ဒီမို
မှတ်ချက်- Parallax scrolling သည် မိုဘိုင်းစက်ပစ္စည်း/စမတ်ဖုန်းများတွင် အမြဲတမ်းအလုပ်မလုပ်ပါ။ သို့သော်၊ သင်သည် မိုဘိုင်းကိရိယာများပေါ်တွင် အကျိုးသက်ရောက်မှုကို ပိတ်ရန် မီဒီယာမေးခွန်းများကို သုံးနိုင်သည် (ဤစာမျက်နှာတွင် နောက်ဆုံးဥပမာကို ကြည့်ပါ)။
Parallax Scrolling Effect ကိုဖန်တီးနည်း
ကွန်တိန်နာဒြပ်စင်တစ်ခုကို အသုံးပြုပြီး သတ်မှတ်ထားသော အမြင့်ဖြင့် ကွန်တိန်နာသို့ နောက်ခံပုံတစ်ခုကို ထည့်ပါ။ ထို့နောက် background-attachment: fixed
အမှန်တကယ် parallax အကျိုးသက်ရောက်မှု ဖန်တီးရန် အဆိုပါကို အသုံးပြုပါ။ အခြားနောက်ခံဂုဏ်သတ္တိများကို ပုံ၏အလယ်ဗဟိုနှင့် ချိန်ညှိရန်အတွက် အသုံးပြုသည်-
pixels နှင့် ဥပမာ
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
ပုံ၏အမြင့်ကိုသတ်မှတ်ရန် အထက်ဖော်ပြပါဥပမာသည် pixels ကိုအသုံးပြုထားသည်။ ပုံအား စခရင်တစ်ခုလုံး အံဝင်ခွင်ကျဖြစ်အောင် ရာခိုင်နှုန်း၊ ဥပမာ 100% ကို အသုံးပြုလိုပါက၊ parallax container ၏ အမြင့်ကို 100% ဟု သတ်မှတ်ပါ။ မှတ်ချက်-height: 100%
သင်သည် <html> နှင့် <body> နှစ်ခုလုံး တွင်လည်း သက်ဆိုင်ရပါမည် ။
ရာခိုင်နှုန်းဖြင့် ဥပမာ
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
အချို့သောမိုဘိုင်းစက်ပစ္စည်းများတွင် ပြဿနာရှိသည် background-attachment: fixed
။ သို့သော်၊ သင်သည် မိုဘိုင်းကိရိယာများအတွက် parallax အကျိုးသက်ရောက်မှုအား ပိတ်ရန် မီဒီယာမေးမြန်းချက်များကို သင်အသုံးပြုနိုင်သည်-
ဥပမာ
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}