CSS ট্রানজিশন

আপনি যখন একটি ওয়েব পৃষ্ঠা ডিজাইন করছেন, তখন আপনি একটি উপাদানে রূপান্তর যোগ করতে চাইতে পারেন। একটি নির্দিষ্ট শর্ত পূরণ হলে ট্রানজিশন শুরু হয়। উদাহরণস্বরূপ, ব্যবহারকারী যখন বোতামের উপর ঘোরায় তখন আপনি একটি বোতামের পটভূমির রঙ পরিবর্তন করতে চাইতে পারেন।

যখন একটি HTML উপাদানের বৈশিষ্ট্য পরিবর্তন হয় তখন আপনি একটি অ্যানিমেশন প্রভাব তৈরি করতে CSS ট্রানজিশন প্রপার্টি এবং এর সাবপ্রপার্টি ব্যবহার করতে পারেন।

এই টিউটোরিয়ালটি কয়েকটি উদাহরণ সহ, CSS ট্রানজিশনের মূল বিষয় এবং CSS অ্যানিমেশন তৈরি করতে কীভাবে ট্রানজিশন প্রপার্টি ব্যবহার করতে হয় তা নিয়ে আলোচনা করবে। এই টিউটোরিয়ালের শেষ নাগাদ, আপনি CSS ট্রানজিশন এবং ট্রানজিশন প্রপার্টি নিয়ে কাজ করার ক্ষেত্রে একজন বিশেষজ্ঞ হয়ে উঠবেন।

সিএসএস রূপান্তর

ডিফল্টরূপে, যখন একটি CSS সম্পত্তির মান পরিবর্তিত হয়, ওয়েব পৃষ্ঠাটি তাৎক্ষণিকভাবে পরিবর্তনটি প্রয়োগ করে।

উদাহরণস্বরূপ, আপনি যদি একটি স্টাইল পরিবর্তন তৈরি করেন যা একটি বোতামের উপর কার্সার ঘোরার সময় সক্রিয় হয়, ব্যবহারকারীরা তাদের কার্সার দিয়ে বোতামের উপর ঘোরার সাথে সাথে নতুন শৈলীটি প্রয়োগ করা হবে। ব্যবহারকারীর কার্সার বোতাম থেকে সরে যাওয়ার সাথে সাথে বোতামটি তাত্ক্ষণিকভাবে তার ডিফল্ট শৈলীতে ফিরে আসবে।

CSS ট্রানজিশন বৈশিষ্ট্যটি দুটি শৈলীর মধ্যে একটি মসৃণ রূপান্তর তৈরি করতে ব্যবহৃত হয়। আপনি যখন ট্রানজিশন প্রপার্টি ব্যবহার করেন, তখন ওয়েব পেজ দুটি শৈলীর মধ্যে পরিবর্তনকে অ্যানিমেট করবে। এই বৈশিষ্ট্যটি আপনাকে আরও নান্দনিক-আনন্দজনক শৈলী পরিবর্তনগুলি তৈরি করতে দেয়।

একটি CSS রূপান্তরের দুটি উপাদান রয়েছে। এইগুলো:

• নতুন CSS প্রপার্টি আপনি একটি উপাদানে প্রয়োগ করতে চান।
• পরিবর্তনের সময়কাল।

ডিফল্টরূপে, একটি রূপান্তরের সময়কাল 0 সেকেন্ডে সেট করা হয়। এর মানে হল যে আপনি একটি সময়কাল সংজ্ঞায়িত না করলে, আপনার নির্দিষ্ট করা পরিবর্তনের কোনো প্রভাব থাকবে না—অন্য কথায়, শৈলী পরিবর্তন তাৎক্ষণিকভাবে ঘটবে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

CSS ট্রানজিশন উদাহরণ

