মূল পৃষ্ঠা / শিক্ষা / ডিজিটেল সাক্ষৰতা / কম্পিউটাৰ / HTML5 আৰু CSSৰ মাধ্যমেৰে এনিমেচন
অংশিদাৰী
Views
  • স্থিতি: সম্পাদনাৰ বাবে মুকলি

HTML5 আৰু CSSৰ মাধ্যমেৰে এনিমেচন

HTML5 আৰু CSSৰ মাধ্যমেৰে এনিমেচন

ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ৯ত আৰম্ভ কৰা হৈছে চি এছ এছৰ দ্বিবিমীয় ট্ৰেন্সফৰ্মৰ সমৰ্থন। ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ১০ৰ ডেভেলপাৰসকলে সংযোগ কৰিছে চি এছ এছৰ ত্ৰিবিমীয় ট্ৰেন্সফৰ্ম আৰু চি এছ এছ এনিমেছন। আমি আৰম্ভ কৰিছো ‘সম্পূৰ্ণ-পৃষ্ঠাৰ-এনিমেচন’ৰ ধাৰণা, যি নেভিগেচন প্ৰক্ৰিয়াৰ সময়ত তৰলতা আৰু ব্ৰাউজিঙৰ নিৰন্তৰতা ৰক্ষাৰ ক্ষেত্ৰত ব্যৱহাৰ কৰিব পৰা যায়।

চি এছ এছ এনিমেচন ব্যৱহাৰ কৰি এইচ টি এম এলৰ <body>ৰ উপাদানসমূহ ট্ৰেন্সফৰ্ম কৰি এই এফেক্ট লাভ কৰিব পাৰি। অৱশ্যে এই ব্যৱহাৰত কিছুমান বিবেচনাৰ প্ৰয়োজন, যিবোৰ আলোচনাৰ মাজলৈ অহাটো উচিত বুলি আমি ধাৰণা কৰো, যেনে— <body> ট্ৰেন্সফৰ্মিং কৰাৰ সময়ত লেআউট আৰু আকৃতিৰ এফেক্ট আৰু প্ৰকৃত পেজ নেভিগেচনৰ সময়; যাতে আমাৰ এনিমেচনৰ সৈতে সুন্দৰকৈ মিলি পৰে।

CSS ট্ৰেন্সফৰ্মবোৰক সংজ্ঞাৱব্ধ কৰা হয় এইচ টি এম এল ডি অ’ এম ইলিমেণ্টৰ ষ্টাইলিষ্টিক এককৰূপে।

body {
transform: rotateZ(45deg);
}

Animation

ত্ৰিবিমীয় ট্ৰেন্সফৰ্মেচনৰ বাবে চি এছ এছ ট্ৰেন্সফৰ্মেচন নিৰ্দেশনাই ব্যাখ্যা কৰে পাৰ্ছপেকটিভ প্ৰপাৰ্টি যিবোৰ ট্ৰেন্সফৰ্ম হ’বলগীয়া উপাদানক নিৰ্দেশ কৰে। যেতিয়া <body>ৰ উপাদানসমূহ ট্ৰেন্সফৰ্ম কৰা হয়, এয়া <html>উপাদানতো প্ৰয়োগ কৰিবলগীয়া হয় যিবোৰ ডি অ’ এম হায়াৰআৰ্কিৰ ওপৰত থাকে।

html {

perspective: 500px;
}

ইয়াক এক rotateY(45deg) ট্ৰেন্সফৰ্মৰ সৈতে <body>ত ইলিমেণ্ট সংযুক্ত কৰিলে হ’ব

Animation

body {
transform-origin: 50% 100%;
transform: rotateX(45deg);
}

Animation

 

এক অফ-এক্সিছ এফেক্টৰ প্ৰক্ষেপন লাভ কৰিবলৈ আমি তথ্যৰ মূল উপাদানত থকা পাৰ্ছপেক্টিভ অৰিজিন প্ৰপাৰ্টি সলনি কৰিব পাৰো।

html {
perspective: 500px;
perspective-origin: 90% 50%;
}

 

Animation

চি এছ এছ ট্ৰেন্সফৰ্ম ব্যৱহাৰ কৰি, আমি অতি সহজতে পৰিলক্ষিত হোৱা ৰূপ সলনি কৰিবলৈ সক্ষম হওঁ পৃষ্ঠাৰ সকলো উপাদান। যিহেতু সাধাৰণ লেআউট আৰু আকাৰৰ নীতি এতিয়াও অপৰিৱৰ্তিত হৈ আছে, body উপাদানৰ বিভিন্ন অন্তৰ্ভুক্তিয়ে বিভিন্ন এফেক্ট দেখুৱাব পাৰে।

 

