একটি ওয়েব পৃষ্ঠায় অ্যানিমেশনগুলি আরও বেশি ব্যবহারকারীকে আকর্ষণ করতে পারে। নিজেকে এটিকে জিজ্ঞাসা করুন - আপনি যদি এমন কোনও ওয়েব পৃষ্ঠা দেখতে চান যা বেশ কিছুটা অ্যানিমেশন থাকে তবে আপনি কি আরও অনুসন্ধান করতে চান না? এখন, সিএসএস রূপান্তরগুলির সাহায্যে আপনি দুর্দান্ত কিছু অ্যানিমেশন সহ আপনার কাজকে জীবিত করে তুলতে পারেন। এবং, মনে রাখবেন, এগুলি সঠিকভাবে করা দরকার। আসুন নিম্নলিখিত ক্রমে সিএসএস ট্রানজিশনের জগতটি আবিষ্কার করুন:
- সিএসএস ট্রানজিশন কেন?
- স্থানান্তর সম্পত্তি
- আপনার কী উল্লেখ করতে হবে?
- স্থানান্তর-সময়-ফাংশন ফাংশন সম্পত্তি
- স্থানান্তর-বিলম্ব সম্পত্তি
সিএসএস ট্রানজিশন কেন?
আসুন একটি উদাহরণ নেওয়া যাক। আপনি যদি কোনও উপাদানটির রং সাদা থেকে নীল করে পরিবর্তন করতে চান তবে এই পরিবর্তনটি প্রায় তাত্ক্ষণিক। আরও অ্যানিমেটেড প্রভাবের জন্য, আপনি এই পরিবর্তনটি ধীরে ধীরে ঘটতে পারেন। এটি দেখতে বেশ দৃষ্টিকটুভাবে আবেদনময়ী। সিএসএস রূপান্তর সক্ষম করে, আপনি যেভাবে পরিবর্তনগুলি ঘটে তা কাস্টমাইজ করতে পারেন। একটি নির্দিষ্টকরণের বিরতিতে তীব্র বক্ররেখা অনুসরণ করে কীভাবে উপাদানগুলির পরিবর্তন ঘটে তা আপনি নির্ধারণ করতে পারেন।
সিএসএস রূপান্তর আপনাকে এর জন্য পরিবর্তনগুলি সংজ্ঞায়িত করতে দেয় উপাদানগুলি, নির্দিষ্ট সময়ের বিরতি, ত্বরণ বক্রের গতি এবং আরও অনেক কিছু। আপনি ফ্ল্যাশ বা ব্যবহার না করেই এই সব করতে পারেন জাভাস্ক্রিপ্ট ।
আরও ভাল বোঝার জন্য, আপনি নীচের চিত্রটি উল্লেখ করতে পারেন:
জাভাতে কোন প্রোগ্রাম থেকে কীভাবে প্রস্থান করবেন
উপরের চিত্রটিতে, এইচটিএমএল উপাদানটি এক সেকেন্ডের ক্ষেত্রে লাল থেকে নীল হয়ে যাবে। স্থানান্তরিত হওয়ার সময় আপনি মাঝারি রঙটিও দেখতে পাবেন। আপনি যদি সিএসএস ট্রানজিশন ব্যবহার না করে থাকেন তবে লক্ষ্য করবেন যে লাল থেকে নীল রঙে রঙের পরিবর্তন তাত্ক্ষণিক - আপনি মধ্যবর্তী রঙটি দেখতে পাবেন না। সিএসএস রূপান্তরগুলির সাথে, আপনি যখন HTML উপাদানগুলি পুরানো অবস্থা থেকে নতুনকে পরিবর্তন করে চলেছেন তখন আপনি একটি অ্যানিমেটেড প্রভাব লক্ষ্য করবেন।
স্থানান্তর সম্পত্তি
আপনি সিএসএস রূপান্তরগুলি নিয়ন্ত্রণ করতে শর্টহ্যান্ড রূপান্তর সম্পত্তিটি ব্যবহার করতে পারেন। এই শর্টহ্যান্ডের ব্যবহার কেবল সহজ নয়, এটি সিএসএস-এ ডিবাগ করার জন্য হতাশার বাইরে থাকা-সিঙ্ক প্যারামিটারগুলিও এড়াতে পারে।
রূপান্তর-সম্পত্তি সিএসএসের বৈশিষ্ট্যগুলিকে নির্দিষ্ট করে যেখানে আপনি রূপান্তর প্রভাবটি চান। কেবলমাত্র এই সিএসএস বৈশিষ্ট্যগুলি অ্যানিমেটেড।
বাক্য গঠন:
রূপান্তর:
শিক্ষানবিস হিসাবে, আপনি শর্টহ্যান্ড ব্যবহার করতে কিছু অসুবিধার মুখোমুখি হতে পারেন। আপনি যদি মনে করেন যে এই মুহূর্তে শর্টহ্যান্ড ব্যবহার করা আপনার পক্ষে কিছুটা জটিল, তবে আপনি আলাদাভাবে স্থানান্তর বৈশিষ্ট্য নির্দিষ্ট করতে পারবেন। এইচটিএমএল উপাদানের জন্য, আপনি নীচের উদাহরণে যেমন দেখানো হয়েছে তেমন একের পর এক স্থানান্তর বৈশিষ্ট্য নির্দিষ্ট করতে পারেন:
Div {প্রস্থ: 100px উচ্চতা: 100px ব্যাকগ্রাউন্ড: লাইটব্লিউ ট্রানজিশন-সম্পত্তি: প্রস্থ স্থানান্তর-সময়কাল: 2 স ট্রানজিশন-সময়-ফাংশন: রৈখিক রূপান্তর-বিলম্ব: 1s} ডিভ: হোভার h প্রস্থ: 300px}বাক্সের উপরে ঘোরা
উপরের উদাহরণে আমরা বৈশিষ্ট্যগুলি (রূপান্তর-সম্পত্তি, রূপান্তর-সময়কাল, রূপান্তর-সময়-কার্যকারিতা এবং রূপান্তর-বিলম্ব) এবং তাদের মানগুলি পৃথকভাবে নির্দিষ্ট করেছি। আমরা শীঘ্রই এই রূপান্তর বৈশিষ্ট্যগুলি সম্পর্কে শিখব।
আপনার কী উল্লেখ করতে হবে?
সিএসএস ট্রানজিশনগুলি তৈরি করার জন্য আপনাকে দুটি প্রাথমিকভাবে উল্লেখ করতে হবে: সিএসএস সম্পত্তি যা একটি প্রভাব যুক্ত করতে চায় এবং সেই প্রভাবের সময়কাল।আপনার একটি বিষয় মাথায় রাখতে হবে - আপনি যখন সময়কাল নির্দিষ্ট করবেন না, তখন রূপান্তরটির একটি ডিফল্ট মান নেবে 0 , এবং কোন প্রভাব হবে না।
আসুন একটি উদাহরণ বিবেচনা করুন:
নীচের কোডটি পাঁচ সেকেন্ডের সময়কালের জন্য প্রস্থের সম্পত্তির একটি স্থানান্তর প্রভাবকে সংজ্ঞায়িত করে।
Div {প্রস্থ: 100px উচ্চতা: 100px ব্যাকগ্রাউন্ড: নীল রূপান্তর: প্রস্থ 5 এস} বিভাগ: হোভার {প্রস্থ: 600px}স্থানান্তর প্রভাব দেখতে উপরের ডিভ উপাদানটির উপর কার্সারটি সরান।
উপরের কোডটিতে আপনি দেখতে পাবেন যে আপনি যখন নীল বাক্সের উপর দিয়ে আপনার কার্সারটি ঘুরিয়ে নেবেন তখন নীল বাক্সটি এর ধাপটি ধীরে ধীরে পাঁচ সেকেন্ডের জন্য বাড়িয়ে দেয়। আপনি আরও লক্ষ্য করবেন যে আপনি যখন নীল বাক্স থেকে কার্সারটি সরিয়ে ফেলবেন তখন নীল বাক্সটি ধীরে ধীরে (তাত্ক্ষণিকভাবে নয়) তার মূল আকারে ফিরে আসবে। এই রূপান্তর সম্পত্তি কীভাবে এইচটিএমএল উপাদানকে প্রভাবিত করে তা দেখতে আপনি প্রস্থ এবং সময়ের সময়কালের মানগুলিও পরিবর্তন করতে পারেন।
আপনি একাধিক সম্পত্তিতে রূপান্তর প্রভাব যুক্ত করতে পারেন। আপনি বৈশিষ্ট্য পৃথক করতে কমা ব্যবহার করে এটি করতে পারেন। আসুন একটি উদাহরণ বিবেচনা করুন:
নীচের কোডে, রূপান্তর সম্পত্তি প্রস্থ, উচ্চতা এবং রূপান্তরকরণের জন্য নির্দিষ্ট করা হয়েছে।
Div {প্যাডিং: 15px প্রস্থ: 150px উচ্চতা: 100 px পটভূমি: সবুজ স্থানান্তর: প্রস্থ 2s, উচ্চতা 2s, রূপান্তর 2s} বিভাগ: হোভার {প্রস্থ: 300px উচ্চতা: 200px রূপান্তর: ঘোরান (360deg)} ওহে বিশ্ব (আমার উপর ঘোরা)
জাভা উদাহরণ এলোমেলো ক্লাস
উপরের উদাহরণ সহ, আপনি দেখতে পাবেন যে আপনি যখন বাক্সের উপরে ঘুরে বেড়াচ্ছেন তখন কীভাবে সবুজ বাক্সটি স্থানান্তরিত হয়।
আমরা কেবল সম্পত্তি এবং সময়কাল নির্দিষ্ট করেছি। আসুন বিভিন্ন উদাহরণ সহ অন্যান্য পরামিতিগুলি দেখুন।
স্থানান্তর-সময়-ফাংশন ফাংশন সম্পত্তি
এই সম্পত্তিটি স্থানান্তর প্রভাবের জন্য গতির বক্ররেখাকে সংজ্ঞায়িত করে। এটি নিম্নলিখিত মানগুলি নিতে পারে:
- ইজ মান: এটি ডিফল্ট মান যেখানে প্রভাব শুরুতে ধীর, তারপরে দ্রুত এবং ধীরে ধীরে শেষ হয়।
- লিনিয়ার মান: এই প্রভাবটি সংক্রমণের গতিতে পৃথক হয় না - এটি শুরু থেকে শেষ পর্যন্ত গতিটিকে সামঞ্জস্য রাখে।
- ইজ-ইন মান: এই প্রভাবটি ধীরে ধীরে শুরু হয়।
- ইজ-আউট মান: এই প্রভাব একটি ধীর শেষ আছে।
- ইজ-ইন-আউট মান: এই প্রভাবটির একটি ধীর শুরু পাশাপাশি ধীর প্রান্ত রয়েছে।
- কিউবিক-বেজিয়ার মান (এন, এন, এন, এন): আপনি কিউবিক-বেজিয়ার ফাংশনে আপনার নিজস্ব মানগুলির সেট নির্দিষ্ট করতে পারেন।
নীচের কোডটি রৈখিক, স্বাচ্ছন্দ্য, স্বাচ্ছন্দ্য, স্বাচ্ছন্দ্য এবং সহজে আউট-আউট মানগুলির জন্য রূপান্তর প্রভাবগুলি দেখায়।
Div {প্রস্থ: 100px উচ্চতা: 100px পটভূমি: গোলাপী রূপান্তর: প্রস্থ 2s} # div1 {রূপান্তর-সময়-ফাংশন: রৈখিক} # ডিভি 2 {রূপান্তর-সময়-ফাংশন: স্বাচ্ছন্দ্য} # div3 {রূপান্তর-সময়-ফাংশন: স্বাচ্ছন্দ্য } # ডিভ 4 {ট্রানজিশন-টাইমিং-ফাংশন: ইজি-আউট} # ডিভ 5 {ট্রানজিশন-টাইমিং-ফাংশন: ইজি-ইন-আউট} ডিভিও: হোভার {প্রস্থ: 300px}নীচের ডিভ উপাদানগুলির উপর ঘোরা
রৈখিক
স্বাচ্ছন্দ্য
স্বাচ্ছন্দ্য
স্বাচ্ছন্দ্য
আরাম-ইন-আউট
স্থানান্তর-বিলম্ব সম্পত্তি
কখনও কখনও, আপনি একটি নির্দিষ্ট সময়কাল পরে অ্যানিমেশন ঘটতে চান। রূপান্তর-বিলম্ব সম্পত্তি আপনাকে একটি রূপান্তর প্রভাবের জন্য বিলম্ব নির্দিষ্ট করতে দেয়। আপনি সেকেন্ডের মধ্যে বিলম্ব নির্দিষ্ট করতে পারেন।
আসুন রূপান্তরের প্রভাবের বিলম্বটি দেখতে একটি উদাহরণ নিই:
Div {প্রস্থ: 100px উচ্চতা: 100px ব্যাকগ্রাউন্ড: হলুদ স্থানান্তর: প্রস্থ 3s রূপান্তর-বিলম্ব: 1 সে: ডিভ: হোভার {প্রস্থ: 300px}নীচের ডিভ উপাদানটির উপর ঘোরা
বিঃদ্রঃ: আপনি প্রভাব শুরু হওয়ার আগে 1 সেকেন্ড বিলম্ব পর্যবেক্ষণ করতে পারেন
উপরের কোডটিতে, আপনি যখন আপনার কার্সর দিয়ে হলুদ বাক্সের উপরে ঘুরে দেখবেন, আপনি লক্ষ্য করবেন (এক সেকেন্ডের জন্য) যে কোনও প্রভাব নেই। এক সেকেন্ড অপেক্ষা করার পরে, আপনি এর প্রভাবটি লক্ষ্য করবেন।
প্রসারিত এবং প্রয়োগের মধ্যে পার্থক্য
এটির সাথে আমরা এই সিএসএস ট্রানজিশন নিবন্ধটি শেষ করি। আপনি এখন আপনার ওয়েবপৃষ্ঠায় অ্যানিমেশন যুক্ত করতে পারেন। এই উদাহরণগুলি চেষ্টা করে দেখুন।
আমাদের দেখুন যা প্রশিক্ষকের নেতৃত্বাধীন লাইভ প্রশিক্ষণ এবং বাস্তব জীবনের প্রকল্পের অভিজ্ঞতার সাথে আসে। এই প্রশিক্ষণটি আপনাকে ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড ওয়েব প্রযুক্তিগুলির সাথে কাজ করার দক্ষতায় দক্ষ করে তোলে। এটিতে ওয়েব ডেভলপমেন্ট, জিক্যুয়ারি, অ্যাঙ্গুলার, নোডজেএস, এক্সপ্রেসজেএস এবং মঙ্গোডিবি প্রশিক্ষণ অন্তর্ভুক্ত রয়েছে।
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'সিএসএস ট্রানজিশন' ব্লগের মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।