ধরুন আমরা একটি ওয়েবসাইটের জন্য একটি বোতাম ডিজাইন করছি এবং ব্যবহারকারী যখন তাদের কার্সার দিয়ে এটির উপর ঘোরায় তখন আমরা বোতামটির স্টাইল পরিবর্তন করতে চাই। যখন ব্যবহারকারী তাদের কার্সার দিয়ে বোতামের উপর ঘোরাফেরা করছেন না, তখন বোতামটির একটি নীল সীমানা থাকা উচিত। তারপরে, যখন ব্যবহারকারী তাদের কার্সার দিয়ে বোতামের উপর ঘোরায়, তখন বোতামের পটভূমির রঙ ডিফল্ট রঙ (সাদা) থেকে নীলে পরিবর্তিত হওয়া উচিত।

উভয় অবস্থাতেই, বোতামটি 100px লম্বা এবং 100px চওড়া হওয়া উচিত এবং আমাদের বোতামের পাঠ্য কেন্দ্রীভূত হওয়া উচিত। দুই রাজ্যের মধ্যে রূপান্তর দুই সেকেন্ড সময় নিতে হবে.

এই বোতামটি তৈরি করতে আমরা যে কোডটি ব্যবহার করব তা এখানে:

index.html

<div><p>This is a button.</p></div>

styles.css

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s;
}

div:hover {
	background-color: #33CCFF;
}

আমাদের কোড ফিরে আসে:

[Code result here]


আমাদের কোডে, আমরা বলেছি যে আমাদের বোতামটি 100px চওড়া দ্বারা 100px উচ্চ হওয়া উচিত এবং বোতামের বিষয়বস্তুগুলির একটি কেন্দ্রে সারিবদ্ধ হওয়া উচিত। আমরা আমাদের বোতামের জন্য একটি 3-px-প্রশস্ত কঠিন নীল সীমানাও নির্দিষ্ট করেছি।

আপনি যখন আপনার কার্সার দিয়ে বোতামের উপর ঘোরান, আপনি দেখতে পাবেন যে এর পটভূমির রঙ নীল হয়ে যায়। আপনি যখন আপনার কার্সারটি সরান, বোতামের পটভূমির রঙটি সাদা হয়ে যায়।

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

একইভাবে, ব্যবহারকারী যখন তাদের কার্সারটি বোতামটি বন্ধ করে দেয়, তখন দুই সেকেন্ডের মধ্যে পটভূমির রঙ নীল থেকে সাদাতে পরিবর্তিত হয়-তাই আবার, তাৎক্ষণিকভাবে নয়। এইভাবে, আমরা পৃষ্ঠায় কার্সার স্থাপনের উপর ভিত্তি করে নতুন পটভূমির রঙে এবং থেকে একটি মসৃণ, দুই-সেকেন্ডের রূপান্তর অর্জন করতে সক্ষম হয়েছি।

তারপরে আমরা যে স্টাইলটি ট্রিগার করতে চাই তা নির্দিষ্ট করে দিয়েছি যখন ব্যবহারকারী কার্সার সহ বোতামের উপর ঘোরায়। আমরা :হোভার নির্বাচক ব্যবহার করে এটি সম্পন্ন করেছি। প্রোগ্রামটি একটি এলিমেন্টে :হোভার সিলেক্টরে সংজ্ঞায়িত শৈলী(গুলি) প্রয়োগ করে যখন একজন ব্যবহারকারী তাদের কার্সার দিয়ে ঐ উপাদানটির উপর ঘোরায়।

আপনি যদি CSS :hover নির্বাচক সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে CSS :hover নির্বাচক সম্পর্কে আমাদের নির্দেশিকা পড়ুন।

ট্রানজিশন স্পিড কার্ভ

ট্রানজিশন-টাইমিং-ফাংশন প্রোপার্টি আপনাকে ট্রানজিশন ইফেক্টের গতি বক্ররেখা নির্দিষ্ট করতে দেয়। এই সম্পত্তি দ্বারা গৃহীত মানগুলির কয়েকটি এখানে রয়েছে:

মান (এবং সংশ্লিষ্ট বর্ণনা)

