Custom ইফেক্টস তৈরি এবং ব্যবহারের নিয়ম

script.aculo.us এর পরিচিতি

script.aculo.us হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব অ্যাপ্লিকেশন এবং ওয়েবসাইটে ইন্টারঅ্যাকটিভ এবং অ্যানিমেটেড ইফেক্টস তৈরি করতে সহায়ক। এটি Prototype.js এর উপর ভিত্তি করে কাজ করে এবং ওয়েব পেজে অ্যানিমেশন, মোশন, এবং ইন্টারঅ্যাকটিভ ইফেক্টস সহজে প্রয়োগ করতে ব্যবহৃত হয়।

স্ক্রিপ্ট.অ্যাকুলো.ইউএস মূলত ডেভেলপারদের জন্য অনেকটা পদ্ধতিগত এবং স্বজ্ঞাত ইফেক্ট তৈরি করার জন্য ডিজাইন করা হয়েছে। এটি ধীর গতির অ্যানিমেশন, ইন্টারঅ্যাকটিভ মোশন, এবং ইউজার ইন্টারফেসের জন্য উপযোগী এফেক্ট সহজে তৈরি করার সুযোগ দেয়।

এখন, আমরা দেখব কিভাবে custom effects তৈরি এবং সেগুলি ব্যবহারের নিয়ম অনুসরণ করা হয়।

Custom ইফেক্টস তৈরি করা

script.aculo.us লাইব্রেরি ব্যবহার করে কাস্টম ইফেক্ট তৈরি করার জন্য আপনি সাধারণত Effect ক্লাস এবং তার মেথড ব্যবহার করবেন। Effect ক্লাসটি বিভিন্ন ধরনের অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে সাহায্য করে।

১. Basic Effect (Basic Animation)

সাধারণত, custom effect তৈরি করতে হলে Effect.Base ক্লাস থেকে একটি নতুন ইফেক্ট তৈরি করা হয়।

new Effect.Opacity('elementId', {
  duration: 1,  // অ্যানিমেশনের সময়কাল (সেকেন্ড)
  from: 0,      // প্রাথমিক অস্বচ্ছতা (0 মানে সম্পূর্ণ অস্বচ্ছ)
  to: 1         // শেষ অস্বচ্ছতা (1 মানে সম্পূর্ণ দৃশ্যমান)
});

এখানে, Effect.Opacity একটি কাস্টম ইফেক্ট তৈরি করছে যা একটি নির্দিষ্ট উপাদানের অস্বচ্ছতা (opacity) পরিবর্তন করবে।

২. Move (পদক্ষেপ পরিবর্তন করা)

এছাড়া, আপনি একটি উপাদানকে এক স্থান থেকে অন্য স্থানে স্থানান্তর করতে পারেন। এর জন্য Effect.Move ব্যবহার করা হয়।

new Effect.Move('elementId', {
  x: 100,  // x-অক্ষের দিকে 100 পিক্সেল
  y: 200,  // y-অক্ষের দিকে 200 পিক্সেল
  duration: 2  // অ্যানিমেশনের সময়কাল ২ সেকেন্ড
});

এটি উপাদানটি তার বর্তমান অবস্থান থেকে 100 পিক্সেল x-অক্ষে এবং 200 পিক্সেল y-অক্ষে সরিয়ে নেবে।

৩. Scaling (মাপ পরিবর্তন)

একইভাবে, আপনি একটি উপাদানের আকার পরিবর্তন করতে পারেন Effect.Scale ব্যবহার করে:

new Effect.Scale('elementId', 1.5, {  // ১.৫ গুণ বড় করা
  duration: 1,
  scaleMode: 'box'  // আকার পরিবর্তনের মোড
});

এটি উপাদানটির আকার ১.৫ গুণ বৃদ্ধি করবে এবং ১ সেকেন্ডে তা সম্পন্ন হবে।

৪. Custom ইফেক্ট তৈরি করা (Custom Effect)

আপনি যদি একাধিক ইফেক্ট একত্রে প্রয়োগ করতে চান বা কোনো নির্দিষ্ট কাস্টম অ্যানিমেশন তৈরি করতে চান, তবে Effect.Base ক্লাসকে ইনহেরিট করতে পারেন। এটি আপনাকে সম্পূর্ণ নিয়ন্ত্রণ দিতে সাহায্য করবে।

