البرمجة

تصميم واجهة مستخدم: تحقيق حركات فعّالة بتفاعل بين شريط جانبي وشعار.

عند التفاعل مع تحريك العناصر في واجهة المستخدم، يصبح من الضروري فهم كيفية تحقيق تلك الحركات بشكل فعال وجذاب. في هذا السياق، نجد أن لديك صفحة واجهة مستخدم تتضمن شريط جانبي ورأس صفحة يحتوي على شعار (logo). الهدف هو تحريك الشعار عندما يتداخل الشريط الجانبي مع مكان الشعار.

مقالات ذات صلة

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

قد يكون لدينا شيفرة تحديد موضع الشريط الجانبي والتحقق من تداخله مع الشعار. على سبيل المثال:

html
html>
<html lang="ar">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        #sidebar {
            width: 270px;
            height: 100vh;
            position: fixed;
            left: -270px;
            background-color: #333;
            transition: left 0.3s ease;
        }

        #header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: #444;
            color: white;
            text-align: center;
            line-height: 60px;
            z-index: 2;
        }

        .head-logo {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 100px; /* افتراضي، قم بتعديلها وفقًا لحجم الشعار الخاص بك */
            height: 40px; /* افتراضي، قم بتعديلها وفقًا لحجم الشعار الخاص بك */
            background-color: #ffcc00; /* افتراضي، قم بتعديلها وفقًا لألوان الشعار الخاصة بك */
            transition: left 0.3s ease;
        }

        .move-logo {
            left: 320px; /* قم بضبط القيمة حسب الحاجة */
        }
    style>
head>

<body>
    <div id="sidebar">div>
    <div id="header">
        <div class="head-logo">div>
    div>

    <script>
        // تحديد عنصر الشعار
        var logo = document.querySelector('.head-logo');

        // تحديد عنصر الشريط الجانبي
        var sidebar = document.getElementById('sidebar');

        // تحديد الحد الأقصى لتحرك الشعار
        var maxLogoMove = 270; // يمكن تعديل هذه القيمة بناءً على عرض الشريط الجانبي

        // استماع لتغييرات في مكان الشريط الجانبي
        sidebar.addEventListener('transitionend', function () {
            if (sidebar.style.left === '0px') {
                logo.classList.add('move-logo');
            } else {
                logo.classList.remove('move-logo');
            }
        });

        // يمكنك أيضاً إضافة استماع لتغيير حجم الشاشة إذا كنت بحاجة إلى استجابة ديناميكية
        window.addEventListener('resize', function () {
            // قد يكون هناك حاجة إلى تحديث قيم maxLogoMove أو أي تعديلات أخرى بناءً على الاحتياجات
        });
    script>
body>

html>

في هذا السياق، يتم تحديد موقع الشعار بناءً على تحركات الشريط الجانبي. الشعار سيتحرك إلى اليسار إذا كان الشريط الجانبي يتحرك إلى اليمين، وذلك باستخدام أحداث الانتقال (transitions) وتغيير الفئات بواسطة Javascript.

يمكنك تخصيص الشيفرة بما يتناسب مع احتياجات وتصميم موقعك الخاص.

المزيد من المعلومات

في هذا السياق، يتم استخدام لغات البرمجة الويب الشائعة مثل HTML وCSS وJavascript لتحقيق التفاعلات المرغوبة في واجهة المستخدم. دعونا نوسع على بعض النقاط المهمة في هذا السياق.

HTML:

CSS:

  • position: fixed;: يثبت العناصر في مكانها على الشاشة أثناء التمرير.
  • transition: left 0.3s ease;: يضيف تأثير انتقالي لتحرك العناصر بسلاسة خلال 0.3 ثانية.
  • .move-logo: تُضاف إلى الشعار عندما يتحرك الشريط الجانبي إلى اليمين، مما يسمح بتحريك الشعار.

Javascript:

  • document.querySelector('.head-logo');: يحدد العنصر الذي يحتوي على الشعار.
  • document.getElementById('sidebar');: يحدد الشريط الجانبي.
  • sidebar.addEventListener('transitionend', function () {...});: يستمع لانتهاء التحولات على الشريط الجانبي لتفعيل التحقق من موقعه.

التحكم في الحركة:

  • left: -270px;: يبدأ الشريط الجانبي من اليسار بموقع يبلغ -270 بكسل.
  • .move-logo { left: 320px; }: يحدد موقع الشعار عندما يكون الشريط الجانبي في الموقع المناسب.

Responsive Design:

  • يمكن إضافة استماع لتغيير حجم الشاشة (window.addEventListener('resize', function () {...});) لضمان استجابة التصميم لتغييرات الشاشة.

نصائح إضافية:

  • يمكن تخصيص الألوان والأبعاد والأنماط حسب تصميم الموقع الخاص بك.
  • يمكن إضافة مزيد من الحالات والتحكم في التفاعلات بناءً على احتياجاتك.

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

الوسوم
زر الذهاب إلى الأعلى