ট্রানজিশন-টাইমিং-ফাংশন প্রপার্টির

আপনি দেখতে পাচ্ছেন, এই টেবিলের প্রথম মানটি—“সহজ”—ডিফল্ট মান। এর মানে হল যে আপনি যদি ট্রানজিশন-টাইমিং-ফাংশন প্রপার্টির জন্য একটি মান নির্দিষ্ট না করেন, অথবা যদি আপনি একটি ট্রানজিশন স্টাইল করার সময় প্রপার্টিটি একেবারে নির্দিষ্ট না করেন, তাহলে ওয়েব পেজটি এই মান ব্যবহার করার জন্য ডিফল্ট হবে।

ট্রানজিশন-টাইমিং-ফাংশন প্রোপার্টি কীভাবে কাজ করে তা বোঝাতে আমাদের শেষ উদাহরণ থেকে কোডটি নেওয়া যাক। আমাদের শেষ উদাহরণে, আমরা একটি "সহজ" গতি বক্ররেখা নির্দিষ্ট করেছি। এর মানে হল যে আমাদের বোতামের স্টাইলিং একটি ধীর শুরু, একটি দ্রুত ত্বরণ এবং একটি ধীর শেষের সাথে একটি স্টাইল থেকে অন্য স্টাইলে পরিবর্তিত হবে৷

যাইহোক, ধরুন আমরা চাই যে আমাদের বোতামটি একটি লিনিয়ার ট্রানজিশন ব্যবহার করে তার নতুন পটভূমির রঙে রূপান্তরিত হোক। আমরা "ইজ-ইন" মান উল্লেখ করে তা করতে পারি। এই জন্য কোড এখানে:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s linear 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

আমাদের কোড ফিরে আসে:

[Result of code]


আমাদের শৈলীগুলি বেশিরভাগই একই রকম যা আমরা আমাদের শেষ উদাহরণে ব্যবহার করেছি। শুধুমাত্র পার্থক্য হল একটি ease উল্লেখ করার পরিবর্তে ট্রানজিশন, আমরা একটি linear নির্দিষ্ট করি স্থানান্তর এর মানে হল যে একবার ট্রিগার হয়ে গেলে ট্রানজিশনের গতি সামঞ্জস্যপূর্ণ থাকবে।

ট্রানজিশন বিলম্ব

ট্রানজিশন-ডেলে প্রোপার্টি আপনাকে ট্রানজিশন ইফেক্টের জন্য বিলম্ব নির্দিষ্ট করতে দেয়। ট্রানজিশন-বিলম্বের বৈশিষ্ট্যে নির্ধারিত মান সেকেন্ডের মধ্যে হওয়া উচিত।

ধরুন আমরা চাই আমাদের বোতামটি এক সেকেন্ড বিলম্বের পর তার নতুন পটভূমির রঙে পরিবর্তন করুক। আমরা নিম্নলিখিত কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color ease-in 0.5s;
	transition-delay: 1s;
}

div:hover {
	background-color: #33CCFF;
}

আমাদের কোড ফিরে আসে:

[Code result here]


আমাদের কোডে, আমরা আমাদের স্থানান্তরের বিলম্বকে এক সেকেন্ড হতে উল্লেখ করি। সুতরাং, ব্যবহারকারী বোতামের উপর তার কার্সার হভার করা শুরু করার এক সেকেন্ড পর্যন্ত রূপান্তর শুরু হয় না।

একাধিক রূপান্তর প্রয়োগ করা হচ্ছে

আপনি যখন ট্রানজিশন নিয়ে কাজ করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একাধিক ট্রানজিশন ইফেক্ট করতে চান।

আপনি একাধিক ট্রানজিশন নির্দিষ্ট করে এবং প্রতিটি ট্রানজিশনকে কমা দিয়ে আলাদা করে এটি করতে পারেন। প্রতিটি ট্রানজিশনের একটি সময়কাল, গতি বক্ররেখা এবং অন্য কোনো বৈশিষ্ট্য থাকতে পারে যা একটি নিয়মিত ট্রানজিশন ব্যবহার করবে।

