জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার । jQuery Mobile Transitions

জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

আস্তে আস্তে আমরা জেকোয়েরি মোবাইল এর সব কিছু শিখে ফেলবো । আজ আমরা শিখবো জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার ।

জেকোয়েরি মোবাইলে সিএসএস৩ ইফেক্টস যোগ করা হয় যার কারনে পেজটি কিভাবে আমাদের সামনে ওপেন হবে তা নির্ধারিত হয় ।

জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস
এক পেজ থেকে অন্য পেজে কিভাবে যাবে তার জন্য জেকোয়েরি মোবাইলের অনেক ধরণের ইফেক্ট আছে । ট্রানজিশন ইফেক্ট ব্যবহার করতে গেলে আপনার ব্রাউজারে অবশ্যই CSS3 3D Transforms সাপোর্ট থাকতে হবে । এজন্য আপনাকে গুগল ক্রোম ১২+ , ইন্টারনেট এক্সপোলার ১০+ , মোজিলা ফায়ারফক্স ১৬+ , সাফারী ৪+, অপেরা ১৫+ ভার্সনের ব্রাউজার ব্যবহার করতে হবে ।
data-transition attribute যোগ করে আমরা খুব সুহজে কোনো লিংকে ট্রানজিশন ইফেক্ট দিতে পারি ।

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

আসুন তাহলে আমরা কিছু data-transition attribute এবং তাদের সম্পর্কে জেনে নেই ।

ট্রানজিশনঃ fade
বর্ণনাঃ এটা ডিফল্টভাবে দেখায় । আস্তে আস্তে পরের পেজকে দেখায় ।

ট্রানজিশনঃ flip
বর্ণনাঃ পিছন থেকে সামনের দিকে পৃষ্ঠা উল্টানোর স্টাইলে পেজ পরিবর্তন করে ।

ট্রানজিশনঃ flow
বর্ণনাঃ পেজকে নিক্ষেপ করে এবং নতুন একটা পেজ উঠে আসে ।

ট্রানজিশনঃ pop
বর্ণনাঃ পপ-আপ ইউন্ডো আকারে পরের পেজ আসে ।

ট্রানজিশনঃ slide
বর্ণনাঃ ডান থেকে বামে স্লাইড আকারে পেজ আসে ।

ট্রানজিশনঃ slidefade
বর্ণনাঃ ডান থেকে বামে স্লাইড অদৃশ্য হতে হতে পরের পেজ আসে ।

ট্রানজিশনঃ slideup
বর্ণনাঃ নিচ থেকে উপরের দিকে স্লাইড আকারে পেজ পরিবর্তন হবে ।

ট্রানজিশনঃ slidedown
বর্ণনাঃ উপর থেকে নিচের দিকে স্লাইড আকারে পেজ পরিবর্তন হবে ।

ট্রানজিশনঃ turn
বর্ণনাঃ পরের পেজে আবর্তন করে পেজ পরিবর্তিত হয় ।

ট্রানজিশনঃ none
বর্ণনাঃ কোনো ট্রানজিশন ইফেক্ট নেই ।

ডিফল্টভাবে কিন্তু আমরা এই fade ট্রানজিশন ইফেক্ট দেখতে পাই ।
এই সকল ইফেক্টগুলো কিন্তু বাম থেক ডানে অথবা পিছন থেকে সামনের ইফেক্ট পরিবর্তন করতে পারি ।
<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>

এই কোডের মাধ্যমে আমরা পেজের ডিরেকশন ঠিক করে দিতে পারি ।

আর এরই ভেতর আমরা কিন্তু জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস শিখে ফেললাম । না বুঝতে পারলে অবশ্যই কমেন্ট করবেন কিন্তু ।

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%9c%e0%a7%87%e0%a6%95%e0%a7%8b%e0%a7%9f%e0%a7%87%e0%a6%b0%e0%a6%bf-%e0%a6%ae%e0%a7%8b%e0%a6%ac%e0%a6%be%e0%a6%87%e0%a6%b2-%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%a8%e0%a6%9c%e0%a6%bf-3/