Animate Css & Jquery Viewport Checker

အားလုံးပဲမင်္ဂလာပါ

ကျွန်တော်ကတော့ မောင်အောင်ခန့်ဖြိုး ဖြစ်ပါတယ်။
ယနေ့ website တော်တော်များများမှာ အသုံးပြုလျက်ရှိသော window scroll up and scroll down ပေါ်မူတည်ပြီး layoutတွေ sectionတွေ div တွေကို Bounce In Up ပုံစံ ၊ Fade In ပုံစံ ၊ Fade In Down ပုံစံ ၊ Flip In X ပုံစံ စသည့် အမျိုးမျိုးသော animate effect များ ပြုလုပ်ပုံကို ကျွန်တော်လေ့လာရသလောက် jquery view port checker နဲ့ animate css တို့အားတွဲပြီး အသုံးချပုံကို ရှင်းလင်းရေးသားဖော်ပြပေးသွားချင်ပါတယ်။

Animate.css

https://daneden.github.io/animate.css/

animate.css effect များအား အထက်ပါsite တွင် လေ့လာနိုင်ပါသည်။

Animate.css ကို download ဆွဲရန် ဤ နေရာကို နှိပ်ပါ။　⇒　animate

Animate.css ထဲတွင် လုပ်ဆောင်နိုင်သော effect များစွာထဲမှ Bounce In Up, Fade In, Bounce In Left, Fade In Down, Light Speed In, Flip In X များအားအသုံးပြုသွားပါမည်။

မိမိeffect ပြုလုပ်ချင်သော div , section, paragraph, img အတွက် html အတွင်းတွင် အောက်ပါအတိုင်း ရေးသားသတ်မှတ်ရန်လိုအပ်ပါသည်။

<div class = "animated fadeIn"><!-- Code here --></div>

<div class = "animated bounceInLeft"><!-- Code here --></div>

<div class = "animated fadeInDown"><!-- Code here --></div>

<div class = "animated lightSpeedIn"><!-- Code here --></div>

<div class = "animated flipInX"><!-- Code here --></div>

Jquery Viewport Checker

https://github.com/dirkgroenen/jQuery-viewport-checker

JQuery Viewport Checker သည် window scroll ပြုလုပ်ချိန်တွင် သက်ဆိုင်ရာ element များ၏ နေရာအား မှတ်သား၍ script code အနည်းငယ်ဖြင့် အောက်ပါ options များ ပြုလုပ်နိုင်သည့် script အမျိုးအစားဖြစ်ပါသည်။

Options

$('.dummy').viewportChecker({
classToAdd: 'visible', 
classToAddForFullView: 'full-visible', 
classToRemove: 'invisible', 
removeClassAfterAnimation: false, 
offset: [100 OR 10%], 
invertBottomOffset: true, 
repeat: false, 
callbackFunction: function(elem, action){}, 
scrollHorizontal: false 
});

classToAdd = Class to add to the elements when they are visible
classToAddForFullView = Class to add when an item is completely visible in the viewport
classToRemove = Class to remove before adding ‘classToAdd’ to the elements
removeClassAfterAnimation = Remove added classes after animation has finished
offset = The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a ‘%’ at the end
invertBottomOffset = Add the offset as a negative number to the element’s bottom
repeat = Add the possibility to remove the class if the elements are not visible
callbackFunction = Callback to do after a class was added to an element. Action will return “add” or “remove”, depending if the class was added or removed
scrollHorizontal = Set to true if your website scrolls horizontal instead of vertical.

Available attributes are:

Jquery option များဖြင့် ရေးနိုင်သလို အောက်ပါ html attribute များ အသုံးပြုပြီး အောက်ပါအတိုင်းရေးသားနိုင်ပါသည်။

