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 اختيار ذكي جدًا 🚀