Bootstrap-4 Progress bar এর জন্য on-scroll animation

আজকে যেটা করতে যাচ্ছি, তার জন্য প্রথমেই দুইটা এক্সট্রা রিসোর্স লাগবে-

ainmate.css এবং wow.js

এই দুইটা প্রোজেক্টে লিঙ্ক করে নিন। তারপর মূল কাজ শুরু করা যাবে।

নিচের ছবিটি দেখুন-

 

এটি bootstrap-4 এর progress-bar এর মার্ক-আপ। bootstrap-4 এর অনেক আপডেটের মধ্যে progress-bar এর মধ্যেও আপডেট করা হয়, তারমধ্যে একটি হলো- progress-bar এর width ইন-লাইন সিএসএস (inline css)- এর মাধ্যমে দেয়ার সুবিধা। এর মাধ্যমে progress-bar ডায়নামিক করার কাজটিও খানিকটা সহজ হয়েছে, তবে যারা ainmate.css এবং wow.js ব্যবহার করে অভ্যস্ত এবং on-scroll animated progress-bar খুঁজতে খুঁজতে ক্লান্ত, তাদের জন্য অনেক বেশি সহজ হয়েছে। 

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress নামের যে ক্লাসটি দেখা যাচ্ছে, bootstrap এর CSS এর মধ্যে সেটিতে overflow: hidden; দেয়া আছে। আমাদের কাজ হলো দুইটি-

 

প্রথম- ainmate.css এবং wow.js এর ব্যবহার অনুযায়ী .progress-bar ক্লাসটিতে পর্যায়ক্রমে wow (for on-scroll animation) এবং fadeInLeft অথবা অন্য কোন এনিমেশানের ক্লাস এড করা।

দ্বিতীয়- .progress ক্লাসটিতে কাস্টম CSS এর মাধ্যমে position: relative; দেয়া, তারপর .progress-bar ক্লাসটিতেও একইভাবে কাস্টম CSS এর মাধ্যমে নিচের CSS কোডটুকু এড করা-

.progress-bar {
   position: absolute;

   top: 0;
   left: 0;
   height: 100%;
}

 

এই LIVE DEMO টি দেখতে পারেন codepen এর, তাহলে আরও পরিষ্কার ধারণা পেতে পারেন। 

আজকে এ পর্যন্তই, ভাল থাকুন সবাই, আল্লাহ হাফেজ।

মন্তব্য

মন্তব্য