Design

Scroll Animation

မဂၤလာပါခင္ဗ်။
ကြၽန္ေတာ္ကေတာ့ 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 ေလးကေန စာဖတ္သူအတြက္ အက်ုိးရွိလိမ့္မယ္လုိ့ထင္မိပါတယ္။အခ်ိန္ေပးၿပီးဖတ္ရႈေပးခဲ႔ၾကတဲ႔အတြက္ ေက်းဇူးတင္ပါတယ္၊

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *