CSS কিউবিক-বেজিয়ার জেনারেটর

CSS কিউবিক-বেজিয়ার জেনারেটর কী?

CSS কিউবিক-বেজিয়ার জেনারেটর হল CSS ট্রানজিশন ও অ্যানিমেশনে ব্যবহৃত cubic-bezier() টাইমিং ফাংশনের একটি বিনামূল্যের ভিজ্যুয়াল এডিটর, যা ফ্রন্ট-এন্ড ডেভেলপার ও মোশন ডিজাইনারদের জন্য তৈরি। ease, linear, ease-in, ease-out বা ease-in-out-এর মতো একটি প্রিসেট বেছে নিন, কিংবা দুটি নিয়ন্ত্রণ বিন্দু নিজে সূক্ষ্মভাবে সমন্বয় করুন: x মানগুলো বৈধ 0–1 পরিসরে সীমাবদ্ধ থাকে, আর y মানগুলো ওভারশুট ও অ্যান্টিসিপেশন তৈরি করতে 1-এর উপরে বা 0-এর নিচে যেতে পারে। প্রিভিউ একটি একক বর্গক্ষেত্রে কার্ভটি আঁকে যাতে আপনি এক নজরে ত্বরণ ও মন্দন বুঝতে পারেন, এবং কপি করার জন্য সঠিক cubic-bezier(x1, y1, x2, y2) ঘোষণা তৈরি হয়। যখনই কোনো অন্তর্নির্মিত কীওয়ার্ড খুব সাধারণ মনে হয় এবং আপনি আরও ঝরঝরে, স্থিতিস্থাপক বা আরও পরিমিত গতি চান, তখনই এটি ব্যবহার করুন।

CSS কিউবিক-বেজিয়ার জেনারেটর কীভাবে ব্যবহার করবেন

1. সেটিংস খুলুন এবং নিয়ন্ত্রণ বিন্দু নির্ধারণের জন্য একটি শুরুর প্রিসেট বেছে নিন — ease, linear, ease-in, ease-out বা ease-in-out।
2. ইজিং পুনরায় গড়তে কার্ভ প্রিভিউয়ের উপর দুটি গোলাকার হ্যান্ডেল টেনে নিন, অথবা x1, y1, x2 এবং y2 ফিল্ডে সঠিক মান টাইপ করুন।
3. x1 এবং x2 0 ও 1-এর মধ্যে রাখুন; গতিতে ওভারশুট বা অ্যান্টিসিপেশন যোগ করতে y1 বা y2-কে 1-এর উপরে বা 0-এর নিচে ঠেলুন।
4. ইজিং কীভাবে ত্বরান্বিত ও মন্থর হয় তা বিচার করতে বিন্দুযুক্ত রৈখিক ভিত্তিরেখার সাপেক্ষে কার্ভটি পড়ুন।
5. তৈরি হওয়া cubic-bezier() মান কপি করে আপনার transition-timing-function বা animation-timing-function-এ পেস্ট করুন।

উদাহরণ

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

সচরাচর জিজ্ঞাসিত প্রশ্ন

cubic-bezier-এর চারটি সংখ্যার অর্থ কী?

এগুলো দুটি নিয়ন্ত্রণ বিন্দুর স্থানাঙ্ক: প্রথম বিন্দুর জন্য x1, y1 এবং দ্বিতীয়টির জন্য x2, y2। কার্ভ সবসময় (0,0)-তে শুরু হয় এবং (1,1)-তে শেষ হয়; নিয়ন্ত্রণ বিন্দুগুলো এর মাঝখানটা বাঁকায়, যা নিয়ন্ত্রণ করে অ্যানিমেটেড প্রপার্টি সময়ের সাথে কীভাবে দ্রুত ও ধীর হয়।

কেন আমি x1 বা x2 1-এর উপরে সেট করতে পারি না?

CSS স্পেসিফিকেশন অনুযায়ী উভয় নিয়ন্ত্রণ বিন্দুর x (সময়) স্থানাঙ্ক 0 ও 1-এর মধ্যে থাকতে হবে, যাতে টাইমিং ফাংশন অগ্রগতি থেকে আউটপুটে একটি বৈধ ম্যাপিং থাকে। এই টুলটি x ফিল্ড ও ড্র্যাগ হ্যান্ডেলকে স্বয়ংক্রিয়ভাবে সেই পরিসরে সীমাবদ্ধ করে। তবে y মানগুলো ওভারশুট বা অ্যান্টিসিপেশন তৈরি করতে 1-এর বেশি বা 0-এর কম হতে পারে।

আমি কীভাবে লাফানো বা স্থিতিস্থাপক ইজিং তৈরি করব?

y মানগুলোর একটিকে 1-এর উপরে (শেষে ওভারশুটের জন্য) বা 0-এর নিচে (শুরুতে অ্যান্টিসিপেশনের জন্য) ঠেলুন। উদাহরণস্বরূপ cubic-bezier(0.34, 1.56, 0.64, 1) স্থির হওয়ার আগে সীমা ছাড়িয়ে যায়, কোনো JavaScript ছাড়াই স্প্রিং-এর মতো অনুভূতি দেয়।

তৈরি হওয়া মান আমি কোথায় ব্যবহার করব?

এটি transition-timing-function বা animation-timing-function-এর মান হিসেবে পেস্ট করুন — যেমন transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। এটি ease বা ease-in-out-এর মতো কীওয়ার্ডকে আপনার কাস্টম কার্ভ দিয়ে প্রতিস্থাপন করে।

আমার ডেটা কি কোনো সার্ভারে পাঠানো হয়?

না। পুরো এডিটরটি JavaScript দিয়ে আপনার ব্রাউজারে চলে — নিয়ন্ত্রণ বিন্দু ও কার্ভ স্থানীয়ভাবে গণনা করা হয় এবং কখনও আপলোড হয় না, তাই এটি ব্যক্তিগতভাবে এবং পৃষ্ঠা একবার লোড হওয়ার পর অফলাইনেও কাজ করে।