Framework7 অ্যাপ্লিকেশনে পৃষ্ঠা পরিবর্তন, উপাদান প্রদর্শন বা লুকানো, এমনকি কাস্টম ইন্টারঅ্যাকশনেও অ্যানিমেশন ব্যবহার করা যায়। এর ফলে ইউজার ইন্টারফেস আরও প্রানবন্ত, ব্যবহার-বান্ধব এবং অ্যাপের অভিজ্ঞতা উন্নত হয়।
Page Level Animations
Framework7 পৃষ্ঠা পরিবর্তন করার সময় ডিফল্টভাবে অ্যানিমেশন ব্যবহার করে। রাউট পরিবর্তনের সময় পৃষ্ঠা একটিতে প্রবেশ এবং অন্যটি থেকে প্রস্থানের সময় বিভিন্ন Transition Animation দেখা যায়।
ডিফল্ট পৃষ্ঠা অ্যানিমেশন
- Slide In/Out: একটি পৃষ্ঠা স্ক্রিনের ডানে বা বামে থেকে স্লাইড করে প্রবেশ বা প্রস্থান করে।
- Fade In/Out: পৃষ্ঠা ধীরে ধীরে ফেইড ইন বা ফেইড আউট হয়।
আপনি রাউট কনফিগারেশনে animate: false সেট করে অ্যানিমেশন বন্ধ করতে পারেন, বা কাস্টম ক্লাস ব্যবহার করে নিজস্ব অ্যানিমেশন যুক্ত করতে পারেন।
{
path: '/about/',
url: './pages/about.html',
options: {
animate: false
}
}
উপরের উদাহরণে about পেজে যাওয়ার সময় অ্যানিমেশন বন্ধ করা হয়েছে।
কাস্টম পৃষ্ঠা ট্রান্সিশন
আপনি CSS ট্রান্সিশন ব্যবহার করে কাস্টম পৃষ্ঠা ট্রান্সিশন তৈরি করতে পারেন। পৃষ্ঠা DOM এ .page-previous, .page-current, .page-next ক্লাস ব্যবহার করে নির্দিষ্ট অ্যানিমেশন যোগ করা সম্ভব।
.page-current {
transform: translateX(0);
transition: transform 0.3s ease-in-out;
}
.page-previous {
transform: translateX(-100%);
}
.page-next {
transform: translateX(100%);
}
উপরের CSS কোডটি একটি স্লাইডিং অ্যানিমেশন তৈরিতে সহায়তা করে। যখন নতুন পৃষ্ঠা .page-current ক্লাস পায়, তখন এটি স্ক্রিনের ভেতরে স্লাইড করে আসে।
Element Level Animations
Framework7 এর মধ্যে বিভিন্ন UI উপাদান যেমন বোতাম, তালিকা, কার্ড, ইমেজ প্রভৃতি CSS ট্রান্সিশন ও অ্যানিমেশন ব্যবহার করে অ্যানিমেট করা যায়। এর জন্য সাধারণত CSS অ্যনিমেশন এবং ট্রান্সিশন ব্যবহার করা হয়।
CSS Transitions ব্যবহার করে অ্যানিমেশন
HTML এলিমেন্টে CSS ক্লাস যোগ অথবা সরিয়ে অ্যানিমেশন ট্রিগার করা যায়। উদাহরণস্বরূপ, একটি বোতাম ক্লিক করলে কোনো DIV এলিমেন্ট ফেইড ইন বা ফেইড আউট করার অ্যানিমেশন:
<button class="button button-fill" id="toggleBtn">Toggle Box</button>
<div id="box" class="hidden-box">Some content here</div>
.hidden-box {
opacity: 0;
transition: opacity 0.3s ease;
}
.hidden-box.show {
opacity: 1;
}
var ('#toggleBtn').on('click', function() {
$$('#box').toggleClass('show');
});
উপরের কোডে বোতাম ক্লিক করলে show ক্লাস যুক্ত বা সরানো হয়, যা opacity পরিবর্তনের মাধ্যমে অ্যানিমেশন তৈরি করে।
CSS Animations ব্যবহার করে কাস্টম মোশন
CSS Keyframes ব্যবহার করে কাস্টম অ্যানিমেশন তৈরি করা যায়, যা নির্দিষ্ট সময় পরপর উপাদানের স্টেট পরিবর্তন করতে পারে।
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.bounce {
animation: bounce 1s infinite;
}
উপরের কোডে .bounce ক্লাস যুক্ত করলে উপাদান ক্রমাগত বাউন্স করবে।
JS বা Vue/React Integration সহ অ্যানিমেশন
যদি আপনি Framework7(Vue) বা Framework7(React) ব্যবহার করেন, তবে Transitions বা Animations লাইব্রেরির সাথে সহজে ইন্টিগ্রেট করতে পারবেন (যেমন GSAP, Animate.css, বা Vue/React-এর Transition কম্পোনেন্ট)। এভাবে স্টেট ম্যানেজমেন্টের সাথে অ্যানিমেশন সংযুক্ত করে UI কে আরও ইন্টারেক্টিভ করা যায়।
অ্যানিমেশন ব্যবহার করার সময় কিছু পরামর্শ
- সহজ এবং ক্ষণস্থায়ী রাখুন: খুব বেশি অ্যানিমেশন অ্যাপকে ধীর করে দিতে পারে। সংক্ষেপে এবং প্রয়োজনীয় জায়গায় অ্যানিমেশন ব্যবহার করুন।
- ইউজার এক্সপেরিয়েন্স বাড়ান: অ্যানিমেশন শুধু সাজসজ্জা নয়, ইউজারের দৃষ্টি নির্দেশনা বা অ্যাকশনের প্রতিক্রিয়া দেখানোর জন্য ব্যবহার করুন।
- পারফরম্যান্স খেয়াল রাখুন: CSS ট্রান্সফর্ম ব্যবহার করে হার্ডওয়্যার অ্যাক্সেলেশন পাওয়া যায়, যা অ্যানিমেশন স্মুথ করে।
Page এবং Element Level Animations ব্যবহার করে Framework7 অ্যাপের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করা যায়। ডিফল্ট পৃষ্ঠা ট্রান্সিশন, CSS ট্রান্সিশন, এবং কাস্টম keyframe অ্যানিমেশন ব্যবহার করে দ্রুত এবং কার্যকর অ্যানিমেশন যোগ করা সম্ভব।
Read more
