jquery এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন (Floating effect example with JQuery)

jquery এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন (Floating effect example with JQuery):

আমরা প্রায়ই বিভিন্ন ওয়েবসাইটে Floating effect দেখে থাকি, বিশেষ করে বিভিন্ন সামাজিক মিডিয়া ওয়েবসাইট গুলতে এগুলি বেশি দেখা যায়। বিভিন্ন ওয়েবসাইট বিভিন্ন ধরনের বিজ্ঞাপন দেয়ার জন্য ও Floating effect ব্যবহৃত হয়। আর এ effect গুলি সাধারনত jQuery দিয়েই তৈরি করা হয়। নিম্নে কিভাবে কোন ওয়েবসাইটে floating effect তৈরি করা যায় তার একটি উদারন step by step আলোচনা করা হল :-
সাধারন আলোচনা ...

একটি Floating box তৈরি করুন।
প্রারম্ভিক Floating box এর অবস্থান ঠিক করুন এবং এটি Body Content এর মধ্যে পাশে রাখুন।
যখন page এ স্ক্রলিং ব্যবহার করা হবে, তখন স্ক্রল বার এর অবস্থান conditionally check করতে হবে।
যদি স্ক্রলবারের y position floating box এর Y position এর চেয়ে বড় হয়, সেক্ষেত্রে floating box এর Y position dynamically পরিবর্তন করতে হবে।
যদি স্ক্রলবারের y position floating box এর Y position এর চেয়ে ছোট হয়, সেক্ষেত্রে floating box টি আবার মূল অবস্থানে ফিরিয়ে আনতে হবে।

1. HTML Layout

একটি সাধারন Layout যার একটি header, content এবং footer রয়েছে। এখানে content এর উপর একটি div "floating-box" নেয়া হয়েছে।

<div id="page">
      <div id="header"><h1>header</h1></div>
    <div id="floating-box"></div>
    <div id="body">
        <h1>content</h1>
        <h2>Mashable floating effect example</h2>
    </div>
    <div id="footer"><h1>footer</h1></div>
</div>

2. Floating box 90×200

এটিই সেই Box যেটি Scrolling এর সাথে সাথে ভাসমান থাকবে। এর যন্য "margin-left:-100px;" adjust করতে হবে।

#floating-box{
    width:90px;
    height:200px;
    border:1px solid red;
    background-color:#BBBBBB;
    float:left;
    margin-left:-100px;
    margin-right:10px;
    position:absolute;
    z-index:1;
}

3. No conflicts, please

jQuery এর সাথে অন্য library এর conflit না হয় , সেটি নিশ্চিত হতে হবে। Highly recommend to check it.

//avoid conflict with other script
    $j=jQuery.noConflict();
 
    $j(document).ready(function($) {

4. Position, position, position

Browser এর scroll bar position check করার জন্য jQuery scroll() event, bind করতে হবে।

$(window).scroll(function () { 
 
    var scrollY = $(window).scrollTop();
    var isfixed = $floatingbox.css('position') == 'fixed';
 
    if($floatingbox.length > 0){
 
        if ( scrollY > bodyY && !isfixed ) {
            $floatingbox.stop().css({
                position: 'fixed',
                left: '50%',
                top: 20,
                margin-left: -500
            });
        } else if ( scrollY < bodyY && isfixed ) {
            $floatingbox.css({
                position: 'relative',
                left: 0,
                top: 0,
                margin-left: originalX
            });
        }        
    }    
});

Scroll bar এর y position যদি floating box এর y position থেকে বড় হয় , তবে floating box এর y position পরিবর্তন করে "margin-left: -500" দিতে হবে। অথবা ইচ্ছামত বসানো যেতে পারে।

if ( scrollY > bodyY && !isfixed ) {
       $floatingbox.stop().css({
        position: 'fixed',
        left: '50%',
        top: 20,
        marginLeft: -500
       });
     }

If scroll bar y position < floating box y position then restore to the original position.

if ( scrollY < bodyY && isfixed ) {
       $floatingbox.css({
        position: 'relative',
        left: 0,
        top: 0,
        marginLeft: originalX
       });
    }

Try it yourself(Full Code)

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
    #floating-box{
        width:90px;
        height:200px;
        border:1px solid red;
        background-color:#BBBBBB;
        float:left;
        margin-left:-100px;
        margin-right:10px;
        position:absolute;
        z-index:1;
    }
    #page{
        width:800px;
        margin:0 auto;
    }
    #header{
        border:1px solid blue;
        height:100px;
        margin:8px;
    }
    #body{
        border:1px solid blue;
        height:2400px;
        margin:8px;
    }
    #footer{
        border:1px solid blue;
        height:100px;
        margin:8px;
    }
    h1,h2{
        padding:16px;
    }
</style>
 
</head>
<body>
 
  <div id="page">
      <div id="header"><h1>header</h1></div>
 
    <div id="floating-box">
 
    </div>
 
    <div id="body">
        <h1>content</h1>
        <h2>ভাসমান ইফেক্ট এর উদাহরন</h2>
    </div>
    <div id="footer"><h1>footer</h1></div>
  </div>
 
 
<script type="text/javascript">
 
    //avoid conflict with other script
    $j=jQuery.noConflict();
 
    $j(document).ready(function($) {
 
    //this is the floating content
    var $floatingbox = $('#floating-box');
 
    if($('#body').length > 0){
 
      var bodyY = parseInt($('#body').offset().top) - 20;
      var originalX = $floatingbox.css('margin-left');
 
      $(window).scroll(function () { 
 
       var scrollY = $(window).scrollTop();
       var isfixed = $floatingbox.css('position') == 'fixed';
 
       if($floatingbox.length > 0){
 
          $floatingbox.html("srollY : " + scrollY + ", bodyY : " 
                                    + bodyY + ", isfixed : " + isfixed);
 
          if ( scrollY > bodyY && !isfixed ) {
            $floatingbox.stop().css({
              position: 'fixed',
              left: '50%',
              top: 20,
              marginLeft: -500
            });
        } else if ( scrollY < bodyY && isfixed ) {
               $floatingbox.css({
              position: 'relative',
              left: 0,
              top: 0,
              marginLeft: originalX
        });
         }        
       }
       });
     }
  });
</script>
</body>
</html>

Try Demo

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।