কন্টেন্ট
- 01. এইচটিএমএল ডকুমেন্ট শুরু করুন
- 02. দৃশ্যমান এইচটিএমএল সামগ্রী
- 03. সিএসএস দীক্ষা
- 04. অ্যানিমেশন ধারক
- 05. অ্যানিমেশন দীক্ষা
- 06. ভিউ মধ্যে অ্যানিমেট
- 07. অ্যানিমেশন চূড়ান্ত করা
কানাডার জ্যাম 3 দ্বারা হারিয়ে যাওয়া লাভ একটি হার্ট প্রেমের চারপাশে স্থায়ী অনুভূতি সম্পর্কে সত্যই হৃদয় সহ একটি সুন্দর অন্ধকার, মোবাইল-প্রস্তুত ইন্টারেক্টিভ কবিতা। ওয়েবসাইট লেআউটটি HTML5 ব্যবহার করে জিএসএপি লাইব্রেরিটির অ্যানিমেশনটিকে শক্তিশালী করে তৈরি করা হয়েছিল, এর সর্বাধিক দৃষ্টি আকর্ষণীয় বৈশিষ্ট্যগুলির মধ্যে একটি এটির অ্যানিমেটেড 3 ডি পাঠ্য যা সত্যিই লাভ লস্টের কবিতাকে প্রাণবন্ত করে তোলে।
- ইন্টারেক্টিভ 3 ডি টাইপোগ্রাফি প্রভাব তৈরি করুন
এটি জাহান্নামের মতো চিত্তাকর্ষক বলে মনে হচ্ছে, এবং একটি আকর্ষণীয় ব্যবহারকারীর অভিজ্ঞতা তৈরি করার জন্য আপনার নিজের কাজে যুক্ত করা কঠিন নয়; এটি কিভাবে সম্পন্ন হয়েছে তা এখানে।
আপনার নিজের আকর্ষক সাইট তৈরি করতে চান? একটি ওয়েবসাইট নির্মাতা সরঞ্জাম ব্যবহার করে দেখুন এবং সঠিক ওয়েব হোস্টিং পরিষেবাটি বেছে নিয়ে জিনিসগুলি সুচারুভাবে চালিয়ে যান।
01. এইচটিএমএল ডকুমেন্ট শুরু করুন
প্রথম পদক্ষেপটি এইচটিএমএল নথির কাঠামো সংজ্ঞায়িত করা। এর মধ্যে এইচটিএমএল ধারক অন্তর্ভুক্ত রয়েছে যা দস্তাবেজটি সূচনা করে, এতে মাথা এবং দেহের বিভাগ রয়েছে। প্রধান বিভাগটি প্রাথমিকভাবে বাহ্যিক সিএসএস ফাইল লোড করার জন্য ব্যবহৃত হয়, বডি বিভাগটি দ্বিতীয় ধাপে তৈরি দৃশ্যমান পৃষ্ঠার সামগ্রী সংরক্ষণ করবে।
! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শিরোনাম> 3 ডি পাঠ্য আন্দোলন / শিরোনাম> লিঙ্ক rel = "স্টাইলশীট" প্রকার = "পাঠ্য / সিএসএস" href = "শৈলী। CSS" /> / প্রধান> বডি> * * * পদক্ষেপ 2 এখানে / বডি </ html>
02. দৃশ্যমান এইচটিএমএল সামগ্রী
দৃশ্যমান এইচটিএমএল সামগ্রীটিতে একটি নিবন্ধ ধারক থাকে যা দৃশ্যমান পাঠ্য ধারণ করে। নিবন্ধ ধারকের গুরুত্বপূর্ণ অংশটি হ'ল 'ডেটা-অ্যানিমেট' বৈশিষ্ট্য, যা ভিজ্যুয়াল এফেক্ট প্রয়োগ করার জন্য সিএসএস দ্বারা উল্লেখ করা হবে। পৃষ্ঠার মূল শিরোনামটি বোঝাতে নিবন্ধের অভ্যন্তরের পাঠ্যটি এইচ 1 ট্যাগ থেকে তৈরি করা হয়েছে।
নিবন্ধ ডেটা-অ্যানিমেট = "সরান"> এইচ 1> হ্যালো ওহে! </ h1> / নিবন্ধ>
03. সিএসএস দীক্ষা
‘স্টাইলস.কম’ নামে একটি নতুন ফাইল তৈরি করুন। নির্দেশাবলীর প্রথম সেটটি পৃষ্ঠার এইচটিএমএল ধারক এবং দেহকে একটি কালো পটভূমি হিসাবে সেট করেছে, পাশাপাশি কোনও দৃশ্যমান সীমানার ব্যবধান নেই। হোয়াইট পৃষ্ঠার সমস্ত শিশু উপাদানগুলির উত্তরাধিকার সূত্রে ডিফল্ট পাঠ্য রঙ হিসাবে সেট করা হয়েছে; পাঠ্য তৈরি করার ডিফল্ট কালো রঙ এড়ানো অদৃশ্য বলে মনে হয়।
এইচটিএমএল, বডি {পটভূমি: # 000; প্যাডিং: 0; মার্জিন: 0; রঙ: # fff; }
04. অ্যানিমেশন ধারক
‘ডেটা-অ্যানিমেট’ অ্যাট্রিবিউটের সাথে উল্লেখ করা সামগ্রীর ধারকটিতে নির্দিষ্ট স্টাইল প্রয়োগ করা হয়েছে। এর আকারটি vw এবং vh পরিমাপ ইউনিটগুলি ব্যবহার করার পাশাপাশি কিছুটা ঘোরানো হওয়ার সাথে স্ক্রিনের পুরো আকারের সাথে মিলিয়ে যেতে সেট করে। ‘মুভইন’ নামে একটি অ্যানিমেশন প্রয়োগ করা হয়েছে, যা 20 সেকেন্ডের জন্য স্থায়ী হবে এবং অসীম পুনরাবৃত্তি করবে।
[ডেটা-অ্যানিমেট = "সরানো"] {অবস্থান: আপেক্ষিক; প্রস্থ: 100vw; উচ্চতা: 100vh; অস্বচ্ছতা: 1; অ্যানিমেশন: চলন্ত 20s অসীম; পাঠ্য-সারিবদ্ধ: কেন্দ্র; রূপান্তর: ঘোরানো (20deg); }
05. অ্যানিমেশন দীক্ষা
পূর্ববর্তী ধাপে রেফারেন্সযুক্ত ‘মুভইন’ অ্যানিমেশনটির জন্য @ কীফ্রেমগুলি ব্যবহার করে একটি সংজ্ঞা প্রয়োজন। অ্যানিমেশনের 0% থেকে শুরু হওয়া প্রথম ফ্রেমটি ডিফল্ট ফন্টের আকার, পাঠ্য অবস্থান এবং দৃশ্যমান ছায়া সেট করে। তদ্ব্যতীত, আইটেমটি শূন্য অস্বচ্ছতার সাথে সেট করা হয়েছে যাতে এটি প্রাথমিকভাবে অদৃশ্য হয় - যেমন। দেখার বাইরে প্রদর্শন করা।
@ কিফ্রেমস মুভ ইন {0% {ফন্ট-আকার: 1 এমএম; বাম: 0; অস্বচ্ছতা: 0; পাঠ্য-ছায়া: কিছুই নয়; ST * * * পদক্ষেপ 6 এখানে}
06. ভিউ মধ্যে অ্যানিমেট
পরবর্তী ফ্রেমটি অ্যানিমেশনের মাধ্যমে 10% এ স্থাপন করা হয়েছে। এই ফ্রেমটি অস্বচ্ছতাটিকে পুরোপুরি দৃশ্যমান হিসাবে সেট করে, ফলস্বরূপ পাঠ্যটি ধীরে ধীরে দৃশ্যে অ্যানিমেটেড করা যায়।অতিরিক্তভাবে, পাঠ্যের 3 ডি গভীরতার মায়াজাল দিতে নীল এবং হ্রাসকারী রঙের মানগুলির সাথে একাধিক ছায়া যুক্ত করা হয়।
10% {অস্বচ্ছতা: 1; পাঠ্য-ছায়া: .2 এম -2 এম 4 পিক্স #aaa, .4 এম -4 এম 4 পিক্স # 777, .6 এম -6 এম 4 পিক্স # 444,। এম এম -8 এম 4 পিএক্স # 111; ST * * * পদক্ষেপ 7 এখানে
07. অ্যানিমেশন চূড়ান্ত করা
চূড়ান্ত ফ্রেমগুলি 80% এবং অ্যানিমেশনের একেবারে শেষে ঘটে। এগুলি ফন্টের আকার বাড়াতে এবং উপাদানটিকে বাম দিকে চালিত করার জন্য দায়ী। ফ্রেম 80% থেকে 100% থেকে দেখার বাইরে পাঠ্যকে ম্লান করার জন্য পাঠ্য ছায়ার জন্য নতুন সেটিংস প্রয়োগ করা হয়।
80% {হরফ আকার: 8 এম; বাম: -8 এম; অস্বচ্ছতা: 1; } 100% {হরফ আকার: 10 মিম; বাম: -10 এএম; অস্বচ্ছতা: 0; পাঠ্য-ছায়া: .02 ম -.02 ম 4px #aaa, .04 ম -.04 ম 4px # 777, .06 এম -.06 এম 4 পিএক্স # 444, .08 এম -.08 এম 4 পিএক্স # 111; } * * *
দ্রষ্টব্য: আপনি যে প্রকল্পটি শুরু করছেন তা মোকাবেলা করতে পারে এমন ক্লাউড স্টোরেজ থাকা অপরিহার্য (আমাদের গাইড সাহায্য করবে)।
এই নিবন্ধটি মূলত সৃজনশীল ওয়েব ডিজাইন ম্যাগাজিন ওয়েব ডিজাইনারের 273 সংখ্যায় প্রকাশিত হয়েছিল। ইস্যু 273 এখানে কিনুন বা ওয়েব ডিজাইনারের সাবস্ক্রাইব করুন এখানে.
