কীভাবে দুটি স্লাইডার সহ নিবন্ধকরণ এবং নিবন্ধকরণ ফর্ম তৈরি করবেন

আপনারা কেউ কেউ এটি ইতিমধ্যে জেনে থাকতে পারেন, তবে যারা জানেন না তাদের জন্য আমি আপনার সবার সাথে একটি সাপ্তাহিক কোডিং চ্যালেঞ্জ শুরু করব!

এই চ্যালেঞ্জটি বাস্তব কোডগুলিতে অনুশীলন করে আমাদের কোডিং দক্ষতা উন্নত করতে সহায়তা করবে।

এই চ্যালেঞ্জ সম্পর্কে এবং পুরো গাইডটি পড়ে কীভাবে অংশ নেবেন সে সম্পর্কে আরও পড়ুন।

ঠিক আছে ... সুতরাং এই সপ্তাহের জন্য চ্যালেঞ্জটি ছিল: একটি নিবন্ধকরণ বা নিবন্ধকরণ ফর্ম তৈরি করুন (বা উভয়)।

নীচে আমি যা তৈরি করেছি তার একটি ডেমো রয়েছে:

সত্যি কথা বলতে, আমি অ্যানিমেশনটি তৈরি করতে কিছুটা লড়াই করেছি, তবে শেষ পর্যন্ত আমি এটি কাজ করতে সক্ষম হয়েছি। SE আমি সেলেক্টোর ড্রিবলে এই শটটি দ্বারা অনুপ্রাণিত হয়েছিলাম - তাদের কয়েকটি দুর্দান্ত নকশা রয়েছে যা আপনার চেক করা উচিত!

প্রকল্পের বিবরণ

আমরা আসল কোডে যাওয়ার আগে, আমি উপাদানটিতে থাকা জিনিসগুলি ভেঙে ফেলতে চাই। এটি কোডটিকে আরও পরিষ্কারভাবে লেখার সাথে সাথে এটি সহায়তা করবে।

মূল উপাদানটিতে (। কনটেনার) আমাদের 4 টি ছোট পর্দা / বাক্স রয়েছে:

  1. নিবন্ধন ফর্ম
  2. নিবন্ধন ফর্ম
  3. লগইন ওভারলে
  4. লগইন ওভারলে

আপনি একটি নির্দিষ্ট সময়ে নিম্নলিখিতগুলি দেখতে পারেন:

  • নিবন্ধকরণ ওভারলে পাশের নিবন্ধকরণ ফর্ম
  • নিবন্ধকরণ ওভারলে পাশের নিবন্ধকরণ ফর্ম

ওভারলে ক্ষেত্রগুলিতে পাঠ্য এবং একটি বোতাম রয়েছে। আপনি যদি এটিতে ক্লিক করেন তবে পর্দার অন্যান্য সংমিশ্রণ উপস্থিত হবে এবং বিপরীতে। আমি কী বলতে চাইছি তা দেখতে উপরে GIF আবার চেক করুন।

ওভারলে অ্যানিমেশন - ব্যাখ্যা করা হয়েছে

এটি এখানে কিছুটা কৌতুকপূর্ণ হতে পারে তবে এর পিছনে যুক্তিটি বোঝার জন্য আমি যথাসাধ্য চেষ্টা করব।

আমাদের ওভারলে উপাদানটির জন্য নিম্নলিখিত স্তর রয়েছে:

ওভারলে কন্টেইনার - এটি নির্দিষ্ট স্থানে দৃশ্যমান অঞ্চলটি (নীচে এটিতে আরও) দেখায়। ধারকটির মোট প্রস্থের 50% প্রস্থ রয়েছে।

ওভারলে - এই ডিভটির দ্বিগুণ প্রস্থ (200%) রয়েছে যাতে এটি মূল ধারকটির সম্পূর্ণ প্রস্থ নেয়। (200% * 50% = 100%। 50% উপরে ওভারলে ধারক থেকে আসে)

ওভারলে প্যানেলগুলি - এমন ডিভ যা প্রকৃত সামগ্রী (পাঠ্য এবং বোতাম) থাকে যা আমরা স্ক্রিনে দেখি। আপনার উভয়েরই পরম অবস্থান রয়েছে। ওভারলে উপাদানগুলিতে আমরা এগুলি যে কোনও জায়গায় রাখতে পারি। নিয়ন্ত্রণ প্যানেলের একটি বামদিকে এবং অন্যটি ডানদিকে রয়েছে। উভয়ের প্রলেপের উপাদানগুলির 50% প্রস্থ রয়েছে।

"আমাদের 3 স্তরের প্রয়োজন কেন?" কেউ জিজ্ঞাসা করতে পারে। ঠিক আছে, আসুন প্রথম স্তরটি ছাড়া এটি দেখতে কেমন হবে তা দেখুন:

উপরের ছবিতে আপনি দেখতে পাবেন যে দুটি প্যানেলই "দৃশ্যমান", যা আমরা চাই না। এই কারণে, আমরা ওভারলে কন্টেইনারটিকে "ফোকাস অঞ্চল" হিসাবে যুক্ত করি। এইভাবে, আমরা উপচে পড়া বা সীমা ছাড়িয়ে যাওয়া প্যানেলটি লুকিয়ে রাখতে পারি। এই কারণে, ওভারলেগুলি ওভারলে পাত্রে আকারের দ্বিগুণ হতে হয়েছিল। .Olaylay ধারকটি স্থানান্তরিত করে, যারও একটি পরম অবস্থান রয়েছে, আমরা পছন্দসই প্যানেলটি প্রদর্শন বা আড়াল করতে পারি।

এটি কিছুটা বিভ্রান্তিকর ছিল, আমি স্বীকার করি তবে আমি আশা করি এটি আরও স্পষ্ট করে তুলেছি।

অ্যানিমেশন ফর্ম - ব্যাখ্যা

এগুলি মোটেই বুঝতে অসুবিধা হয় না। মূলত, আমাদের আবার দুটি ধারক রয়েছে - .ফর্ম কনটেইনার। প্রত্যেকটির প্রস্থ 50% এবং একটি অবস্থান রয়েছে - একেবারে। আমরা দুজন একই সাথে বাম থেকে ডানে সরে যাই। যদি তারা উপরে থেকে ওভারলে পাত্রে পেছনে পড়ে (তারা চলতে থাকে) তবে আমরা দ্রুত জেড-ইনডেক্স মানটি পরিবর্তন করি। নিবন্ধকরণ ফর্ম (উদাহরণস্বরূপ) নিবন্ধকরণ ফর্মের উপর সরানো হয় এবং বিপরীতে। চোখের জন্য ম্যাজিক তবে এর পিছনে কিছু কোড লজিক!

এইচটিএমএল

এখন আমরা অ্যানিমেশনের মূল কার্যকারিতা ভেঙে ফেলেছি, আসল এইচটিএমএল কোড দেখার সময় এসেছে। আসুন বেসিক কাঠামো দিয়ে শুরু করা যাক:

মূল ডিভটিতে। কন্টেইনারগুলির একটি শ্রেণি এবং ধারকটির একটি আইডি রয়েছে, কারণ এই উপাদানটি জাভাস্ক্রিপ্টে লক্ষ্য হিসাবে ব্যবহার করা উচিত (নীচে এটিতে আরও)।

নিবন্ধন ফর্ম

নিবন্ধন ফর্ম

আমাদের প্রতিটি বিভাগের জন্য কয়েকটি ক্লাস রয়েছে:

  • .ফর্ম-ধারক শ্রেণিতে সিএসএস থাকে, যা .সাইন-ইন-ধারক এবং .সাইন-আপ-ধারক উভয় শ্রেণির জন্য নকল করা হয়।
  • 2 টি পৃথক শ্রেণিতে (উপরে উল্লিখিত) সিএসএস রয়েছে যা আলাদা।

এইভাবে, আমাদের একই সিএসএস কোডটি দু'বার লিখতে হবে না এবং একাধিক ক্লাস যুক্ত করতে পারি।

আপনিও খেয়াল করে থাকতে পারেন যে আই-ট্যাগগুলির কিছু ক্লাস রয়েছে। এটি কারণ আমরা প্রতীকগুলির জন্য ফন্টআউজ ব্যবহার করি। তাদের ওয়েবসাইটে তাদের সম্পর্কে আরও পড়ুন।

ওভারলে পাত্রে

উপরের মতো, আমাদের একটি সাধারণ। ওপ্লে-প্যানেল ক্লাস এবং দুটি পৃথক শ্রেণি রয়েছে: ওভেরে-বাম এবং .ওরোলে-ডান। বোতামগুলির জন্য আমাদের আইডি রয়েছে কারণ আমরা জাভাস্ক্রিপ্টে উভয়ের জন্য একটি অনক্লিক ইভেন্টলিস্টনার যুক্ত করব।

জাভাস্ক্রিপ্ট

আমরা সাধারণত জেএস অংশের পূর্বে সিএসএসকে চিকিত্সা করি তবে এইবার প্রথমে জাভাস্ক্রিপ্ট কোডটি দেখতে এবং ব্যাখ্যা করা আরও সহজ। এটি আপনাকে আমাদের পরবর্তী সিএসএস বুঝতে সাহায্য করবে।

উপরে বর্ণিত হিসাবে, আমরা ইভেন্ট শ্রোতাদের যুক্ত। বোতামগুলি ক্লিক করা হলে, "। राइट-প্যানেল" এক্সটেনশান সহ সক্রিয় শ্রেণি যুক্ত বা সরানো হয় (শ্রেণীর জন্য সেরা নাম নয়, তবে আমার এই মুহূর্তে সেরা।)। আমাদের দুটি স্ক্রিন রয়েছে বলে এই শ্রেণিটি উপ-উপাদানগুলি আলাদাভাবে ডিজাইন করতে ব্যবহৃত হয়।

সিএসএস

প্রথমত, আমাদের কাছে বেস উপাদানগুলির জন্য বেস সিএসএস রয়েছে:

