মোবাইল অ্যাপ্লিকেশন গুলোতে কোনো বাটন কিংবা অপশন এ হোভার অথবা ক্লিক করলে অসাধারণ রিপল (ঢেউ) ইফেক্ট দেখা যায়। মোবাইল অ্যাপ্লিকেশন গুলোতে রিপল ইফেক্ট দেখার পর হয়তো আপনি ভেবেছেন যে ওয়েবসাইটে এরকম ইফেক্ট ব্যবহার করা যাবে কি না। হয়তো সেই ভাবনা থেকেই আপনি এই পোস্ট খুঁজে বের করেছেন। আর এই পোস্ট ই হতে চলেছে আপনার ভাবনার সমাধান। কেননা এই পোস্টে কিভাবে ওয়েবসাইটে কোনো বাটন কিংবা অপশন এ হোভার এবং ক্লিক ইভেন্টে রিপল ইফেক্ট ব্যবহার করা যায় সেই বিষয়ে বিস্তারিত আলোচনা করা হবে। তাহলে চলুন ঝাঁপিয়ে পড়া যাক মূল পোস্টে।
জিপ ফাইলের মধ্যে আপনি দুটি জাভাস্ক্রিপ্ট ফাইল পাবেন। দুটির মধ্যে একটি ডিফল্ট(jquery.ripple.js) প্লাগিন এবং অপরটি আমার কাস্টোমাইজ(jquery.ripple.custom.js) করা। নিচে দুটো প্লাগিন এরই ব্যবহার পদ্ধতি দেখানো হলো।
আর হ্যাঁ, এই প্লাগিন ব্যবহার করার জন্য অবশ্যই আপনার সাইটে jQuery ইনস্টল থাকতে হবে। আগে থেকে ইনস্টল না থাকলে নিচের কোডটি আপনার ওয়েবপেজের HTML ফাইলের হেড ট্যাগ এর মধ্যে পেস্ট করে ইনস্টল করে নিবেন।
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>ডিফল্ট (jquery.ripple.js)
jQuery রিপল এর ডিফল্ট প্লাগিন টি ব্যবহার করার জন্য জিপ ফাইলে থাকা jquery.ripple.js ফাইলটি আপনার সাইটে কিংবা কোনো ক্লাউড সার্ভারে আপলোড করে আপনার HTML ফাইলের সাথে লিঙ্ক করে দিন। তারপর নিচের কোড এর মত করে যে এলিমেন্ট এ রিপল ইফেক্ট দিতে চান সেটাতে ক্লাসনেন হিসেবে ripple দিতে হবে এবং যে কালারে রিপল ইফেক্ট রান হবে সেটা data-color এট্রিবিউট এর মধ্যে দিতে হবে। আর যে এলিমেন্ট এ রিপল ইফেক্ট ব্যবহার করছেন সিএসএস ব্যবহার করে ইচ্ছা মতো সেটার ডিজাইন করতে পারবেন।
<button class="ripple" data-color="#dddddd">Click Me!</button>কাস্টোমাইজড (jquery.ripple.custom.js)
jQuery রিপল এর আমার কাস্টোমাইজ করা প্লাগিনটি ব্যবহার করা ডিফল্ট প্লাগিন এর থেকে কিছুটা সহজ। (jquery.ripple.custom.js) ফাইলটি আপলোড করে HTML ফাইলের সাথে লিঙ্ক করার পর যে এলিমেন্ট এ রিপল ইফেক্ট দিয়ে চান সেটাতে ক্লাসনেম হিসেবে শুধু ripple দিলেই কাজ শেষ। এখানে কোনো ডাটা কালার এট্রিবিউট এর দরকার নেই। রিপল ইফেক্ট এর কালার হিসেবে এলিমেন্ট এর টেক্সট এ যে কালার থাকবে সেটার লাইট কালারে রিপল ইফেক্ট রান হবে।
<button class="ripple">Click Me!</button>রিপল অ্যানিমেশন এর স্পিড কমানো কিংবা বাড়ানো যেতে পারে। স্পিড বাড়ানোর জন্য ক্লাস হিসেবে 'ripple-fast' ব্যবহার করতে হবে এবং স্পিড কমানোর জন্য ক্লাস হিসেবে 'ripple-slow' ব্যবহার করতে হবে।
Download Project
তো আর্টিকেল মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।