Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইনকে আরো আধুনিক এবং ইন্টারঅ্যাকটিভ করে তোলে। Ripple Effect হল সেই জনপ্রিয় অ্যানিমেশন ইফেক্ট, যা ব্যবহারকারী যখন কোনো উপাদানে (যেমন বাটন, কার্ড বা অন্যান্য কম্পোনেন্ট) ক্লিক করেন, তখন একটি তরঙ্গের মত প্রভাব (এফেক্ট) দেখতে পান। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরও স্মুথ এবং আকর্ষণীয় করে তোলে।
MDL এ Ripple Effect একেবারে সহজে যোগ করা যায়। MDL এর অনেক কম্পোনেন্টে ইতিমধ্যেই এই প্রভাবটি কার্যকরী থাকে, তবে আপনি এটি কাস্টমাইজড কম্পোনেন্টেও যুক্ত করতে পারবেন। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Button, Card, এবং অন্যান্য কম্পোনেন্টে Ripple Effect যোগ করা যায়।
MDL Button এ Ripple Effect যোগ করা
MDL বাটন গুলোতে ডিফল্টভাবে Ripple Effect থাকে, যা একটি ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন ক্লিক) করার সময় একটি তরঙ্গ সৃষ্টি করে। এই ইফেক্টটি বাটনের ডিজাইনকে আরও ইন্টারঅ্যাকটিভ করে তোলে।
উদাহরণ: Button এ Ripple Effect
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
Click Me
</button>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
ব্যাখ্যা:
- mdl-button: বাটন তৈরি করতে ব্যবহৃত ক্লাস।
- mdl-js-button: বাটনের কার্যকারিতা প্রয়োগ করতে ব্যবহৃত ক্লাস।
- mdl-js-ripple-effect: এটি Ripple Effect যোগ করার জন্য ব্যবহৃত ক্লাস।
- mdl-button--raised: বাটনটিকে raised (উঁচু) স্টাইলে প্রদর্শন করবে।
- mdl-button--colored: বাটনটিকে রঙিন করবে।
এই কোডে, বাটনে ক্লিক করলে Ripple Effect দেখা যাবে। এটি ব্যবহারকারীর জন্য একটি সজীব এবং ইন্টারঅ্যাকটিভ অনুভূতি প্রদান করে।
MDL Card এ Ripple Effect যোগ করা
MDL-এ Card কম্পোনেন্টে Ripple Effect যোগ করা খুবই সহজ। আপনি যদি Card-এর উপর ক্লিক করার জন্য Ripple Effect যোগ করতে চান, তবে mdl-js-ripple-effect ক্লাস ব্যবহার করতে হবে।
উদাহরণ: Card এ Ripple Effect
<div class="mdl-card mdl-shadow--2dp mdl-js-ripple-effect">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card with Ripple Effect</h2>
</div>
<div class="mdl-card__supporting-text">
This is a simple card with a Ripple Effect.
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Action Button
</button>
</div>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
ব্যাখ্যা:
- mdl-card: এটি Card তৈরি করার জন্য ব্যবহৃত ক্লাস।
- mdl-js-ripple-effect: Card-এ Ripple Effect যোগ করার জন্য ব্যবহৃত ক্লাস।
- mdl-shadow--2dp: কার্ডটির জন্য শ্যাডো (shadow) প্রভাব।
- mdl-card__title: Card এর শিরোনাম।
- mdl-card__supporting-text: কার্ডের বেসিক টেক্সট কন্টেন্ট।
এটি একটি Card তৈরি করবে, যেখানে Ripple Effect প্রয়োগ করা হবে। আপনি যদি Card এর উপরে ক্লিক করেন, তখন একটি তরঙ্গগত প্রভাব দেখানো হবে।
MDL Textfield এবং অন্যান্য Components এ Ripple Effect যোগ করা
MDL-এ আপনি Textfield, Checkbox, Radio Buttons, এবং অন্যান্য UI কম্পোনেন্টেও Ripple Effect যোগ করতে পারেন। MDL এর বেশিরভাগ কম্পোনেন্টে ডিফল্টভাবে Ripple Effect থাকে, তবে আপনি যদি কাস্টম কম্পোনেন্ট তৈরি করেন, তবে mdl-js-ripple-effect ক্লাসটি প্রয়োগ করতে পারেন।
উদাহরণ: Textfield এ Ripple Effect
<label for="sample1" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample1">
<span class="mdl-textfield__label">Enter Text</span>
</label>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
এখানে, mdl-textfield ক্লাসের মাধ্যমে Ripple Effect তৈরি করা হয়েছে, যা ব্যবহারকারী যখন ইনপুট ফিল্ডে ক্লিক করবেন তখন একটি অ্যানিমেশন প্রদর্শিত হবে।
Ripple Effect কাস্টমাইজেশন
MDL এ Ripple Effect কাস্টমাইজ করা যায়। আপনি CSS এর মাধ্যমে Ripple Effect এর আকার, রঙ এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন। তবে, MDL সাধারণত সিস্টেম ডিফল্ট Ripple Effect ব্যবহারের জন্য খুব সহজেই কাস্টমাইজেশন প্রদান করে।
Ripple Effect এর আকার কাস্টমাইজ করা
.mdl-js-ripple-effect {
transform: scale(1.5);
}
এটি Ripple Effect এর আকারকে বড় করে দিবে।
Ripple Effect এর রঙ কাস্টমাইজ করা
.mdl-js-ripple-effect {
color: #ff5722;
}
এটি Ripple Effect এর রঙ পরিবর্তন করে দেবে।
সারাংশ
Material Design Lite (MDL)-এ Ripple Effect একটি অত্যন্ত কার্যকরী এবং আকর্ষণীয় ফিচার যা ওয়েব পেজে ইন্টারঅ্যাকশন সময় ব্যবহারকারীকে একটি উন্নত অভিজ্ঞতা প্রদান করে। MDL এর মাধ্যমে Button, Card, Textfield এবং অন্যান্য UI কম্পোনেন্টে সহজেই Ripple Effect যোগ করা যায়। এই ইফেক্টটি ব্যবহারকারীকে ক্লিক বা ট্যাপ করার সময় একটি নরম, তরঙ্গের মত অ্যানিমেশন দেখায়, যা ডিজাইনকে আরো জীবন্ত এবং ইন্টারঅ্যাকটিভ করে তোলে। MDL এ Ripple Effect যোগ করা খুবই সহজ এবং কাস্টমাইজেশনও সহজ, যার মাধ্যমে আপনি এর আকার, রঙ, এবং স্টাইল পরিবর্তন করতে পারেন।
Read more
