কন্টেন্ট
- Mo.js কীভাবে সহায়তা করতে পারে?
- 01. শুরু করুন
- 02. পৃষ্ঠার কাঠামো তৈরি করুন
- 03. পৃষ্ঠাটি কাঠামো করুন
- 04. সিএসএস লিঙ্ক করুন
- 05. পটভূমি স্টাইল
- 06. পাঠ্যটি স্টাইল করুন
- 07. mo.js ইনস্টল করুন
- 08. প্রথম বিস্ফোরণ তৈরি করুন
- 09. সার্কেল অবজেক্ট তৈরি করুন
- 10. চেনাশোনাটি অ্যানিমেট করুন
- ১১. বিস্ফোরিত বহুভুজ তৈরি করুন
- 12. দ্বিতীয় বিস্ফোরণ তৈরি করুন
- 13. চেনাশোনা বিস্ফোরণ যুক্ত করুন
- 14. একটি প্রাথমিক বুদ্বুদ রেন্ডার
- 15. একাধিক আকার যুক্ত করুন
- 16. সহায়ক গ্রন্থাগার যুক্ত করুন
- 17. অ্যানিমেশন অগ্রসর
- 18. mo.js সম্পর্কে আরও জানুন
Mo.js একটি অনন্য মোশন গ্রাফিক্স জাভাস্ক্রিপ্ট লাইব্রেরি যা পুরো পর্দার পৃষ্ঠা অ্যানিমেশন লোডারগুলিকেই নয়, ক্লিক-টু-অ্যানিমেট মাইক্রো-ইন্টারেক্টেশন এবং টন আকারের ম্যানিপুলেশনগুলির সুবিধা দেয়।
আপনি যদি এখন কিছু সময়ের জন্য ওয়েব ডিজাইন দৃশ্যের অনুসরণ করে চলেছেন তবে সম্ভাবনা রয়েছে যে আপনি অ্যানিমেশন কৌশল এবং গ্রন্থাগারগুলির একটি বিস্তৃত অ্যারে জুড়ে এসেছেন - বা সম্ভবত এর সাথে ইন্টারেক্ট করেছেন। সিএসএস, এইচটিএমএল 5 এবং জাভাস্ক্রিপ্টের মতো মূল প্রযুক্তিগুলি আরও শক্তিশালী হচ্ছে এবং সময়ের সাথে সাথে ব্রাউজার সমর্থনও উন্নত হচ্ছে। এর অর্থ এই যে আরও বেশি পরিশীলিত ওয়েব অ্যানিমেশনগুলি ডিভাইস জুড়ে সমর্থিত হতে পারে। মনে রাখবেন, আপনি যদি কোনও জটিল সাইট তৈরি করছেন তবে আপনার ওয়েব হোস্টিং পরিষেবাটি অবশ্যই আপনার প্রকল্পকে সমর্থন করতে সক্ষম হতে হবে।
কিছু অ্যানিমেশন অনুপ্রেরণা প্রয়োজন? পুনরায় তৈরি করতে এখানে শীর্ষস্থানীয় সিএসএস অ্যানিমেশনের দুর্দান্ত কিছু উদাহরণ রয়েছে। কোডিং ছাড়াই কোনও সাইট তৈরি করতে চান? এই ওয়েবসাইট নির্মাতাদের চেষ্টা করুন।
Mo.js কীভাবে সহায়তা করতে পারে?
ওয়েব অ্যানিমেশন যেমন এটি প্রদর্শিত হয়, এখানে থাকার জন্য এখানে।যাইহোক, সর্বাধিক জনপ্রিয় অ্যানিমেশন কৌশলগুলির সাথে একটি ঘাটতি হ'ল তারা প্রচলিত ইউআই / ইউএক্স উপাদান যেমন স্লাইডশো, ট্যাবড বোতাম এবং ড্রপ-ডাউন মেনুগুলিতে অ্যানিমেট করার দিকে ঝুঁকছেন। ফলস্বরূপ, এগুলিকে ব্যবহার করা আপনার সাইটটিকে খুব বেশি পরিচিত এবং উত্তেজনাপূর্ণ করতে পারে।
Mo.js এটিতে সহায়তা করতে পারে। লাইব্রেরিটি ব্যবহার করে এইচটিএমএল, আকার, ঘূর্ণি, বিস্ফোরণ এবং স্ট্যাগার ইত্যাদির মতো অন্তর্নির্মিত উপাদানগুলি ব্যবহার করে অতি-সাধারণ সাইট উপাদানগুলিকে অ্যানিমেট করতে সহায়তা করে। গ্রন্থাগারটি ব্যবহার করা খুব সহজ, দ্রুত, রেটিনা প্রস্তুত, মডুলার এবং ওপেন সোর্স। এই টিউটোরিয়ালে, mo.js এর সাথে কাজ করার প্রাথমিক বিষয়গুলি চালু করা হয়েছে এবং দুটি কৌশল প্রদর্শিত হয়েছে; বিস্ফোরণ এবং বুদ্বুদ।
01. শুরু করুন
টিউটোরিয়াল ফাইলগুলি সঞ্চয় করতে আপনার ডেস্কটপে একটি ফোল্ডার, mo.js তৈরি করে শুরু করুন। এর মধ্যে তিনটি অতিরিক্ত ফোল্ডার তৈরি করুন: স্টাইলিং ফাইলগুলি সংরক্ষণ করার জন্য CSS, জাভাস্ক্রিপ্ট ফাইলগুলির জন্য চিত্রগুলির জন্য img এবং js। এইচটিএমএল ফাইলগুলি মূল ফোল্ডারে সংরক্ষণ করা হবে। (আপনি ক্লাউড স্টোরেজ সহ ব্যাক আপ বিবেচনা করতে চাইতে পারেন)।
02. পৃষ্ঠার কাঠামো তৈরি করুন
আপনার কোড সম্পাদকটি খুলুন এবং মূল ওয়েব পৃষ্ঠার জন্য চিহ্নিতকরণ রাখতে একটি সূচক। Html নথি তৈরি করুন। প্রাথমিক কাঠামো তৈরি করে শুরু করুন এবং পৃষ্ঠায় একটি উপযুক্ত শিরোনাম দিন।
! DOCTYPE html> html lang = "en"> head> meta charset = "utf-8"> শিরোনাম> ব্লাস্ট টেকনিকের শিরোনাম </ head> শরীর </ b> </ html>
03. পৃষ্ঠাটি কাঠামো করুন
টিউটোরিয়ালটি দুটি ভাগে বিভক্ত; প্রথমটি বিস্ফোরণ কৌশলটি দেখায়, অন্যদিকে বুদ্বুদ ধারণাটি চিত্রিত করে। ফলস্বরূপ, আমরা দুটি প্রযুক্তির জন্য দুটি HTML ফাইল প্রস্তুত করি। বিস্ফোরণ কৌশলটি কিক-স্টার্ট করতে পৃষ্ঠার শিরোনাম ধারণ করতে একটি ডিভিশন বিভাগ তৈরি করুন। আপনার ব্রাউজারে পৃষ্ঠাটি রেন্ডার করুন যেখানে আপনার উপরের-বাম কোণে স্টাইলযুক্ত পাঠ্য পর্যবেক্ষণ করা উচিত।
বডি> ডিভ> পি> মো.জেএস অ্যানিমেশন </ p> </ div> / বডি>
04. সিএসএস লিঙ্ক করুন
আপনার কোড সম্পাদকটি খুলুন এবং CSS ফোল্ডারের ভিতরে স্টাইলসিএসএস ফাইল তৈরি করুন। প্রধান বিভাগে এই কোডটি যুক্ত করে আপনার এইচটিএমএল নথিতে এই ফাইলটির একটি লিঙ্ক তৈরি করুন, লিঙ্ক rel = "স্টাইলশিট" href = "সিএসএস / শৈলী। CSS">। যেহেতু কোনও শৈলী যুক্ত করা হয়নি, পৃষ্ঠাটি ৩ য় ধাপে চিত্রিত হিসাবে রেন্ডার করে Al বিকল্পভাবে, স্টাইলিং ন্যূনতম হওয়ায় আপনি এইচটিএমএল এবং সিএসএসের সমন্বয় করে ইনলাইন স্টাইলিং ব্যবহার করতে পারেন।
05. পটভূমি স্টাইল
এরপরে, আমরা একটি পটভূমি চিত্র যুক্ত করে পটভূমিটি স্টাইল করি। আমরা পিক্সেল থেকে নিকোলাই উল্টাং দ্বারা নিখরচায় প্রাকৃতিক দৃশ্যের ব্যাকগ্রাউন্ড ব্যবহার করেছি। আপনি এখানে এটা ডাউনলোড করতে পারেন। Img ফোল্ডারের ভিতরে এটি (বা আপনার নিজস্ব চিত্র) সংরক্ষণ করুন। পটভূমিতে পরিবর্তনগুলি দেখানোর জন্য পৃষ্ঠাটি রেন্ডার করুন।
বডি, এইচটিএমএল {পটভূমি-চিত্র: url (bg.webp); পটভূমি-আকার: কভার; প্যাডিং: 0; মার্জিন: 0; প্রস্থ: 100%; উচ্চতা: 100%; ওভারফ্লো গোপন; }
06. পাঠ্যটি স্টাইল করুন
পৃষ্ঠার কেন্দ্রে রেন্ডার করার জন্য পাঠ্যটি স্টাইল করা হয়েছে, কারণ এটি বর্তমানে উপরের বাম কোণে প্রদর্শিত হচ্ছে। নোট করুন যে পাঠ্যটিকে কেন্দ্রিয় করতে, আমরা একটি নিখুঁত অবস্থান নির্বাচন করি এবং উপরে, বাম এবং ডান মার্জিনগুলি ব্যবহার করে এর সঠিক অবস্থান নির্ধারণ করি। পাঠ্য-রূপান্তরকারী সম্পত্তি ব্যবহার করেও পাঠ্যটি রূপান্তরিত হয়। পাঠ্য-সারিবদ্ধ সম্পত্তিটিও কেন্দ্রে সেট করা আছে।
পাঠ্য {ফন্ট-পরিবার: সেঞ্চুরি গোথিক, সানস-সিরিফ; রঙ: # fff; পাঠ্য-রূপান্তর: বড় হাতের অক্ষর; হরফ-আকার: 50px; হরফ ওজন: সাহসী; অবস্থান: পরম; শীর্ষ: 50px; বাম: 25%; ডান: 30%; পাঠ্য-সারিবদ্ধ: কেন্দ্র; }
07. mo.js ইনস্টল করুন
অন্যান্য লাইব্রেরির মতো, mo.js একাধিক বিকল্পের মাধ্যমে ইনস্টল করা আছে। সবচেয়ে সহজ পদ্ধতির, যা আমরা নিযুক্ত করি এটি সরাসরি সিডিএন সার্ভার থেকে অ্যাক্সেস করে। বডি বিভাগে নিম্নলিখিত কোড যুক্ত করুন।
স্ক্রিপ্ট src = ‘//cdn.jsdelivr.net mojs / 0.265.6 / mo.min.js '> / স্ক্রিপ্ট>
আপনি যদি ও ff লাইন বিকাশ করছেন তবে লাইব্রেরিটি সরাসরি গিটহাব থেকে ডাউনলোড করা যায় এবং যথাযথ কমান্ড ব্যবহার করে বাভার বা এনপিএম প্যাকেজ ব্যবহার করে ইনস্টল করা যেতে পারে।
বোর ইনস্টল মো-জেএস এনপিএম মো-জেএস ইনস্টল করুন
ডাউনলোড হয়ে গেলে এটি সরাসরি উল্লেখ করা যেতে পারে।
স্ক্রিপ্ট src = "mo.js" টাইপ = "পাঠ্য জাভাস্ক্রিপ্ট"> / স্ক্রিপ্ট>
অবশেষে, একটি নতুন স্ক্রিপ্ট.জেএস ফাইল তৈরি করুন এবং এটি জেএস ফোল্ডারে সংরক্ষণ করুন। আমরা এই ফাইলটিতে জাভাস্ক্রিপ্ট কার্যকারিতা যুক্ত করব। এটি নিম্নলিখিত হিসাবে শরীরের বিভাগে লিঙ্ক করুন। এটি নীচে প্রদর্শিত হিসাবে টেক্সট শিরোনাম নীচে রাখুন।
বডি </ p> mo.js অ্যানিমেশন </ p> / Div> স্ক্রিপ্ট src = 'https: //cdn.jsdelivr নেট / মোজ / 0.265.6 / mo.min.js'> / স্ক্রিপ্ট> স্ক্রিপ্ট src = "জেএস /script.js "> স্ক্রিপ্ট </ b>>
08. প্রথম বিস্ফোরণ তৈরি করুন
কোডটি বিকাশ করার আগে, আমরা কী তৈরি করছি তা হাইলাইট করা বুদ্ধিমানের কাজ। কোনও কিছুর বিস্ফোরণ ঘটানোর অর্থ এটি একটি বিস্ফোরক পদ্ধতিতে ছোট বিটগুলিতে বিভক্ত হওয়া। আমরা একটি সাধারণ অবজেক্ট (বৃত্ত) তৈরি করব এবং এটি অনুসন্ধান সেট আপ করব যে কোনও ব্যবহারকারী এটি ক্লিক করলে এটি বিস্ফোরক উপায়ে আলাদা হয়ে যায়।
09. সার্কেল অবজেক্ট তৈরি করুন
প্রথমে, ব্লাস্ট হওয়া বস্তুটি তৈরি করা হয় (বৃত্ত)। যাইহোক, mo.js আয়তক্ষেত্র (আয়ত), ক্রস, সমান, জিগজ্যাগ এবং বহুভুজ সহ অন্যান্য আকারগুলিকে সমর্থন করে। আপনি যেখানে আকৃতির প্রকারটি নির্দিষ্ট করতে ব্যর্থ হন, এটি একটি চেনাশোনাতে ডিফল্ট হয়ে যাবে a একটি সাধারণ বৃত্ত তৈরি করতে, ভের বা কনট ব্যবহার করে এটি ঘোষণা করুন এবং আকৃতি ফাংশনটি কল করে এর বৈশিষ্ট্যগুলি নির্ধারণ করুন।
// একটি সাধারণ অবজেক্ট তৈরি কর্ট সার্ক = নতুন মোজস ha শ্যাপ ({isShowStart: সত্য, ব্যাসার্ধ: 100,});
কোড প্রদত্ত ব্যাসার্ধের সাথে ডিফল্ট বৃত্ত বস্তু তৈরি করে। আপনার আইটেমটি প্রদর্শন করতে হবে কিনা তা উল্লেখ করার জন্য isShowStart ভেরিয়েবলকে বুলিয়ান মান দেওয়া হয়েছে। পৃষ্ঠার কেন্দ্রে একটি ছোট ম্যাজেন্টা বর্ণের বৃত্ত প্রদর্শন করতে কোডটি রেন্ডার করুন।
10. চেনাশোনাটি অ্যানিমেট করুন
কোড স্নিপেট নির্দিষ্ট করে যে স্কেল এবং অস্বচ্ছতা 1 থেকে 0 থেকে পরিবর্তিত হবে, ইঙ্গিত করে যে বস্তুটি অদৃশ্য হয়ে যায়। অ্যাডমিশন এবং অ্যানিমেশনের বিলম্বও সেট করা আছে। নোট করুন যে অ্যানিমেশনটি চালিত হচ্ছে না যেহেতু আমরা এখনও এটি শুরু করতে পারি নি। এটি করতে, নীচের ফাংশনটি যুক্ত করুন।
document.addEventListener (‘ক্লিক’, ফাংশন (ঙ) {সার্কিট। রিপ্লে ();});
১১. বিস্ফোরিত বহুভুজ তৈরি করুন
এখন চেনাশোনাটি অ্যানিমেট করা হচ্ছে, আমরা একটি বিস্ফোরণ অ্যানিমেশন তৈরি করি যা একই সাথে রেন্ডার হয়। প্রথম বিস্ফোরণটি বিস্ফোরণটি আঁকতে বহুভুজ আকার ব্যবহার করে। একটি বিস্ফোরণ তৈরি করতে, নীচের কোড স্নিপেটে যেমন দেখানো হয়েছে তে mo.js ফাংশনটি ব্যবহার করুন।
কনস্ট burst1 = নতুন মোজস.বার্স্ট ({বাম: 0, শীর্ষ: 0, গণনা: 7, ব্যাসার্ধ: {50: 250}, শিশু: {পূরণ করুন: 'সাদা', আকার: 'বহুভুজ', স্ট্রোক: white 'সাদা' : '# A50710'}, স্ট্রোকউইথ: 4, ব্যাসার্ধ: 'র্যান্ড (30, 60)', ব্যাসার্ধ: 0, স্কেল: {1: 0}, পাথস্কেল: 'র্যান্ড (.5, 1)', ডিগ্রি: 360, #Force3d: সত্য}});
কোডটি বিস্ফোরণের জন্য সাতটি বহুভুজ আকার নির্ধারণ করে এবং দুটি রেডিয়ি নির্দিষ্ট করে। প্রথমটি সামগ্রিক অ্যানিমেশনকে বোঝায়, যখন দ্বিতীয়টি অ্যানিমেশনের মধ্যে নির্দিষ্ট বহুভুজ বস্তুগুলিতে দৃষ্টি নিবদ্ধ করে। ইভেন্ট শ্রোতার ফাংশনে বিস্ফোরণ যুক্ত করার বিষয়টি নিশ্চিত করুন যাতে এটি মাউস ক্লিকগুলিতে সাড়া দেয়। নোট করুন যে দুটি নতুন পরামিতি যুক্ত করা হয়েছে; টিউন এবং জেনারেট। টিউন পৃষ্ঠার যে কোনও জায়গায় রেন্ডার করার জন্য বিস্ফোরণটি তৈরি করে, যেখানে বিস্ফোরণ অ্যানিমেশন তৈরি করে। পৃষ্ঠাটি রেন্ডার করুন। বৃত্ত হিসাবে একই সময়ে প্রদর্শিত বিস্ফোরক উপাদানগুলি পর্যবেক্ষণ করুন।
document.addEventListener (‘ক্লিক’, ফাংশন (e) {burst1। টিউন ({x: e.pageX, y: e.pageY})। জেনারেট ()। রিপ্লে (); সার্কেল। রিপ্লে ();});
12. দ্বিতীয় বিস্ফোরণ তৈরি করুন
এরপরে, আমরা বিভিন্ন আকারের বিকল্প ব্যবহার করে দ্বিতীয় বিস্ফোরণটি তৈরি করি। কোডটি পূর্বের বিস্ফোরণের কাঠামো অনুসরণ করে এবং কয়েকটি পরামিতি পরিবর্তন করে।
কনস্ট ব্রাস্ট 2 = নতুন মোজস.বার্স্ট ({শীর্ষ: 0, বাম: 0, গণনা: 4, ব্যাসার্ধ: {0: 250}, শিশু: {আকৃতি: ['বৃত্ত', 'রেক্ট'], পয়েন্ট: 5, পূরণ: ['সাদা'], ব্যাসার্ধ: 'র্যান্ড (30, 60)', বিলম্ব: 'স্তম্ভিত (50)', সহজ হচ্ছে: ['কিউবিক.আউট', 'কিউবিক.আউট', 'কিউবিক.আউট'], স্কেল: {1: 0}, প্যাথস্কেল: 'র্যান্ড (.5, 1)', isForce3d: সত্য}});
ইভেন্ট শ্রোতার ফাংশনে বিস্ফোরণ যুক্ত করুন।
document.addEventListener ('ক্লিক', ফাংশন (e) {burst1। টিউন ({x: e.pageX, y: e.pageY})। জেনারেট ()। রিপ্লে (); বিস্ফট 2। টিউন ({x: e.pageX , y: e.pageY})। জেনারেট করুন ()। রিপ্লে (); সার্কিট। রিপ্লে ();});
13. চেনাশোনা বিস্ফোরণ যুক্ত করুন
অ্যানিমেশনটি আরও বাড়ানোর জন্য, আমরা বিজ্ঞপ্তি বিস্ফোরণগুলি যুক্ত করি। 11 এবং 12 পদক্ষেপে কোডটি পরীক্ষা করা উভয় ধরণের বিস্ফোরণের মধ্যে প্রচুর মিল খুঁজে পাওয়া যায়। তৃতীয় বিস্ফোরণটি তৈরি করার সময়, আমরা স্প্রেড অপারেটর যা তিনটি ডট (...) হিসাবে লেখা হয় তা ব্যবহার করে খুব বেশি কোড পুনরায় লেখা এড়াতে চাই। তবে, প্রথমে আমরা একটি পরিবর্তনশীল ঘোষণা করি যা আমরা পুনরায় ব্যবহার করতে চাইলে একই বৈশিষ্ট্য ধারণ করে contains এরপরে, অন্য দুটি চেনাশোনা কেবল স্প্রেড অপারেটর ব্যবহার করে তৈরি করা যেতে পারে।
// অনুরূপ পরামিতিগুলির সাথে ভেরিয়েবল তৈরি করা CIRCLE_OPTS = {বাম: 0, শীর্ষ: 0, পূরণ করুন: 'সাদা', স্কেল: {.2: 1}, অস্বচ্ছতা: {1: 0}, isForce3d: সত্য, isShowEnd: মিথ্যা };
কোডটি পূরণের ধরণ, স্কেল, অস্বচ্ছতা এবং অ্যানিমেশন শেষে এগুলি প্রদর্শিত হবে কিনা তা নির্দিষ্ট করে। দুটি বৃত্ত অ্যানিমেশন নীচে তৈরি করা হয়।
কনস্ট সার্কেল 1 = নতুন মোজস.শ্যাপ ({... CIRCLE_OPTS, ব্যাসার্ধ: 200}); কনস্ট সার্কেল 2 = নতুন মোজস.শ্যাপ ({... সিরক্লে_ওপিটিএস, ব্যাসার্ধ: 240, সহজ: 'কিউবিক.আউট', বিলম্ব: 300});
বিজ্ঞপ্তি আকার যুক্ত করুন।
document.addEventListener ('ক্লিক', ফাংশন (e) {burst1। টিউন ({x: e.pageX, y: e.pageY})। জেনারেট ()। রিপ্লে (); বিস্ফট 2। টিউন ({x: e.pageX , y: e.pageY})। জেনারেট করুন ()। রিপ্লে (); সার্কিট। রিপ্লে ();});
14. একটি প্রাথমিক বুদ্বুদ রেন্ডার
বিস্ফোরণ অ্যানিমেশন থেকে পৃথক, যা বস্তুকে ছোট ছোট টুকরো টুকরো করে তোলে, অন্যদিকে, বুদ্বুদ অ্যানিমেশনটি ক্লিক করা বস্তুকে একটি বৃহত স্থানে অনুবাদ করে। ধারণাটি এমন একটি বেলুনটি ফুটিয়ে তোলার উপমাটিকে গ্রহণ করে যেখানে বস্তুটি ক্রমাগত আকারে প্রসারিত হয়। এটি করার জন্য, আমরা কেবলমাত্র একটি নতুন ভেরিয়েবল ওপেনব্যাকগ্রাউন্ড তৈরি করি এবং বৈশিষ্ট্যগুলি সরবরাহ করি যা পুরো পটভূমিটিকে বস্তুর সাথে একই রঙ অর্জন করবে। ফলস্বরূপ, এটি বুদবুদ করার উপযোগী করে তোলে।
কনস্ট্যান্ট ওপেনব্যাকগ্রাউন্ড = নতুন মোজস.শ্যাপ ({পূরণ: '# FC2D79', বাম: 0, শীর্ষ: 0, স্কেল: {0: 4.5}, isShowStart: সত্য, ব্যাসার্ধ: 15, isForce3d: সত্য, isTimelineLess: সত্য, বিলম্ব: 150, ব্যাসার্ধ: 200, ইজিং: 'কিউবিক.আউট', ব্যাকভারডিজিং: 'এক্সপো.ইন',,);
ইভেন্ট শ্রোতার ফাংশনে ব্যাকগ্রাউন্ড ভেরিয়েবল যুক্ত করার বিষয়টি নিশ্চিত করুন।
ওপেনব্যাকগ্রাউন্ড। টিউন ({x: e.pageX, y: e.pageY।)। আবার দেখাও();
15. একাধিক আকার যুক্ত করুন
পদক্ষেপ 14 এ ধারণার পরে, আমরা এখন একাধিক বর্ণের বিজ্ঞপ্তিযুক্ত বস্তু অন্তর্ভুক্ত করতে উদাহরণটিকে এগিয়ে নিয়েছি, যা ক্লিক করে অনুরূপভাবে প্রসারিত হয় এবং কিছু পাঠ্য প্রদর্শিত হয়। বিদ্যমান এইচটিএমএল ফাইল সম্পাদনা করুন এবং কোডটি শরীরের মধ্যে অনুলিপি করুন। এটি পৃষ্ঠার মূল কাঠামো তৈরি করে।
16. সহায়ক গ্রন্থাগার যুক্ত করুন
এরপরে, স্ক্রোলিংয়ের সুবিধার্থে এবং বস্তুগুলিতে ক্লিক করা হলে শব্দ উত্পাদন করার জন্য বডি বিভাগে কিছু অতিরিক্ত গ্রন্থাগার যুক্ত করা হয়।
স্ক্রিপ্ট src = 'https: //cdnjs.cloudflare.com আজাক্স / libs / হাওলার / 1.1.26 / howler.min.js'> স্ক্রিপ্ট> স্ক্রিপ্ট src = 'https: //cdn.jsdelivr.net মোজ / 0.119.0 /mo.min.js '> / স্ক্রিপ্ট> স্ক্রিপ্ট src =' https: //cdn.jsdelivr.net হাতুড়ি / 2.0.4 / হাতুড়.মিন.জেস '> / স্ক্রিপ্ট> স্ক্রিপ্ট src =' https: // cdnjs। ক্লাউডফ্লেয়ার ডটকম আজ্যাক্স / লিবস / আইস্ক্রোল / ৫.১.১ / আইসক্রল-প্রোব.মিন জেএস '> / স্ক্রিপ্ট>
17. অ্যানিমেশন অগ্রসর
এরপরে, আমরা এইচটিএমএল ফাইলগুলিতে হাইলাইট করা পৃথক শ্রেণীর জন্য শৈলী যুক্ত করি। Mo.js কার্যকারিতা তারপর যুক্ত করা হয়। সম্পূর্ণ কোড (সিএসএস এবং জেএস) পর্যালোচনার জন্য টিউটোরিয়াল ফাইলগুলির সাথে ভাগ করা হয়।
18. mo.js সম্পর্কে আরও জানুন
টিউটোরিয়ালটি বুদ্বুদ এবং বিস্ফোরণ কৌশলগুলি প্রদর্শিত করার জন্য, অনলাইনে আরও উপলব্ধ সংস্থান রয়েছে যা আপনার শেখার প্রক্রিয়াটিকে দ্রুত ট্র্যাক করতে সহায়তা করতে পারে। এর মধ্যে কয়েকটিতে গিথুব সম্পর্কিত মো.জেএস টিউটোরিয়াল এবং গিথুবে ডেমো অন্তর্ভুক্ত রয়েছে।
এই নিবন্ধটি মূলত সৃজনশীল ওয়েব ডিজাইন ম্যাগাজিনের 291 সংখ্যায় প্রকাশিত হয়েছিল ওয়েব ডিজাইনার. 291 সংখ্যা কিনুন.