উদাহরণস্বরূপ, আগে থেকে আমাদের বোতামের উদাহরণ নেওয়া যাক। ধরুন আমরা শুধু আমাদের বোতামের ব্যাকগ্রাউন্ডের রঙই নীল করতে চাই না, কিন্তু আমরা আমাদের বোতামের বর্ডার কালারও গোলাপী করতে চাই। যখন ব্যবহারকারী কার্সারের সাথে উপাদানের উপর ঘোরায় তখন এই দুটিই ঘটতে হবে। এই কাজটি সম্পন্ন করতে আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s, border 2s;
}

div:hover {
	background-color: #33CCFF;
	border: solid 3px lightpink
}

আমাদের কোড ফিরে আসে:

[Code result here]


আপনি যখন বোতামের উপর কার্সার করেন, তখন এর পটভূমির রঙ নীল হয়ে যায় এবং এর সীমানার রঙ হালকা গোলাপিতে পরিবর্তিত হয়। এই রূপান্তরটি সম্পূর্ণ হতে দুই সেকেন্ড সময় নেয়।

ট্রানজিশনের তালিকায় প্রতিটি ট্রানজিশন যে ক্রমানুসারে প্রদর্শিত হয় তা পরিবর্তনটি কীভাবে প্রদর্শিত হবে তা প্রভাবিত করে না।

সিএসএস ট্রানজিশন লংহ্যান্ড বনাম শর্টহ্যান্ড

আমাদের উপরের উদাহরণে, আমরা আমাদের ট্রানজিশন স্টাইল করতে ট্রানজিশন প্রপার্টি ব্যবহার করেছি। সিএসএস-এ একটি রূপান্তর সংজ্ঞায়িত করতে ব্যবহৃত চারটি পৃথক উপ-সম্পত্তির জন্য রূপান্তর বৈশিষ্ট্যটি সংক্ষিপ্ত। এই চারটি উপ-সম্পদ হল:

• পরিবর্তন-সম্পত্তি :বৈশিষ্ট্যগুলি সেট করে যেখানে একটি রূপান্তর প্রভাব প্রয়োগ করা হবে৷
• ট্রানজিশন-সময়কাল :রূপান্তর কতক্ষণ স্থায়ী হবে তা নির্দেশ করে৷
• ট্রানজিশন-টাইমিং-ফাংশন :পরিবর্তনের গতি নির্ধারণ করে।
• ট্রানজিশন-বিলম্ব :রূপান্তর শুরুতে বিলম্ব করে।

এই বৈশিষ্ট্যগুলি কীভাবে কাজ করে তা প্রদর্শন করতে আসুন আমাদের উপরের উদাহরণটি ব্যবহার করি। ধরুন আমরা একটি নীল বর্ডার, একটি ডিফল্ট (সাদা) পটভূমির রঙ এবং কেন্দ্র-সারিবদ্ধ পাঠ্য সহ একটি 100px বাই 100px বোতাম তৈরি করতে চাই। আমাদের বোতামের পটভূমির রঙটি নীল হয়ে যাওয়া উচিত যখন ব্যবহারকারী তাদের কার্সার দিয়ে এটির উপর ঘোরায়। এই রূপান্তরটি 2 সেকেন্ড সময় নিতে হবে, এবং ব্যবহারকারী তাদের কার্সার দিয়ে বোতামের উপর ঘোরানো শুরু করার 0.5 সেকেন্ড পরে এটি শুরু হওয়া উচিত।

এই কাজটি সম্পন্ন করতে আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

আমাদের কোড ফিরে আসে:

[Code result]


আপনি দেখতে পাচ্ছেন, আমরা একটি বোতাম তৈরি করেছি যা একটি নীল পটভূমির রঙে এবং থেকে রূপান্তরিত হয়। এই পরিবর্তনগুলি ঘটে যখন ব্যবহারকারী তাদের কার্সারকে যথাক্রমে বোতামের উপর এবং দূরে ঘোরায়।

