Custom Animation তৈরি এবং ইমপ্লিমেন্ট করা

Foundation ফ্রেমওয়ার্কে Custom Animations তৈরি এবং ইমপ্লিমেন্ট করার জন্য আপনি CSS এবং JavaScript এর সমন্বয়ে কাজ করতে পারেন। Foundation সরাসরি CSS এনিমেশন সাপোর্ট করে, তবে কিছু ইন্টারঅ্যাকটিভ অ্যানিমেশন বা কাস্টম অ্যানিমেশন প্রয়োগের জন্য JavaScript ব্যবহার করা হয়। এখানে আমরা দেখব কিভাবে CSS অ্যানিমেশন এবং JavaScript সহ Foundation ফ্রেমওয়ার্কে কাস্টম অ্যানিমেশন তৈরি করা যায়।

১. CSS অ্যানিমেশন তৈরি

Foundation-এর মধ্যে CSS animations এর সাহায্যে সরল অ্যানিমেশন তৈরি করা সহজ। আপনি keyframes ব্যবহার করে অ্যানিমেশন তৈরি করতে পারেন। এটি বিভিন্ন উপাদান (যেমন: বাটন, টেক্সট, ডিভ) এনিমেট করতে সহায়তা করে।

Custom CSS অ্যানিমেশন উদাহরণ

1. একটি বাটনে হোভার অ্যানিমেশন: এই উদাহরণে, একটি বাটনে হোভার করার সাথে সাথে এটি রঙ পরিবর্তন করবে।

   <button class="animated-button">হোভার করুন</button>
   

   .animated-button {
     background-color: #4CAF50; /* গ্রীন ব্যাকগ্রাউন্ড */
     color: white;
     border: none;
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s ease;
   }
   
   .animated-button:hover {
     background-color: #45a049; /* হোভার করলে ব্যাকগ্রাউন্ড গা dark ় হয়ে যাবে */
   }
   

2. বক্স শ্যাডো এবং স্কেল অ্যানিমেশন: একটি বক্সে scale এবং box-shadow অ্যানিমেশন ব্যবহার করা হচ্ছে।

   <div class="animated-box">এটি একটি অ্যানিমেটেড বক্স</div>
   

   .animated-box {
     width: 200px;
     height: 200px;
     background-color: #ffcc00;
     margin: 50px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .animated-box:hover {
     transform: scale(1.1); /* সাইজ বাড়ানোর জন্য */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* শ্যাডো বাড়ানো */
   }
   

এই কোডের মাধ্যমে, animated-button এবং animated-box ক্লাসে হোভার করার সময় অ্যানিমেশন প্রয়োগ হবে।

২. JavaScript এর মাধ্যমে অ্যানিমেশন ইমপ্লিমেন্ট

Foundation ফ্রেমওয়ার্কে কিছু অ্যানিমেশন JavaScript দিয়ে পরিচালনা করা হয়। এটি সাধারণত Foundation-এর JavaScript প্লাগইন বা jQuery দিয়ে করা যায়। Foundation-এর Reveal, Magellan, Sticky ইত্যাদি প্লাগইনগুলোর মাধ্যমে ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করা যায়।

উদাহরণ ১: Reveal প্লাগইন দিয়ে এনিমেশন

Foundation এর Reveal প্লাগইনটি বিভিন্ন উপাদান, যেমন পপ-আপ মডাল উইন্ডো, এনিমেটেডভাবে প্রদর্শন করতে ব্যবহৃত হয়।

<!-- Triggering Button -->
<button data-open="exampleModal1" class="button">মডাল দেখান</button>

<!-- Modal Content -->
<div class="reveal" id="exampleModal1" data-reveal>
  <h1>এই একটি মডাল</h1>
  <p>এটি Foundation এর Reveal প্লাগইন ব্যবহার করে তৈরি করা হয়েছে।</p>
  <button class="button" data-close aria-label="Close modal" type="button">বন্ধ করুন</button>
</div>

JavaScript কোড:

$(document).foundation();  // Foundation এর সমস্ত প্লাগইন সক্রিয় করতে

এখানে, data-open এবং data-reveal অ্যাট্রিবিউটগুলো ব্যবহার করে মডাল উইন্ডো খুলতে এবং বন্ধ করতে Foundation এর Reveal প্লাগইনটি এনিমেশন ব্যবহার করে।

উদাহরণ ২: Scroll Animation

JavaScript এবং CSS এর সাহায্যে আপনি স্ক্রল করার সাথে সাথে উপাদানগুলো এনিমেট করতে পারেন। এই জন্য scroll ইভেন্ট এবং CSS transitions ব্যবহার করা হয়।

<div class="scroll-box">এই উপাদানটি স্ক্রল করার সময় এনিমেট হবে</div>

.scroll-box {
  width: 300px;
  height: 300px;
  background-color: #ff6347;
  margin: 50px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.scroll-box.visible {
  opacity: 1;
}

// স্ক্রল করার সময় উপাদান দেখানোর কোড
$(window).scroll(function() {
  $('.scroll-box').each(function() {
    var windowTop = $(window).scrollTop();
    var elementTop = $(this).offset().top;
    if (windowTop + $(window).height() > elementTop) {
      $(this).addClass('visible');
    }
  });
});

এখানে:

• opacity দিয়ে উপাদানটি প্রথমে লুকানো থাকে এবং স্ক্রল করার পর দৃশ্যমান হয়।
• jQuery ব্যবহার করে স্ক্রল পজিশন চেক করে visible ক্লাস যোগ করা হয়।

৩. Animate.css ব্যবহার করে কাস্টম অ্যানিমেশন

Foundation ফ্রেমওয়ার্কের সাথে আপনি তৃতীয় পক্ষের লাইব্রেরি যেমন Animate.css ব্যবহার করতে পারেন। এটি একটি খুবই জনপ্রিয় CSS লাইব্রেরি যা বিভিন্ন ধরনের অ্যানিমেশন সরবরাহ করে।

Animate.css এর মাধ্যমে অ্যানিমেশন ইমপ্লিমেন্ট:

1. প্রথমে Animate.css যোগ করুন:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

2. তারপর আপনি যেকোনো উপাদানে অ্যানিমেশন প্রয়োগ করতে পারেন:

<div class="animate__animated animate__bounce">
  এই উপাদানটি বাউন্স অ্যানিমেশন ব্যবহার করবে।
</div>

এখানে:

• animate__animated: অ্যানিমেশন সক্রিয় করতে ব্যবহৃত।
• animate__bounce: এই ক্লাসটি একটি বিশেষ অ্যানিমেশন প্রয়োগ করে (এটি বাউন্স অ্যানিমেশন তৈরি করবে)।

Foundation ফ্রেমওয়ার্কে কাস্টম অ্যানিমেশন তৈরি করা এবং ইমপ্লিমেন্ট করা অনেক সহজ এবং কার্যকর। আপনি CSS অ্যানিমেশন এবং JavaScript প্লাগইন এর সাহায্যে ওয়েবসাইটে ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে পারেন। এছাড়াও, Foundation এর সাথে আপনি Animate.css এর মতো তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে আরও উন্নত অ্যানিমেশন পেতে পারেন। এর মাধ্যমে আপনি আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্সকে আরও গতিশীল এবং আকর্ষণীয় করে তুলতে পারেন।