ট্রানজিশন ইফেক্টের ব্যবহার এবং কলাকৌশল

বর্তমান সময়ে ওয়েব সাইটের সৌন্দর্য বর্ধনের জন্য চলছে নানা রকম গবেষণা। ইতোমধ্যেই সিএসএস ৩ এর ট্রানজিশন, গ্রেডিয়েন্ট, ট্রান্সফরম ইফেক্ট সমূহ বর্তমান যুগের ওয়েব ইলিমেন্ট সমূহকে করে তুলেছে অনেক বেশি ইন্ট্রাকটিভ এবং ব্যবহার বান্ধব। ইতোমধ্যেই সি এস এস ৪ আসার কথাও শোনা যাচ্ছে। কয়েকদিন ধরে একটা বিষয় মাথায় ঘুরছে, আমরা কতটুকু প্রস্তুত সি এস এস ৪ কে স্বাগত জানানোর জন্য? জানি না আপনাদের কি অবস্থা, আমি কিন্তু সি এসএস ৩ তে একেবারেই নবীন।

আজকে আমরা সি এস এস ৩ এর ট্রানজিশন ইফেক্ট সম্পর্কে জানার চেষ্টা করব এবং একটা উদাহরণ দেখব।

প্রাথমিক প্রস্তুতি:

সি এস এস ৩ এর ট্রানজিশন ইফেক্ট সম্পর্কে জানার জন্য বা পর্যবেক্ষণ করার জন্য অবশ্যই আপনাকে মজিলা ফায়ারফক্স, গুগল ক্রম, সাফারী অথবা অপেরার নতুন কোন ভার্সন ব্রাউজার হিসেবে ব্যবহার করতে হবে। ইন্টারনেট এক্সপ্লোরার ৯ বা তার আগের ভার্সন সি এস এস ৩ এর ট্রানজিশন ইফেক্ট সাপোর্ট করে না তাই এর থেকে নিজেকে দূরে রাখুন।

ট্রানজিশন সম্পর্কিত কিছু তথ্য

আমরা বিভিন্ন ওয়েব ইলিমেন্ট যেমন বাটন,নেভিগেশন বার,ইমেজ গ্যালারি ইত্যাদিতে বিশেষ কোন কারণ যেমন মাউস ক্লিক করলে বা মাউস নিয়ে গেলে অথবা পেজ স্ক্রল করলে স্ট্যাইল পরিবর্তন হয়। উদাহরণ হিসেবে আমরা একটা সাধারণ ওয়েব বাটনের কার্যক্রম পর্যবেক্ষণ করতে পারি।

একটা সাধারণ বাটনের উপর মাউস নিয়ে গেলে তার কালার পরিবর্তন হয়।

এই বাটনটি সাধারণ সি এস এস ব্যবহার করে করা হলে, বাটনের উপর মাউস নিয়ে যাওয়ার সাথে সাথেই একটা কালার থেকে অন্য একটা কালারে পরিবর্তন হবে।

বাটনটিতে সি এস এস ৩ ব্যবহার করে আরো কিছু ইফেক্ট দেয়া যেতে পারে, যেমন ১ম কালার থেকে ২য় কালারে পরিবর্তন হতে কিছু সময়ের ব্যবধান তৈরি করা যায়, যে সময়ে ১ম কালারটি এনিমেটেড হয়ে ২য় কালারে রূপান্তরিত হবে, তাহলে বাটনটির পরিবর্তন অনেক বেশি জীবন্ত মনে হবে। এটাই হচ্ছে সি এস এস ৩ এর ট্রানজিশন ইফেক্ট।

তাহলে সংক্ষেপে বলা যায় ট্রানজিশন হচ্ছে সি এস এস ৩ এর এমন সব ইফেক্ট যা আমরা একটা স্ট্যাইল থেকে অন্য স্ট্যাইলে রূপান্তরিত হওয়ার সময় কোন প্রকার ফ্ল্যাশ বা জাভাস্ক্রিপ্ট ব্যাবহার ছাড়াই ব্যবহার করতে পারি।

ট্রানজিশন ইফেক্ট ব্যবহারের কলাকৌশল

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

• প্রথমে ইলিমেন্টটির কোন প্রোপার্টিতে ট্রানজিশন ইফেক্ট প্রয়োগ করতে হবে তা নির্ধারণ করে দিতে হবে।
• এর পর ট্রানজিশন ইফেক্টের জন্য সময় নির্ধারণ করে দিতে হবে।
• স্ট্যাইল পরিবর্তন হলে অর্থাৎ ইলিমেন্টটির প্রোপার্টির ভ্যালু পরিবর্তন হলে ইফেক্টটি দেখা যাবে।

যেমন

একটা div ইলিমেন্ট এর width:200px;height:100px;background:#00f; প্রোপার্টি সমূহ রয়েছে এর height:100px;প্রোপার্টিতে ট্রানজিশন ইফেক্ট প্রয়োগ করতে হলে transition:height 2s;এর অনূরূপ ডিক্লারেশন করতে হবে। এখানে 2s হচ্ছে সময়, অর্থাৎ ট্রানজিশন ইফেক্টটি কতক্ষণ কাজ করবে তা নির্ধারণ করা হয়েছে। 2s দুই সেকেন্ড সময় নির্দেশ করে। মিলি সেকেন্ডে এই মান নির্ধারণ করা যেতে পারে যেমন 300ms।

আরো কিছু তথ্য

মজিলা ৪ থেকে শুরু করে সকল ভার্সন সাপোর্ট করার জন্য -moz- প্রিফিক্স ব্যবহার করতে হয়।গুগল ক্রোম ও সাফারির জন্য -webkit- এবং অপরা ব্রাউজারের জন্য -o- প্রিফিক্স ব্যবহার করতে হয়। যেমন

[sourcecode language=”html”]
-moz-transition:height 2s,background 2s; /* Mozilla 4*/
-webkit-transition:height 2s,background 2s; /* Safari and Chrome */
-o-transition:height 2s,background 2s; /* Opera */
[/sourcecode]

প্রজেক্ট অনুশীলন

এক নজরে দেখে নেয়া যাক আমাদের প্রজেক্টটি।

প্রয়োজনীয় এইচ টি এম এল মার্কআপ

[sourcecode language=”html”]</pre>
&nbsp;
<div></div>
&nbsp;
<div></div>
&nbsp;
<div>
<h2>Transition</h2>
</div>
&nbsp;
<div></div>
[/sourcecode]

প্রয়োজনীয় সি এস এস স্ট্যাইল

[sourcecode language=”css”]
h2{color:#fff;
text-align:center;
padding-top:30px;}
div
{
width:200px;
height:100px;
background:#00f;
transition:height 2s,background 2s;
-moz-transition:height 2s,background 2s; /* Mozilla 4*/
-webkit-transition:height 2s,background 2s; /* Safari and Chrome */
-o-transition:height 2s,background 2s; /* Opera */
}
div:hover
{
height:300px;
background:#0f0;
}
[/sourcecode]

সম্পূর্ণ প্রজেক্ট

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে প্রদর্শিত ছবির মত দেখাবে।

………………………………………………………………………………..

জ্ঞন বিজ্ঞানের সংস্পর্শে আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবীর প্রত্যাশায় আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল।