شرح التمرير الرأسي والأفقي باستخدام fullPage.js

مقدمة عن fullPage.js

fullPage.js هي مكتبة جافاسكريبت شهيرة تتيح إنشاء مواقع ذات تمرير سلس بين الأقسام (divs) والشرائح (Slides). تعتمد هذه المكتبة على مفهوم "التمرير الكامل للصفحة" حيث يتم عرض قسم واحد كامل في كل مرة، مما يوفر تجربة مستخدم فريدة وجذابة.

مثال أساسي:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullPage.min.css">
</head>
<body>
  <div id="fullpage">
    <div class="section">القسم الأول</div>
    <div class="section">القسم الثاني</div>
    <div class="section">القسم الثالث</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullPage.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#fullpage').fullpage();
    });
  </script>
</body>
</html>

البدء باستخدام fullPage.js

لبدء الاستخدام تحتاج إلى:

jQuery (الإصدار 1.6.0 أو أحدث)
ملف CSS الخاص بالمكتبة
ملف JavaScript الخاص بالمكتبة

طريقة التثبيت عبر CDN:

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.15/fullpage.min.css">

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.15/fullpage.min.js"></script>

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

المميزات الرئيسية لـ fullPage.js

التمرير الرأسي والأفقي: تسمح بإنشاء هيكل متعدد المستويات
دعم الأجهزة المختلفة: تعمل على الحواسيب والأجهزة المحمولة
الرسوم المتحركة: تأثيرات انتقالية سلسة بين الأقسام
سهولة التخصيص: خيارات متعددة للتحكم في السلوك
دعم المتصفحات: تعمل على معظم المتصفحات الحديثة

إعداد fullPage.js

التثبيت

يمكن تثبيت fullPage.js بعدة طرق:

باستخدام CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

أو باستخدام npm

npm install fullpage.js

الهيكل الأساسي

<div id="fullpage">
    <div class="div">القسم الأول</div>
    <div class="div">القسم الثاني</div>
    <div class="div">
        <div class="slide">الشريحة 1</div>
        <div class="slide">الشريحة 2</div>
        <div class="slide">الشريحة 3</div>
    </div>
    <div class="div">القسم الرابع</div>
</div>

التمرير الرأسي

التمرير الرأسي هو الوظيفة الأساسية لـ fullPage.js، حيث ينقل المستخدم بين الأقسام الرئيسية للموقع.

التهيئة الأساسية

new fullpage('#fullpage', {
    // التهيئة هنا
    autoScrolling: true,
    scrollHorizontally: true
});

خيارات التمرير الرأسي

navigation: إظهار شريط التنقل
navigationPosition: موقع شريط التنقل
navigationTooltips: تلميحات لأسماء الأقسام
showActiveTooltip: إظهار تلميح للقسم النشط
slidesNavigation: إظهار تنقل للشرائح

التمرير الأفقي (الشرائح)

يتيح fullPage.js إنشاء شرائح أفقية داخل كل قسم رأسي.

هيكل الشرائح

<div class="div">
    <div class="slide">الشريحة 1</div>
    <div class="slide">الشريحة 2</div>
    <div class="slide">الشريحة 3</div>
</div>

خيارات التمرير الأفقي

controlArrows: أسهم التحكم بين الشرائح
loopHorizontal: تكرار الشرائح بشكل دائري
slideSelector: تحديد عناصر الشرائح
animateAnchor: تحريك الانتقال عند استخدام الروابط

الجمع بين التمرير الرأسي والأفقي

يمكن الجمع بين النوعين لإنشاء تجربة متكاملة:

new fullpage('#fullpage', {
    divsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', '#f2f2f2'],
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
    menu: '#menu',
    scrollingSpeed: 1000,
    
    // خيارات الشرائح
    controlArrows: true,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
});

التحكم البرمجي

توفر fullPage.js مجموعة من الدوال للتحكم في التمرير:

// الانتقال إلى قسم معين
fullpage_api.moveTo('divName', slideIndex);

// الانتقال إلى الشريحة التالية
fullpage_api.moveSlideRight();

// الانتقال إلى الشريحة السابقة
fullpage_api.moveSlideLeft();

الأحداث والCallback Functions

