CodePen-এ পাওয়া কিছু জনপ্রিয় অ্যানিমেশন কীভাবে তৈরি করা হয়েছে তা এই পোস্টে খুঁজে দেখুন। এইসব অ্যানিমেশন এই বিভাগের অন্যান্য নিবন্ধে আলোচনা করা পারফর্ম্যান্ট টেকনিক ব্যবহার করে।
এইসব সাজেশনের পিছনে থাকা তত্ত্ব জানতে কিছু অ্যানিমেশন কেন স্লো হয়? দেখুন এবং ব্যবহারিক পরামর্শের জন্য অ্যানিমেশন গাইড দেখুন।
উইজার্ড লোড হওয়ার অ্যানিমেশন
CodePen-এ উইজার্ড লোডিং অ্যানিমেশন দেখুন
এই লোডিং অ্যানিমেশন সম্পূর্ণভাবে CSS দিয়ে তৈরি করা হয়েছে। ছবি এবং সমস্ত অ্যানিমেশন CSS এবং HTML-এ তৈরি করা হয়েছে, কোনও ছবি বা জাভাস্ক্রিপ্ট নেই। এটি কীভাবে তৈরি করা হয়েছে এবং কতটা ভাল পারফর্ম করে তা বুঝতে আপনি Chrome DevTools ব্যবহার করতে পারেন।
Chrome DevTools-এর সাহায্যে অ্যানিমেশন পরীক্ষা করা
অ্যানিমেশন চলাকালীন, Chrome DevTools-এ পারফর্ম্যান্স ট্যাব খুলুন এবং অ্যানিমেশনের কয়েক সেকেন্ড রেকর্ড করুন। আপনি সারাংশে দেখতে পাবেন যে এই অ্যানিমেশন চালানোর সময় ব্রাউজার কোনও লেআউট বা পেইন্ট অপারেশন করছে না।
লেআউট ও পেইন্ট না করেই কীভাবে এই অ্যানিমেশন তৈরি করা হয়েছে তা জানতে, Chrome DevTools-এ যেকোনও মুভিং এলিমেন্ট ইন্সপেক্ট করুন। আপনি অ্যানিমেশন প্যানেল ব্যবহার করে বিভিন্ন অ্যানিমেটেড এলিমেন্ট খুঁজে পেতে পারেন, যেকোনও এলিমেন্টে ক্লিক করলে সেটি DOM-এ হাইলাইট করা হবে।
যেমন, ত্রিভুজটি বেছে নিন, এবং দেখুন যে বাতাসে ঘোরার সময়, এলিমেন্টের বক্সটি কীভাবে পরিবর্তিত হয় এবং তারপর শুরুর পজিশনে ফিরে আসে।
এলিমেন্টটি বেছে নেওয়া অবস্থায় স্টাইল প্যানেলটি দেখুন। সেখানে আপনি CSS দেখতে পাবেন যা ত্রিভুজের আকার আঁকে, এবং অ্যানিমেশন ব্যবহার করা হচ্ছে।
এটি কীভাবে কাজ করে
জেনারেট করা কন্টেন্ট যোগ করতে ::after ছদ্ম-এলিমেন্ট ব্যবহার করে ত্রিভুজটি তৈরি করা হয়,
আকৃতি তৈরি করতে বর্ডার ব্যবহার করা হয়।
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
অ্যানিমেশনটি CSS-এর নিম্নলিখিত লাইনের সাথে যোগ করা হয়েছে,
animation: path_triangle 10s ease-in-out infinite;
Chrome DevTools-এ থেকে আপনি স্টাইল প্যানেল নিচের দিকে স্ক্রল করে কীফ্রেম খুঁজে পেতে পারেন।
সেখানে আপনি দেখতে পাবেন যে এলিমেন্টের পজিশন পরিবর্তন করতে এবং এটি ঘোরাতে transform ব্যবহার করে অ্যানিমেশন তৈরি করা হয়েছে।
transform প্রপার্টি হল অ্যানিমেশন গাইডে বর্ণনা করা প্রপার্টিগুলির মধ্যে একটি,
যা ব্রাউজারকে লেআউট বা পেইন্ট অপারেশন করতে বাধ্য করে না (যা অ্যানিমেশন স্লো হওয়ার প্রধান কারণ)।
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
এই অ্যানিমেশনের প্রতিটি আলাদা আলাদা চলমান অংশ একই ধরনের টেকনিক ব্যবহার করে। এর ফলে একটি জটিল অ্যানিমেশন তৈরি হয় যা মসৃণভাবে চলে।
পালসেটিং সার্কেল
CodePen-এ পালসেটিং সার্কেল দেখুন
এই ধরনের অ্যানিমেশন কখনও কখনও পৃষ্ঠার কোনও কিছুর প্রতি মনোযোগ আকর্ষণ করতে ব্যবহার করা হয়। অ্যানিমেশন বুঝতে আপনি Firefox DevTools ব্যবহার করতে পারেন।
Firefox DevTools-এর সাহায্যে অ্যানিমেশন পরীক্ষা করা
অ্যানিমেশন চলাকালীন, Firefox DevTools-এ পারফর্ম্যান্স ট্যাব খুলুন এবং কয়েক সেকেন্ডের জন্য অ্যানিমেশন রেকর্ড করুন। রেকর্ডিং বন্ধ করুন, ওয়াটারফলে আপনি দেখতে পাবেন যে স্টাইল আবার গণনা করুন-এর জন্য কোনও এন্ট্রি নেই। আপনি এখন জানেন যে এই অ্যানিমেশন স্টাইল রিক্যালকুলেশন ঘটায় না, এবং তাই লেআউট ও পেইন্ট অপারেশন।
Firefox DevTools-এ থেকে, এই অ্যানিমেশন কীভাবে কাজ করে তা দেখতে বৃত্তটি পরীক্ষা করুন।
pulsating-circle ক্লাস সহ <div> বৃত্তের পজিশন চিহ্নিত করে,
তবে এটি নিজে কোনও বৃত্ত আঁকে না।
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
::before এবং ::after ছদ্ম-এলিমেন্ট ব্যবহার করে দৃশ্যমান বৃত্ত এবং অ্যানিমেশন দেখানো হয়।
::before এলিমেন্টটি সাদা বৃত্তের বাইরে প্রসারিত অস্বচ্ছ রিং তৈরি করে,
pulse-ring নামক একটি অ্যানিমেশন ব্যবহার করে,
যা transform: scale এবং opacity অ্যানিমেট করে।
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
কোন কোন প্রপার্টি অ্যানিমেট করা হচ্ছে তা দেখার আরেকটি উপায় হল Firefox DevTools-এ অ্যানিমেশন প্যানেল বেছে নেওয়া। তারপর আপনি ব্যবহৃত অ্যানিমেশনের ভিজ্যুয়ালাইজেশন দেখতে পাবেন, এবং অ্যানিমেট করা হচ্ছে এমন প্রপার্টি।
সাদা বৃত্তটি নিজেই ::after ছদ্ম-এলিমেন্ট ব্যবহার করে তৈরি এবং অ্যানিমেট করা হয়েছে।
অ্যানিমেশন চলাকালীন ডট বড় ও ছোট করতে pulse-dot অ্যানিমেশন transform: scale ব্যবহার করে।
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
এই ধরনের অ্যানিমেশন আপনার অ্যাপ্লিকেশনের বিভিন্ন জায়গায় ব্যবহার করা যেতে পারে, এইসব ছোটখাটো বিষয় যাতে আপনার অ্যাপের সামগ্রিক পারফর্ম্যান্সের উপর প্রভাব না ফেলে তা গুরুত্বপূর্ণ।
Pure CSS 3D স্ফিয়ার
CodePen-এ Pure CSS 3D Sphere দেখুন
এই অ্যানিমেশনটি অবিশ্বাস্যভাবে জটিল বলে মনে হচ্ছে, তবে এটি এমন কৌশল ব্যবহার করে যা আমরা আগের উদাহরণগুলিতে ইতিমধ্যে দেখেছি। অনেকগুলি এলিমেন্ট অ্যানিমেট করার সময় জটিলতা দেখা দেয়।
Chrome DevTools খুলুন এবং plane ক্লাস সহ এলিমেন্টগুলির মধ্যে একটি বেছে নিন।
গোলকটি এক সেট ঘূর্ণায়মান প্লেন এবং স্পোক দিয়ে তৈরি।
এই প্লেন ও স্পোকগুলি একটি র্যাপার <div>-এর ভিতরে থাকে,
এবং এই এলিমেন্টটিই transform: rotate3d ব্যবহার করে ঘুরছে।
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
ডটগুলি plane এবং spoke এলিমেন্টের মধ্যে নেস্ট করা থাকে,
সেগুলি একটি অ্যানিমেশন ব্যবহার করে যা তাদের স্কেল এবং অনুবাদ করতে ট্রান্সফর্ম ব্যবহার করে।
এর ফলে পালসিং এফেক্ট তৈরি হয়।
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
এই অ্যানিমেশন তৈরি করার জন্য সঠিক টাইমিং, টার্নিং ও পালসিং এফেক্ট তৈরি করতে হয়েছে। অ্যানিমেশনগুলি খুব সহজ এবং এমন পদ্ধতি ব্যবহার করে যা খুব ভালো পারফর্ম করে।
Chrome DevTools খুলে এবং এটি চলাকালীন পারফর্ম্যান্স রেকর্ড করে আপনি দেখতে পারবেন যে এই অ্যানিমেশনটি কীভাবে পারফর্ম করে। প্রাথমিক লোডের পরে, অ্যানিমেশন লেআউট বা পেইন্ট ট্রিগার করছে না, এবং মসৃণভাবে চলে।
উপসংহার
এইসব উদাহরণ থেকে আপনি দেখতে পাবেন যে পারফর্ম্যান্ট পদ্ধতি ব্যবহার করে কয়েকটি প্রপার্টি অ্যানিমেট করার মাধ্যমে কীভাবে কিছু খুব ভালো অ্যানিমেশন তৈরি করা যায়। অ্যানিমেশন গাইডে বর্ণিত পারফর্ম্যান্ট পদ্ধতি ডিফল্ট হিসেবে ব্যবহার করে আপনি পৃষ্ঠা স্লো হয়ে যাওয়ার ব্যাপারে কম চিন্তা করে আপনার পছন্দের এফেক্ট তৈরি করতে সময় ব্যয় করতে পারেন।