မင်္ဂလာပါခင်ဗျ။
ကျွန်တော်ကတော့ Spiceworks Myanmar Company တွင် Web Designer အဖြစ် ဝင်ရောက်လုပ်ကိုင် လျက်ရှိသော ကျော်စိုးနိုင်ဖြစ်ပါတယ်။ ကျွန်တော် ဒီတစ်ပတ်မှာ ရှင်းပြမည့် အကြောင်းအရာကတော့ JQuery Library နှင့် CSS Animate Library ကို အသုံးပြုပြီး Scroll Animation ပြုလုပ်ပုံအဆင့်ဆင့် အကြောင်းကို ဝေမျှပေးချင်ပါတယ်ခင်ဗျ။

ပထမဆုံးအနေနဲ့ မိမိတို့ လိုချင်တဲ့ block အရေအတွက်ပေါ်မူတည်ပြီး အောက်ပါအတိုင်း html code ကိုရေးရပါမည်။

 


 

 


 


 


 
Fadeinleft Animation 
 


 


 
Fadeinright Animation 
 


 


 
Rollin Animation 
 


 

ပုံတွင်ပြထားသည့် Block များ ဖြစ်လာရန် အောက်ပါအတိုင်း CSS code အားရေးရပါမည်။

 
body{
	margin: 0;
	padding: 0;
}
.bg_img{
	width: 100%;
    height: 100%;
    position: fixed;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: -1;
}
.background{
	background:url('fuji.jpg') no-repeat center;
	width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    background-attachment: fixed;
    opacity: 0.8;
    transform: translateZ(0);
	
}
.inner{
	width: 980px;
	margin: 0 auto;
}
.block{
	width: 500px;
	height: 300px;
	display:inline-block;
	padding: 20px;
	margin: 80px 20px;
}
.block_ttl{
	height: 280px;
	padding: 10px;
	background: #000;
}
.block_ttl img{
	z-index: 1;
}
#b1,#b3{
	float:left;
}
#b2,{
	float:right;
}
.animate{
	position: absolute;
	color: #ffffff;
	font-size: 25px;
	padding: 20px;
	
}
#b1.fadeinleft{
	animation-name: fadeInLeft;
	animation-duration: 2s;
}
#b2.fadeinright{
	animation-name: fadeInRight;
	animation-duration: 2.5s;
}
#b3.rollin{
	animation-name: rollIn;
	animation-duration: 3s;
}

Layout တစ်ခုချင်းအား animation effect ဖြင့် အလုပ်လုပ်စေရန်အတွက် Animate CSS Library တစ်ခုဖြစ်သော animate.css ကို ချိတ်ဆက်ပေးရပါမည်။ animate.css file ကို အောက်ပါလဒ့် (link)ကနေ download လုပ်နိုင်ပါတယ်ခင်ဗျ။

 
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

Website အား users များအသုံးပြုသောအခါမှာ Animation ဖြင့် အလုပ်လုပ်စေရန် JQuery ချိတ်ဆက်ရန်လိုအပ်ပါသည်။ JQuery ချိတ်တဲ့အခါ file size သေးအောင် ချုံ့ထား သော .min ပါတဲ့ ဖိုင်ကို ချိတ်သင့်ပါတယ်။

 
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

သို့မဟုတ် Content Delivery Network နှင့် ချိတ်ဆက်ပြီး အသုံးပြုနိုင်ပါသည်။

 
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js

Document တစ်ခုအား scroll လုပ်နိုင်ရန်အတွက် jquery ဖြင့် support လုပ်နိုင်သော method ၂မျိုး ရှိပါသည်။
selector method ကိုအသုံးပြုပြီးတော့ Document ကို select လုပ်ခြင်း

 
$(selector).scroll(function)

selector မှာ select လုပ်ထားသော document ကို position move လုပ်နိုင်ရန် ScrollTop() (or) ScrollTo() method တို့ ဖြစ်ပါသည်။

 
$(selector).scrollTop(position)

ကျွန်တော်အသုံးပြုပြီးရေးသားထားတာကတော့ slector method နှင့် scollTop() method (2) ခု ဖြစ်ပါတယ်။

JQuery Events များကို Binding လုပ်တဲ့အခါ မှာ document မှာရှိတဲ့ class အားလုံးသည် Page Loading မှာ မရှိသေးဘဲ Loading ပြီးမှ ထွက်လာမယ့် Class Elements အားလုံးအတွက် အလုပ်လုပ်ပေးမှာ ဖြစ်ပါတယ်။
Binding ကတော့ မိမိ ထည့်ချင်တဲ့ အခြေအနေကျမှ Events Action ကို ထည့်တာ ဖြစ်ပါတယ်။
မိမိ သတ်မှတ်ထားသော classရဲ့ offset().top condition ကို ရောက်မှာ classname ကို ထည့်တာဖြစ်ပါတယ်။

 
$(window).scroll(function(){
        var scrolval= $(window).scrollTop() + $(window).height();
        if(scrollval>= $('#b1').offset().top){
				$('#b1').addClass('fadeinleft');
			}
        if(scrollval>= $('#b2').offset().top){
				$('#b2').addClass('fadeinright');
			}
        if(scrollval>= $('#b3').offset().top){
				$('#b3').addClass('rollin');
			}
 });

မိမိထည့်လိုက်သော class name က animation.css မှာ ရှိသော animation name နှင့်ချိတ်ဆက်ပီး အလုပ်လုပ်တာဖြစ်ပါတယ်။

 
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

အထက်တွင်ဖော်ပြပြီးခဲ့သော code များအတိုင်းရေးပြီးလျှင် လိုချင်တဲ့ block scroll animation ရလာပါမည်။

Click Here >>>To View Scroll Animation

Reference:: https://www.geeksforgeeks.org/jquery-scroll-with-examples/
https://www.geeksforgeeks.org/scroll-to-the-top-of-the-page-using- javascript-jquery/
https://www.geeksforgeeks.org/what-is-the-difference-between-position-and-offset-in-jquery/

 

အခုဒီ Blog လေးကနေ စာဖတ်သူအတွက် အကျိုးရှိလိမ့်မယ်လို့ထင်မိပါတယ်။အချိန်ပေးပြီးဖတ်ရှုပေးခဲ့ကြတဲ့အတွက် ကျေးဇူးတင်ပါတယ်၊