أنشئ صفحة تسجيل دخول متحركة بشكل جميل باستخدام HTML وCSS وJavaScript

إن إنشاء صفحة تسجيل دخول متحركة وجذابة بصريًا يعد خطوة مهمة لأي موقع حديث أو تطبيق ويب. هذه الصفحة ليست مجرد وسيلة لإدخال البيانات، بل هي تجربة تفاعلية للمستخدم تضيف لمسة احترافية لموقعك.

في هذا المقال، سنتناول كيفية إنشاء نموذج تسجيل دخول متجاوب ومتعدد التأثيرات باستخدام HTML وCSS وJavaScript فقط، بدون أي مكتبات خارجية. سنوفر لك نموذجًا يعمل على جميع الأجهزة ويتميز بحركة سلسة وجذابة.

لماذا يجب أن تكون صفحة تسجيل الدخول متحركة؟

صفحة تسجيل الدخول هي واجهة المستخدم الأولى التي يتفاعل معها الزائر عند الوصول إلى الموقع. وجود تصميم متحرك يجعل الصفحة:

جذابة بصريًا: الحركة تجعل الصفحة ديناميكية وتلفت الانتباه للحقول المهمة.
تحسن تجربة المستخدم: المستخدم يشعر أن الموقع احترافي وسهل الاستخدام.
تشجع على التسجيل: نموذج جذاب يزيد احتمالية إدخال المستخدم بياناته وإكمال التسجيل.
متجاوب لجميع الأجهزة: باستخدام CSS وJavaScript يمكن تصميم الصفحة لتتناسب مع الموبايل والتابلت وسطح المكتب.

المميزات الأساسية للنموذج

✔ تصميم متجاوب بالكامل: يعمل على الموبايل، التابلت، والكمبيوتر.
✔ حركة سلسة للمحتوى: الحقول والأزرار تتحرك بطريقة جذابة عند التركيز أو المرور عليها بالماوس.
✔ حقول تسجيل أساسية: الاسم، البريد الإلكتروني، كلمة المرور، وتأكيد كلمة المرور.
✔ أزرار تفاعلية: تأثيرات hover وإشعارات عند التركيز.
✔ JavaScript خفيف: يستخدم لتفعيل تأثيرات الحركة والتنبيهات دون التأثير على سرعة الموقع.
✔ سهولة التعديل: يمكن تعديل الألوان، النصوص، أو إضافة حقول جديدة بسهولة.

طريقة الشرح بالفيديو

طريقة إنشاء الصفحة خطوة بخطوة

1. HTML – الهيكل الأساسي

ابدأ بإنشاء نموذج يحتوي على الحقول الأساسية:

<div class="container">  <div class="form-box login"> <form action="#"> <h1>Login</h1> <div class="input-box"> <input type="text" placeholder="Username" required> <i class="bx bxs-user"></i> </div> <div class="input-box"> <input type="password" placeholder="Password" required> <i class="bx bxs-lock-alt"></i> </div> <div class="forget-link"> <a href="#">Forget Password?</a> </div> <button type="submit" class="btn">Login</button> <p>Or login with social plateforms</p> <div class="social-icons"> <a href="#"><i class="bx bxl-google"></i></a> <a href="#"><i class="bx bxl-facebook"></i></a> <a href="#"><i class="bx bxl-github"></i></a> <a href="#"><i class="bx bxl-linkedin"></i></a> </div> </form> </div>  <div class="form-box register"> <form action="#"> <h1>Registration</h1> <div class="input-box"> <input type="text" placeholder="Username" required> <i class="bx bxs-user"></i> </div> <div class="input-box"> <input type="email" placeholder="Email" required> <i class="bx bxs-envelope"></i> </div> <div class="input-box"> <input type="password" placeholder="Password" required> <i class="bx bxs-lock-alt"></i> </div>  <button type="submit" class="btn">Register</button> <p>Or register with social plateforms</p> <div class="social-icons"> <a href="#"><i class="bx bxl-google"></i></a> <a href="#"><i class="bx bxl-facebook"></i></a> <a href="#"><i class="bx bxl-github"></i></a> <a href="#"><i class="bx bxl-linkedin"></i></a> </div> </form> </div>  <div class="toggle-box"> <div class="toggle-panel toggle-left"> <h1>Hello, Welcome!</h1> <p>Don't have an account?</p> <button class="btn register-btn">Register</button> </div> <div class="toggle-panel toggle-right"> <h1>Welcome Back!</h1> <p>Already have an account?</p> <button class="btn login-btn">Login</button> </div> </div> </div>

2. CSS – التصميم والتأثيرات

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(90deg, #faf9f6, #F8F8FF);
}

.container {
    position: relative;
    width: 850px;
    height: 550px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    margin: 20px;
    overflow: hidden;
}

.form-box {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    background: #ffff;
    display: flex;
    align-items: center;
    color: #1a1a1a;
    text-align: center;
    padding: 40px;
    z-index: 1;
    transition: .6s ease-in-out 1.2s, visibility 0s 1s;
}

.container.active .form-box {
    right: 50%;
}

.form-box.register {
    visibility: hidden;
}

.container.active .form-box.register {
    visibility: visible;
}

form {
    width: 100%;
}

.container h1 {
    font-size: 36px;
    margin: -10px 0;
}

.input-box {
    position: relative;
    margin: 30px 0;
}

.input-box input {
    width: 100%;
    padding: 13px 50px 13px 20px;
    background: #f6f6f6;
    /* border-bottom: 2px solid #eee; */
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.input-box input::placeholder {
    color: #888;
    font-weight: 400;
}

.input-box i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #888;
}

.forget-link {
    margin: -15px 0 15px;
}

.forget-link a {
    font-size: 14.5px;
    color: #1a1a1a;
    text-decoration: none;
}

.btn {
    width: 100%;
    height: 48px;
    /* background: #7494ec; */
    background: #25D7AD;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.container p {
    font-size: 14.5px;
    margin: 15px 0;
}

.social-icons {
    display: flex;
    justify-content: center;
}

.social-icons a {
    display: inline-flex;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 50%;
    font-size: 18px;
    color: #333;
    text-decoration: none;
    margin: 0 8px;
    transition: .5s;
}

.social-icons a:hover {
    color: #ffff;
    background: #25D7AD;
    border: 2px solid #fff;
}

/* TOGGLE BOX  */

.toggle-box {
    position: absolute;
    width: 100%;
    height: 100%;
}

.toggle-box::before {
    content: '';
    position: absolute;
    left: -250%;
    width: 300%;
    height: 100%;
    /* background: #7494ec; */
    background: #25D7AD;
    border-radius: 150px;
    z-index: 2;
    transition: 1.8s ease-in-out;
}

.container.active .toggle-box::before {
    left: 50%;
}

.toggle-panel {
    position: absolute;
    width: 50%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: .6s ease-in-out;
}

.toggle-panel.toggle-left {
    left: 0;
    transition-delay: 1.2s;
}

.container.active .toggle-panel.toggle-left {
    left: -50%;
    transition-delay: .6s;
}

.toggle-panel.toggle-right {
    right: -50%;
    transition-delay: .6s;
}

.container.active .toggle-panel.toggle-right {
    right: 0;
    transition-delay: 1.2s;
}

.toggle-panel p {
    margin-bottom: 20px;
}

.toggle-panel .btn {
    width: 160px;
    height: 46px;
    background: transparent;
    border: 2px solid #fff;
    box-shadow: none;
    transition: .5s;
}

.toggle-panel .btn:hover{
    background: #ffff;
    color: #25D7AD;
    border: none;
    outline: none;
}

@media screen and (max-width: 650px) {
    .container {
        height: calc(100vh - 40px);
    }

.form-box {
        bottom: 0;
        width: 100%;
        height: 70%;
    }

.container.active .form-box {
        right: 0;
        bottom: 30%;
    }

.toggle-box::before {
        left: 0;
        top: -270%;
        width: 100%;
        height: 300%;
        border-radius: 20vw;
    }

.container.active .toggle-box::before {
        left: 0;
        top: 70%;
    }

.toggle-panel {
        width: 100%;
        height: 30%;
    }

.toggle-panel.toggle-left {
        top: 0;
    }

.container.active .toggle-panel.toggle-panel.toggle-left {
        left: 0;
        top: -30%;
    }

.toggle-panel.toggle-right {
        right: 0;
        bottom: -30%;
    }

.container.active .toggle-panel.toggle-right {
        bottom: 0;
    }

}

@media screen and (max-width: 400px) {

.form-box {
        padding: 20px;
    }

.toggle-panel h1 {
        font-size: 30px;
    }
}

3. JavaScript – التفاعلات البسيطة

هذا الكود يجعل النموذج متجاوبًا ويظهر رسالة بسيطة عند الضغط على زر التسجيل.
يمكن إضافة تأكيد كلمة المرور أو رسائل خطأ بسهولة باستخدام JS.

نصائح لتحسين تجربة المستخدم

استخدام Placeholder واضح: اجعل كل حقل يوضح ما يجب إدخاله.
تأثير التركيز على الحقول: استخدم CSS لإبراز الحقل عند النقر عليه.
ألوان متناسقة: اجعل الخلفية والأزرار متناسقة مع هوية الموقع.
استجابة فورية: يمكن إضافة رسائل تحقق فورية للبيانات المدخلة.
حماية البيانات: لو لاحقًا ستربط النموذج بقاعدة بيانات، تأكد من استخدام HTTPS.

أماكن استخدام نموذج التسجيل

مواقع العضوية والمجتمعات الإلكترونية
المدونات التي تتطلب تسجيل للوصول لمحتوى خاص
تطبيقات الويب والخدمات عبر الإنترنت
نماذج الاشتراك في النشرات الإخبارية

الخلاصة

باستخدام HTML وCSS وJavaScript يمكنك إنشاء صفحة تسجيل دخول عصرية، متحركة، وجذابة دون الحاجة لمكتبات خارجية.
هذا النموذج:

سهل الاستخدام لجميع المستخدمين.
متجاوب مع جميع الأجهزة.
قابل للتعديل والتخصيص بسهولة.
يضيف لمسة احترافية لموقعك أو تطبيقك.

يمكنك الآن نسخ الكود وتجربة النموذج على موقعك، وتعديله حسب الهوية البصرية لموقعك.

Menu

Allito

الربح من الانترنت

تصميمات

كورس تصميم قالب بلوجر

تصميمات هيدر

مقالات تعليمية

بلوجر