আমাদের কোডে, আমরা আমাদের ট্রানজিশনের জন্য চারটি ট্রানজিশন সাব-প্রোপার্টি (ট্রানজিশন-প্রপার্টি, ট্রানজিশন-ডিউরেশন, ট্রানজিশন-টাইমিং-ফাংশন এবং ট্রানজিশন-বিলম্ব) নির্দিষ্ট করেছি। আমাদের বোতামের উচ্চতা, প্রস্থ, পাঠ্য সারিবদ্ধকরণ এবং বর্ডার রঙ সেট করতে আমরা আমাদের আগের উদাহরণ থেকে শৈলীগুলিও ব্যবহার করেছি।

বিকল্পভাবে, আমরা ট্রানজিশন শর্টহ্যান্ড ব্যবহার করতে পারি। শর্টহ্যান্ড ব্যবহার করে আমরা আগে যে চারটি লাইন ব্যবহার করেছি তার পরিবর্তে কোডের একটি লাইনে আমাদের CSS রূপান্তর নির্দিষ্ট করতে দেয়। ট্রানজিশন শর্টহ্যান্ডের সিনট্যাক্স নিম্নরূপ:

ট্রানজিশন:ট্রানজিশন-প্রপার্টি ট্রানজিশন-কাল ট্রানজিশন-টাইমিং-ফাংশন ট্রানজিশন-বিলম্ব;

উপরে উল্লিখিত মানগুলির ক্রম হল একটি ট্রানজিশন তৈরি করার সময় আপনাকে যে ক্রমটি ব্যবহার করতে হবে।

রূপান্তর শর্টহ্যান্ড কীভাবে কাজ করে তা বোঝাতে একটি উদাহরণ ব্যবহার করা যাক। ট্রানজিশন শর্টহ্যান্ড ব্যবহার করে আগে থেকে আমাদের বোতাম তৈরি করতে আমরা যে কোডটি ব্যবহার করব তা এখানে:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s ease 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

আমাদের কোড ফিরে আসে:

[Code result here]


আপনি দেখতে পাচ্ছেন, আমরা আগের উদাহরণের মতো এখানে একই শৈলী প্রয়োগ করেছি। শুধুমাত্র পার্থক্য হল প্রতিটি পৃথক উপ-সম্পত্তিকে তার নিজস্ব লাইনে তালিকাভুক্ত করে আমাদের ট্রানজিশনের জন্য শৈলীগুলি নির্দিষ্ট করার পরিবর্তে, আমরা পরিবর্তে ট্রানজিশন শর্টহ্যান্ড ব্যবহার করি।

উপসংহার

CSS ট্রানজিশন প্রপার্টি ব্যবহার করা হয় স্টাইলগুলির মধ্যে ঘটবে এমন ট্রানজিশনের ধরণ নির্ধারণ করতে। ট্রানজিশন প্রপার্টির চারটি শর্টহ্যান্ড বৈশিষ্ট্য রয়েছে:ট্রানজিশন-প্রপার্টি, ট্রানজিশন-ডেলে, ট্রানজিশন-টাইমিং-ফাংশন এবং ট্রানজিশন-ডিউরেশন। আপনি পৃথকভাবে ট্রানজিশন শৈলীর উপাদানগুলি সেট করতে এই উপ-সম্পত্তিগুলি ব্যবহার করতে পারেন।

উদাহরণ সহ, এই টিউটোরিয়ালে আলোচনা করা হয়েছে কিভাবে ট্রানজিশন প্রপার্টি এবং এর চারটি সাবপ্রপার্টি ব্যবহার করে CSS-এ একটি ট্রানজিশন তৈরি করা যায়। এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো CSS ট্রানজিশন তৈরি করা শুরু করতে প্রস্তুত!