Animation


চি এছ এছ এনিমেচন সমগ্ৰ ৱেব অন্তৰ্ভুক্তিত প্ৰভাৱ পেলোৱাকৈ ব্ৱহাৰ কৰিব পাৰি, এই পৃষ্ঠা প্ৰস্তুতিৰ বাবে বহু স্থিতিস্থাপকতাও ব্যৱহাৰ কৰিব পাৰি।

@keyframes rotateInLeft {
from {
transform-origin: 0% 0%;
transform: rotateY(180deg);
}
to {
transform-origin: 0% 0%;
transform: rotateY(0deg);
}
}

 

Animation

@keyframes whirlOut {
to {
transform: scale(0) rotateZ(1260deg);
}
}

 

Animation

বডী উপাদানত এনিমেচন সংযুক্তকৰণত প্ৰথম সজ্ঞাত স্থান হ’ব অনলোড জাভাস্ক্ৰিপ্টৰ কাৰ্য। এই কাৰ্যই প্ৰকৃততে নিৰ্দেশ কৰে পৃষ্ঠাৰ সম্পূৰ্ণ অন্তৰ্ভুক্তি ছবিসহ কেতিয়া লোডিং সম্পূৰ্ণ হয়। এক অনলোড বেণ্ডউইড-সাপেক্ষ পৃষ্ঠাত এনিমেচনৰ অন্তৰ্ভুক্তিৰ ফলাফল হিচাপে অন্তৰ্ভুক্তি সাধাৰণৰূপত পৰিলক্ষিত হ’ব। বিকল্পভাৱে আমি ডিঅ’এম-কনটেণ্ট-লোডেড কাৰ্যৰ ব্যৱহাৰ কৰিব লাগিব, যেতিয়া ব্ৰাউজাৰে ডি অ’ এম গাঁথনি সমাপ্ত কৰে। ইণ্টাৰনেট এক্সপ্ল’ৰাৰ টেষ্ট ড্ৰাইভৰ সময়ত ডিঅ’এম-কনটেণ্ট-লোডেডৰ ডেম’ৱে দেখুৱাইছিল এই উভয় কাৰ্যৰ অন্তৰাল। অৱশ্যে কঠিন ৱেব কণ্টেণ্টৰ ক্ষেত্ৰত, এক আধুনিক ব্ৰাউজাৰ উন্নয়নমুখী ৰেণ্ডাৰিঙৰ বাবে নিৰ্বাচন কৰিব পাৰি, ডি অ’ এম ট্ৰী লোড হোৱাৰ আগেয়েই পৃষ্ঠা পৰিলক্ষিত হ’ব পাৰে। এই ক্ষেত্ৰত দৃষ্টিগোচৰ হোৱা পৃষ্ঠা আৰু লোড হোৱা পৰিৱেশ একেই।

কোনো এনিমেচন নাইবা ট্ৰেনজিচন স্থাপন কৰাৰ বাবে উপযুক্ত স্থান হৈছে <body> উপাদানৰ ভিতৰত। ইয়াৰ ফলত পৃষ্ঠা ৰেণ্ডাৰিং হোৱাৰ মুহূৰ্ততে এনিমেচনৰ কামো আৰম্ভ হৈ যাব। এক পাৰ্শ্ব প্ৰতিক্ৰিয়া হিচাপে এই সুন্দৰ এনিমেশ্বনে অন্য প্ৰগ্ৰেছিভ ৰেণ্ডাৰিঙক ঢাকি ধৰিব পাৰে, যাৰ বাবে প্ৰয়োজন হ’ব কঠিন অন্তৰ্ভুক্তিৰ ক্ষেত্ৰত পুনৰ লে আউট।

উৎস: ভাষা ইণ্ডিয়া

3.05555555556
আপোনাৰ পৰামৰ্শ প্ৰদান কৰক

(এই লিখনি সম্পৰ্কে যদি আপোনাৰ কোনো মতামত নাইবা পৰামৰ্শ আছে তেন্তে ইয়াত প্ৰদান কৰক।)

Enter the word
দিক্‌ নিৰ্ণায়ক
Back to top