<div data-vp-add-class="random"></div>          <!-- classToAdd -->
<div data-vp-remove-class="random"></div>       <!-- classToRemove-->
<div data-vp-remove-after-animation="true|false"></div>      <!-- Removes added classes after CSS3 animation has completed -->
<div data-vp-offset="[100 OR 10%]"></div>       <!-- offset -->
<div data-vp-repeat="true"></div>               <!-- repeat -->
<div data-vp-scrollHorizontal="false"></div>    <!-- scrollHorizontal -->

JQuery Viewport Checker အသုံးပြုလိုပါကအောက်ပါတိုင်း ရေးသားနိုင်ပါသည်။

<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<script src="js/jquery.viewportchecker.min.js"></script>

<script>

$(document).ready(function(){

$('.post').viewportChecker();

});

</script>

</head>

jquery.viewportchecker.zip ကို အောက်ပါ ပေးထားသော Download Link ကို နှိပ်ပြီး ဒေါင်းလုပ်ဆွဲပါ။ ပြီးရင် မိမိ project ရဲ့ js folder ထဲကို ကူးထည့်ပါ။
jquery.viewportchecker.js ကို download ဆွဲရန် ဤ နေရာကို နှိပ်ပါ။ ⇒ jquery.viewportchecker

Animated Css + Jquery-viewport-checker

Animate Css နှင့် jquery.viewportchecker.js များကို download ဆွဲပြီးသွားပြီဆိုရင် မိမိ Project Folder အောက်ထဲကို animate.css နဲ့ jquery.viewport.checker.js အား ကူးပြီး Project နဲ့ ချိတ်လိုက်ပါ။

<link rel="stylesheet" type="text/css" href="animate.css" />
<script src="viewportchecker.js"></script>

Customize CSS style.css

div , section, paragraph, img များကို Animation Effect များဖြစ်တဲ့ hidden/visible Effect များ လုပ်ဖို့အတွက် အောက်ပါ Code များကို css အတွင်းတွင် ရေးသားသတ်မှတ်ရန်လိုအပ်ပါသည်။

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}

HTML Code

<div class="container"/>
    <div class="post"/> <!-- Post content goes here --/> </div/>
    <div class="post"/> <!-- Post content goes here --/> </div/>
    <div class="post"/> <!-- Post content goes here --/> </div/>
    <div class="post"/> <!-- Post content goes here --/> </div/>
    <div class="post"/> <!-- Post content goes here --/> </div/>
    <div class="post"/> <!-- Post content goes here --/> </div/>
</div/>

Jquery Code

မိမိ အသုံးပြုမည့် Animation Effect များအား အောက်ပါ classToAdd အတွင်းတွင်ထည့်၍ လေ့လာနိုင်ပါတယ်။

jQuery(document).ready(function() {
    jQuery('.post').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeIn',
        offset: 100
       });
});

visible animated fadeIn ကို viewportChecker ရဲ့ attribute တစ်ခုဖြစ်တဲ့ classToAdd: တွင် ထည့်ပေးခြင်းအားဖြင့် scroll ဆွဲလိုက်မယ်ဆိုရင် class name ‘post’ ဖြစ်တဲ့ div များဟာ fadeIn effect ဖြင့် ပေါ်လာမှာ ဖြစ်ပါတယ်။

အထက်တွင် ဖော်ပြခဲ့သော animate.css နှင့် jquery.viewportchecker.js များကို အသုံးပြုပြီး animate.css မှာ ပါဝင်သော class များကို အသုံးပြု၍ မိမိ ပြုလုပ်လိုသော effect များ လွယ်ကူစွာ အသုံးချနိုင်ကြပါစေ။

ကျွန်တော် Scroll Effect များ အသုံးပြု၍ လေ့လာထားသော scroll_effect.zip ဖိုင်ကို download ဆွဲယူပြီးတော့လည်း Effect များ အလုပ်လုပ်ပုံကို လက်တွေ့ လေ့လာနိုင်ပါတယ်။

scroll_effect.zip ကို download ဆွဲရန် ဤ နေရာ ကို နှိပ်ပါ။ ⇒ scroll_effect

“ To Impress Others By Works "