Effect.Custom = Class.create();
Object.extend(Effect.Custom.prototype, Effect.Base.prototype);

Effect.Custom.prototype.initialize = function(element, options) {
  this.element = $(element);
  this.options = Object.extend({
    duration: 1,
    from: 0,
    to: 1
  }, options || {});
  this.setup();
};

Effect.Custom.prototype.setup = function() {
  // এখানে অ্যানিমেশন লজিক লিখুন
};

Effect.Custom.prototype.update = function(position) {
  // অ্যানিমেশনের বর্তমান পজিশন অনুযায়ী গাণিতিক হিসাব বা পরিবর্তন
};

Effect.Custom.prototype.finish = function() {
  // অ্যানিমেশন শেষ হওয়ার পর কার্যকরী কোন অপারেশন
};

এই কাস্টম ইফেক্টে আপনি আপনার নির্দিষ্ট অ্যানিমেশন লজিক ইনজেক্ট করতে পারবেন এবং অন্যান্য কাস্টম পারামিটার যোগ করতে পারবেন।

Custom ইফেক্টস ব্যবহারের নিয়ম

1. ব্যবহারের আগে স্ক্রিপ্ট.অ্যাকুলো.ইউএস ইনস্টল করুন:

   • script.aculo.us এর সকল ফিচার ব্যবহারের জন্য প্রথমে এটি আপনার প্রোজেক্টে ইনক্লুড করতে হবে। এটি ব্যবহার করতে হলে prototype.js ও প্রয়োজন।

   CDN থেকে ইনস্টল করা:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
   <script type="text/javascript" src="https://script.aculo.us/javascripts/effects.js"></script>
   

2. এফেক্টের সময়কাল এবং গতি নির্ধারণ করুন:
   • duration প্রপার্টি দিয়ে অ্যানিমেশনটির সময়কাল নির্ধারণ করুন। এটি সেকেন্ডে মাপা হয়। সাধারণত, এর মান ১-২ সেকেন্ডের মধ্যে থাকে।
3. ফাংশনাল কাস্টমাইজেশন করুন:
   • Easing Functions এর মাধ্যমে আপনি অ্যানিমেশনগুলোর গতি নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, আপনি easeIn, easeOut, বা linear ইত্যাদি ব্যবহার করতে পারেন।

4. Callbacks এবং Events:

   • onStart, onUpdate, এবং onFinish কাস্টম কলব্যাক ফাংশন যোগ করা যায় যাতে অ্যানিমেশন চলাকালীন বা শেষ হওয়ার পর নির্দিষ্ট কার্যকলাপ সম্পন্ন হয়।

   উদাহরণ:

   new Effect.Opacity('elementId', {
     duration: 2,
     from: 0,
     to: 1,
     afterFinish: function() {
       alert("Animation Complete!");
     }
   });
   

5. অ্যানিমেশনের সমন্বয়:

   • একাধিক ইফেক্ট একত্রে প্রয়োগ করার জন্য, একাধিক ইফেক্ট Effect.parallel বা Effect.sequence ব্যবহার করে একত্রিত করতে পারেন।

   Parallel Example:

   new Effect.Parallel([
     new Effect.Scale('element1', 2),
     new Effect.Opacity('element2', { from: 0, to: 1 })
   ], { duration: 2 });
   

সারাংশ

script.aculo.us একটি শক্তিশালী লাইব্রেরি যা ওয়েব পেজে কাস্টম অ্যানিমেশন এবং ইফেক্ট তৈরি করতে সহায়তা করে। এটি একাধিক ফাংশনাল ইফেক্ট, যেমন Effect.Opacity, Effect.Scale, এবং Effect.Move সরবরাহ করে যা ওয়েব পেজকে আরও ইন্টারঅ্যাকটিভ এবং অ্যাট্রাকটিভ করে তোলে। আপনি custom effects তৈরি করতে Effect.Base ক্লাস ইনহেরিট করতে পারেন এবং নিজের কাস্টম লজিক প্রয়োগ করতে পারেন। স্ক্রিপ্ট.অ্যাকুলো.ইউএস ব্যবহারের মাধ্যমে আপনি ওয়েব পেজে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইফেক্ট সহজেই তৈরি করতে পারবেন।