ওয়েবসাইটকে দিন প্রিমিয়াম লুক: তৈরি করুন অ্যানিমেটেড স্লাইডিং লগইন ও সাইন-আপ ফর্ম (ফ্রি সোর্স কোড)
বর্তমান ডিজিটাল যুগে একটি ওয়েবসাইটের প্রথম ইম্প্রেশন তৈরি হয় তার ডিজাইনের মাধ্যমে। বিশেষ করে সাইন-ইন বা লগইন পেজ হলো এমন একটি জায়গা যেখানে ব্যবহারকারীরা আপনার সাইটের সাথে প্রথমবার ব্যক্তিগতভাবে যুক্ত হয়। সাধারণ এবং একঘেয়ে লগইন পেজের বদলে যদি সেখানে থাকে চমৎকার এনিমেশন এবং আধুনিক ইউজার ইন্টারফেস (UI), তবে ভিজিটরদের কাছে আপনার সাইটের গ্রহণযোগ্যতা বহুগুণ বেড়ে যায়।
আজকের এই আর্টিকেলে আমরা আলোচনা করবো কীভাবে আপনি HTML, CSS এবং JavaScript ব্যবহার করে একটি প্রফেশনাল Animated Sliding Login & Sign-up Form তৈরি করতে পারেন। এই ডিজাইনটি বিশেষ করে ব্লগার (Blogger) এবং ওয়ার্ডপ্রেস (WordPress) ব্যবহারকারীদের জন্য অত্যন্ত কার্যকর।
কেন এই অ্যানিমেটেড লগইন ফর্মটি আপনার সাইটে ব্যবহার করবেন?
সাধারণত বেশিরভাগ ওয়েবসাইটে লগইন এবং রেজিস্ট্রেশনের জন্য আলাদা দুটি পেজ থাকে। কিন্তু এই স্লাইডিং ডিজাইনের বিশেষত্ব হলো—ইউজার একই ফ্রেমের মধ্যে থেকে সুইচ করে লগইন বা সাইন-আপ করতে পারে। এর প্রধান সুবিধাগুলো হলো:
ইউজার এক্সপেরিয়েন্স (UX): ব্যবহারকারীকে বারবার পেজ লোড করতে হয় না, ফলে সময় বাঁচে।
আধুনিক ডিজাইন: এটি দেখতে অনেকটা প্রিমিয়াম ওয়েব অ্যাপ্লিকেশনের মতো, যা আপনার সাইটের ব্র্যান্ড ভ্যালু বাড়ায়।
ফুল রেসপন্সিভ: এই ডিজাইনটি ডেস্কটপ, ট্যাবলেট এবং স্মার্টফোন—সব ধরনের ডিভাইসে অটোমেটিক অ্যাডজাস্ট হয়ে যায়।
ইন্টারেক্টিভ এনিমেশন: বাটনে ক্লিক করার সাথে সাথে ফর্মটি যেভাবে স্লাইড করে, তা ভিজিটরদের মধ্যে একটি প্রো-ফিল তৈরি করে।
এই ডিজাইনের মূল বৈশিষ্ট্যসমূহ (Key Features)
আমাদের এই প্রজেক্টে আমরা বেশ কিছু আধুনিক প্রযুক্তি ও ফিচারের সমন্বয় ঘটিয়েছি:
Font Awesome Icons: প্রতিটি ইনপুট বক্সের পাশে প্রাসঙ্গিক আইকন (যেমন: ইমেইলের জন্য খাম, পাসওয়ার্ডের জন্য তালা) ব্যবহার করা হয়েছে।
Google Fonts: এখানে 'Montserrat' ফন্ট ব্যবহার করা হয়েছে যা একটি ক্লিন এবং প্রফেশনাল লুক দেয়।
CSS3 Transitions: স্লাইডিং ইফেক্টটি একদম স্মুথ করার জন্য আধুনিক CSS অ্যানিমেশন ব্যবহার করা হয়েছে।
Mobile Switcher: ছোট পর্দার ডিভাইসের জন্য আমরা একটি বিশেষ 'Switch' অপশন রেখেছি, যাতে মোবাইল ইউজাররা কোনো সমস্যা ছাড়াই এটি ব্যবহার করতে পারে।
ব্যবহার বিধি: আপনার সাইটে কীভাবে এটি সেটআপ করবেন?
এই ডিজাইনটি আপনার সাইটে যুক্ত করা খুবই সহজ। নিচে ধাপে ধাপে নির্দেশনা দেওয়া হলো:
১. ব্লগার (Blogger) ব্যবহারকারীদের জন্য:
আপনি যদি ব্লগার ব্যবহার করেন, তবে আপনি এটি একটি আলাদা পেজ (Static Page) হিসেবে অথবা উইজেট হিসেবে ব্যবহার করতে পারেন।
আপনার ব্লগার ড্যাশবোর্ড থেকে Pages মেনুতে গিয়ে New Page তৈরি করুন।
এডিটরের বাম কোণ থেকে HTML View সিলেক্ট করুন।
নিচে দেওয়া সম্পূর্ণ সোর্স কোডটি কপি করে সেখানে পেস্ট করে দিন।
পেজটি পাবলিশ করুন এবং দেখুন আপনার সাইটে চমৎকার একটি লগইন ফর্ম তৈরি হয়ে গেছে।
২. ওয়ার্ডপ্রেস (WordPress) ব্যবহারকারীদের জন্য:
ওয়ার্ডপ্রেস সাইটে এটি যুক্ত করা আরও সহজ।
আপনার ওয়ার্ডপ্রেস এডিটরে গিয়ে Custom HTML ব্লকটি সিলেক্ট করুন।
কোডটি সেখানে পেস্ট করুন এবং আপনার থিমের সাথে সামঞ্জস্যপূর্ণ করতে প্রয়োজন হলে CSS কিছুটা পরিবর্তন করে নিন।
যারা এলিমেন্টর (Elementor) ব্যবহার করেন, তারা HTML Widget নিয়ে সেখানে এই কোডটি বসাতে পারেন।
সোর্স কোড ব্যবহারের নির্দেশিকা (Documentation)
আমরা কোডটিকে তিনটি প্রধান ভাগে বিভক্ত করেছি:
HTML (Structure): এটি ফর্মের মূল কাঠামো বা হাড়গোড় তৈরি করে। এখানে ইনপুট ফিল্ড, বাটন এবং টেক্সটগুলো সাজানো আছে।
CSS (Styling): এটি ফর্মের রং, আকার, আইকনের পজিশন এবং সবচেয়ে গুরুত্বপূর্ণ—স্লাইডিং এনিমেশন নিয়ন্ত্রণ করে।
JavaScript (Logic): যখন কেউ 'Sign Up' বা 'Sign In' বাটনে ক্লিক করে, তখন জাভাস্ক্রিপ্ট মূল কন্টেইনারে একটি 'Active' ক্লাস যোগ করে এনিমেশনটি শুরু করে।
বিশেষ দ্রষ্টব্য: এই ডিজাইনটি মূলত একটি ফ্রন্ট-এন্ড (Front-end) টেম্পলেট। আপনি যদি এটি দিয়ে সত্যি সত্যি ইউজার রেজিস্ট্রেশন বা লগইন করাতে চান, তবে আপনাকে এটি কোনো ব্যাক-এন্ড ল্যাঙ্গুয়েজ (যেমন: PHP, Firebase বা Node.js) এর সাথে কানেক্ট করতে হবে।
আপনার সাইটের জন্য কাস্টমাইজেশন টিপস
আপনি চাইলে এই কোডটি আপনার সাইটের থিমের সাথে মিলিয়ে কাস্টমাইজ করতে পারেন:
রং পরিবর্তন: কোডের ভেতরে যেখানে
#1a237e(নীল রং) আছে, সেটি পরিবর্তন করে আপনার পছন্দের কালার কোড বসিয়ে দিন।লোগো যুক্ত করা:
<h2>ট্যাগের ওপরে আপনার সাইটের লোগো বসিয়ে দিলে এটি আরও ব্র্যান্ডেড দেখাবে।এনিমেশন স্পিড: CSS-এর
transition: 0.6sঅংশটি পরিবর্তন করে আপনি এনিমেশনের গতি বাড়াতে বা কমাতে পারেন।
উপসংহার
একটি মানসম্মত ওয়েবসাইট মানেই হলো সেখানে ছোট ছোট ডিটেইলিংয়ের কাজ থাকা। এই অ্যানিমেটেড লগইন ফর্মটি আপনার সাইটকে অন্যদের থেকে আলাদা করবে। PDFPediaBD সবসময় চেষ্টা করে আপনাদের জন্য লেটেস্ট টেকনোলজি এবং শিক্ষামূলক রিসোর্স নিয়ে আসতে। আশা করি এই কোডটি আপনার প্রজেক্টে নতুন মাত্রা যোগ করবে।
কোডটি নিয়ে কোনো প্রশ্ন থাকলে বা সেটআপ করতে কোনো সমস্যা হলে নিচে কমেন্ট করে আমাদের জানান। আমরা আপনাকে সাহায্য করতে সবসময় প্রস্তুত।
সোর্স কোড এবং ডেমো (Source Code & Demo)
নিচে দেওয়া বাটন থেকে আপনারা লাইভ ডেমো দেখে নিতে পারেন এবং সরাসরি সোর্স কোডটি কপি করতে পারেন। আমাদের সাথে থাকার জন্য ধন্যবাদ।