يمكن ربط دوال بأحداث معينة:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log("تم تحميل القسم: " + destination.index);
    },
    onLeave: function(origin, destination, direction){
        console.log("مغادرة القسم: " + origin.index);
    },
    afterSlideLoad: function(div, origin, destination, direction){
        console.log("تم تحميل الشريحة: " + destination.index);
    }
});

التخصيص المتقدم

CSS المخصص

/* تغيير مظهر شريط التنقل */
#fp-nav ul li a span {
    background: #ff0000;
}

/* تغيير مظهر الأسهم */
.fp-controlArrow.fp-prev {
    border-color: transparent #ff0000 transparent transparent;
}
.fp-controlArrow.fp-next {
    border-color: transparent transparent transparent #ff0000;
}

التكامل مع مكتبات أخرى

يمكن دمج fullPage.js مع مكتبات مثل:

Animate.css: لإضافة تأثيرات حركية
Waypoints: لتنفيذ أكواد عند الوصول لأقسام معينة
ScrollMagic: لتحكم متقدم في التمرير

الاستجابة للأجهزة المحمولة

fullPage.js توفر خيارات للتحكم في السلوك على الأجهزة الصغيرة:

new fullpage('#fullpage', {
    responsiveWidth: 900,
    responsiveHeight: 600,
    responsiveSlides: true,
    
    // تعطيل بعض الميزات على الأجهزة المحمولة
    parallax: true,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
});

أفضل الممارسات

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

المشاكل الشائعة والحلول

مشاكل في التمرير السلس

التأكد من عدم وجود overflow: hidden في العناصر الأب
التحقق من إصدار المكتبة

التضارب مع مكتبات أخرى

استخدام noConflict إذا لزم الأمر
ترتيب تحميل المكتبات بشكل صحيح

مشاكل في الأجهزة المحمولة

ضبط خيارات responsive بشكل مناسب
اختبار على أجهزة فعلية

أمثلة وتطبيقات عملية

1مثال موقع شخصي

new fullpage('#fullpage', {
    menu: '#menu',
    anchors: ['home', 'about', 'work', 'contact'],
    divsColor: ['#1e1e1e', '#2d2d2d', '#3c3c3c', '#4b4b4b'],
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['Home', 'About', 'Work', 'Contact'],
    showActiveTooltip: true,
    scrollingSpeed: 1000
});

2مثال عرض منتجات

new fullpage('#fullpage', {
    autoScrolling: true,
    fitTodiv: false,
    scrollHorizontally: true,
    divsColor : ['#fff', '#f2f2f2', '#fff', '#f2f2f2'],
    controlArrows: false,
    slidesNavigation: true,
    
    afterLoad: function(origin, destination, direction){
        if(destination.index == 2){
            document.querySelector('.product-details').classList.add('animated', 'fadeIn');
        }
    }
});

الخلاصـــة

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

باستخدام الأدوات والإمكانيات التي توفرها fullPage.js، يمكن تحويل الأفكار الإبداعية إلى واقع ملموس، مع ضمان تجربة مستخدم سلسة وممتعة عبر مختلف الأجهزة والأنظمة.

استكشف في مدونة أوعي وشك عالم الابتكار

شرح التمرير الرأسي والأفقي باستخدام fullPage.js

شرح التمرير الرأسي والأفقي باستخدام fullPage.js

مقدمة عن fullPage.js

البدء باستخدام fullPage.js

المميزات الرئيسية لـ fullPage.js

إعداد fullPage.js

التثبيت

باستخدام CDN

أو باستخدام npm

الهيكل الأساسي

التمرير الرأسي

التهيئة الأساسية

خيارات التمرير الرأسي

التمرير الأفقي (الشرائح)

هيكل الشرائح

خيارات التمرير الأفقي

الجمع بين التمرير الرأسي والأفقي

التحكم البرمجي

الأحداث والCallback Functions

التخصيص المتقدم

CSS المخصص

التكامل مع مكتبات أخرى

الاستجابة للأجهزة المحمولة

أفضل الممارسات

المشاكل الشائعة والحلول

مشاكل في التمرير السلس

التضارب مع مكتبات أخرى

مشاكل في الأجهزة المحمولة

أمثلة وتطبيقات عملية

1مثال موقع شخصي

2مثال عرض منتجات

الخلاصـــة

كيف كان المقال؟

كاتب المقال

إرسال تعليق

اوعي وشك