এখানে কিছু বিষয় বিবেচনা করতে হবে:

  1. আমরা উপাদানগুলি সরাসরি স্টাইল করি (এইচ 1, পি, এ)। আপনি সাধারণত এটি করবেন না কারণ এটি অন্যান্য শৈলীর সাথে বিভ্রান্ত হতে পারে। সুতরাং প্রত্যেককে ক্লাস যুক্ত করা ভাল। এই উদাহরণে, তবে এটি সূক্ষ্মভাবে কাজ করে যেহেতু কেবলমাত্র পৃষ্ঠাতে আমাদের এই উপাদান রয়েছে।
  2. আমাদের বোতামটিতে একটি ছোট ট্রানজিশন রয়েছে। যখন এটি ক্লিক করা হয়, সক্রিয় রাষ্ট্রটি ট্রিগার করা হয় যাতে আমরা এটিকে কিছুটা কমাতে পারি। দুর্দান্ত এবং সাধারণ ক্লিক প্রভাব !
  3. ফর্মটি একটি নমনীয় ধারক কারণ আমরা এর মধ্যে সমস্ত কিছুকে কেন্দ্র করে রাখতে চাই এবং এটি ফ্লেক্সবক্সের সাহায্যে খুব সহজ। আপনি নীচে দেখতে পাবেন যে এটি আরও কয়েকবার ব্যবহৃত হয়।

। কনটেনার সিএসএস:

  • তুলনামূলকভাবে অবস্থানযুক্ত কারণ আমাদের একেবারে অবস্থিত শিশু উপাদান রয়েছে (কেন উপরে বর্ণিত)।
  • ওভারফ্লো লুকানো হয়েছে কারণ আমরা একটি ফ্রেম ব্যাসার্ধ সংজ্ঞায়িত করেছি এবং অধস্তন উপাদানগুলি এই ব্যাসার্ধটিকে বাধা দেয় না এবং ধারকটির বাইরে প্রদর্শিত হবে।

মজাদার অংশের জন্য এখন .for ধারক এবং সম্পর্কিত শৈলী:

নিম্নলিখিত নোট:

  1. উপরে বর্ণিত হিসাবে .ফর্ম ধারকগুলির জেড-ইনডেক্স পরিবর্তনের জন্য দায়ী অ্যানিমেশন (শো)। আমরা ধরে নিই যে জেড-ইনডেক্স 1 0 এবং 49.99% এর মধ্যে এবং জেড-ইনডেক্স 5 50 এবং 100% এর মধ্যে রয়েছে। এই অঞ্চলগুলি ব্যবহৃত হয় কারণ আমরা তাদের দ্রুত পরিবর্তন করতে চাই।
  2. আমরা বোতামটি ক্লিক করার সময় .for পাত্রে প্রবেশ করার জন্য ডান প্যানেল সক্রিয় ক্লাস ব্যবহার করি।

এবং অবশেষে, ওভারলে পাত্রে এবং সম্পর্কিত স্টাইলগুলি:

  • ওভারলেটির গ্রেডিয়েন্ট পটভূমি রয়েছে। আমি এটি পাওয়ার জন্য ইউআই ইতিহাস ব্যবহার করেছি।
  • .ওভারলে-বাম এবং। কনটেনার। রাইট-প্যানেল-অ্যাক্টিভ। ওভারলে-রাইটের এক্স অক্ষে -20% এবং 20% এর স্থানচ্যুতি রয়েছে। এটি কারণ আমি পাঠ্যের সাথে কিছুটা প্রভাব যুক্ত করতে চেয়েছিলাম যখন মনে হয় এটি বাইরে থেকে এসেছে (কোনওভাবে) ;

আর কিছু না! আমরা সবকিছু আবরণ। আমাদের হয়ে গেল!

উপসংহার

এই পোস্টটি অ্যানিমেশনটির জন্য কিছুটা কঠিন ছিল, তাই না? তবুও, আমি আশা করি আপনি এটি থেকে কিছু শিখেছেন।

ভুলে যাবেন না যে আপনি রেজিস্ট্রেশন / রেজিস্ট্রেশন ফর্মটির নিজস্ব সংস্করণ তৈরি করে সাপ্তাহিক কোডিং চ্যালেঞ্জেও অংশ নিতে পারেন। এটি টুইটারে শেয়ার করুন: @ florinpop1705 যাতে আমি এটি দেখতে পারি!

পরবর্তী চ্যালেঞ্জের জন্য আমাদের কী তৈরি করা উচিত তা পরামর্শ দেওয়ার জন্য আপনি এই গুগল ফর্মটিও ব্যবহার করতে পারেন।

আমরা কোডেপেনে তৈরি করা প্রকল্পটির লাইভ সংস্করণটি পেতে পারেন।

এটি পড়ে আপনার সময় ব্যয় করার জন্য আপনাকে ধন্যবাদ। আমি আশা করি আপনি নতুন কিছু শিখলেন!

মূলত www.florin-pop.com এ প্রকাশিত।