Lenis Library: أفضل Smooth Scroll لمواقع الويب

ليه تستخدم Lenis Library في موقعك؟ ​

وأنت بتتصفح أي موقع، أول حاجة بتحسّها من غير ما تاخد بالك هي الـ Scroll.
لو الحركة تقيلة أو متقطعة، إحساسك بالموقع كله بيبوظ حتى لو التصميم تحفة.
وهنا ييجي دور Lenis Library

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

• مواقع الشركات
• Landing Pages
• Portfolios اللي بتركّز على تجربة المستخدم

---

​

بتستخدم Lenis في إيه بالظبط؟ ​

Lenis مناسبة جدًا لو عايز:

• تحسين تجربة المستخدم (UX)
• Smooth Scroll مريح للعين
• تحكم كامل في حركة الصفحة
• موقع يسيب انطباع قوي من أول زيارة

الـ Scroll مش تفصيلة صغيرة، ده جزء أساسي من إحساس المستخدم بالموقع.

---

​

فكرة الكود باختصار ​

الفكرة كلها إننا:

• نشغّل Lenis مرة واحدة
• ونستخدمها في الموقع كله

علشان كده بنحطها في ملف utils:

• عشان تبقى reusable
• سهلة التحكم
• ومن غير تكرار أو مشاكل أداء

فيه instance واحدة بس من Lenis
لو موجودة → نستخدمها
لو مش موجودة → ننشئها
الأسلوب ده بيخلّي الكود أنضف وأثبت

---

​

ليه الإعدادات دي مهمة؟ ​

الإعدادات هي اللي بتحدد إحساس الحركة:

• سرعة الانتقال
• نعومة الـ easing
• التفاعل مع الماوس والموبايل

النتيجة؟
Scroll طبيعي
مريح
لا بطيء ولا مزعج

---

​

ليه بنستخدم Animation Loop؟ ​

Lenis بتشتغل مع requestAnimationFrame
وده بيخليها متزامنة مع أي animation في الصفحة.
وده معناه:

• حركة أنعم
• أداء أفضل
• تجربة مستخدم ثابتة

---

​

تشغيل Lenis على مستوى الموقع ​

في ملف الـ root:

• Lenis بتشتغل أول ما الصفحة تفتح
• وبتبقى متاحة على window

كده تقدر تتحكم في الـ scroll من أي مكان:

• زرار
• event
• interaction معين

كده Lenis شغالة فعليًا في الموقع كله

---

​

مثال كود: تفعيل Lenis بشكل احترافي ​

import Lenis from '@studio-freight/lenis';

let lenisInstance = null;

export function getLenis() {
  if (!lenisInstance) {
    lenisInstance = new Lenis({
      duration: 1.2,
      smooth: true,
      smoothTouch: false,
    });

    function raf(time) {
      lenisInstance.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);
  }

  return lenisInstance;
}

---

​

التحكم في Scroll بعنصر مخصص ​

مثال بسيط: زرار Scroll To Top
المنطق:

• لو Lenis موجودة → نستخدمها
• لو مش موجودة → نرجع للـ scroll العادي

const btn = document.querySelector('#scrollTop');

btn.addEventListener('click', () => {
  if (window.lenis) {
    window.lenis.scrollTo(0);
  } else {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
});

الأسلوب ده بيخلّي الكود: مرن - آمن - احترافي

---

​

الخلاصة ​

Lenis مش مجرد مكتبة Scroll
دي أداة بتحسّن تجربة المستخدم وبتدي للموقع إحساس هادي وPremium
لو بتشتغل Frontend وعايز مستوى شغلك يعلى خطوة:
Lenis Library اختيار ذكي جدًا