التحدي
كيف تبيع ٤٨ منزلاً لم يُبنَ منها حجر بعد؟ المشتري هنا لا يشتري غرفاً — يشتري مكانة وندرة وثقة في مطوّر لم يرَ عمله. التحدي: صفحة واحدة تبني هذا الشعور بالكامل، وتنتهي بخطوة واحدة واضحة: سجّل اهتمامك قبل أن يُفتح الباب لغيرك.
الحل
فخامة بالحذف لا بالإضافة
مساحات بيضاء واسعة، طباعة عربية أنيقة، ولوحة ترابية هادئة — الصفحة تهمس بدل ما تصرخ، فتبدو العلامة واثقة وباهظة بلا ادّعاء.
سرد يقود للتسجيل
الرؤية ← المخطط ← المساكن ← الحياة ← المعرض ← التسجيل. كل قسم يرفع الرغبة درجة، وينتهي المسار عند نموذج واحد لا يشتّت.
ندرة صادقة تُحرّك القرار
«المرحلة الأولى تُطرح بالدعوة وحدها» و«المواعيد محدودة» — رسائل ندرة مبنية في التصميم نفسه، مع واتساب مباشر لمن يريد الآن.
بالأرقام
أربع مشكلات، وكلها حركة أخذت أكثر من حقها
3.27 ثانية ضائعة بسبب أنميشن
نص الهيرو كان يُشحن بشفافية صفر ويكشفه GSAP بعد تحميل الجافاسكربت. القياس أظهر 3.27 ثانية من «تأخير رسم العنصر» على عنصر LCP نفسه. نقلت حركة الدخول إلى CSS @keyframes: تبدأ بمجرد قراءة ملف الأنماط، أي قبل أول رسم، فصارت الحركة لا تكلّف LCP شيئاً غير مدّتها.
وأضفت للمشروع سكربت يقيس LCP حتى لا يعود الخطأ بصمت.
محتوى يختفي إذا لم تشتغل الحركة
قاعدة الكشف كانت تبدأ العناصر بشفافية صفر — فإذا لم يُطلَق ScrollTrigger لأي سبب، يبقى عمود كامل من المحتوى غير مرئي وهو يحجز مكانه. القاعدة الجديدة: المحتوى ظاهر افتراضياً، والحركة تحسين فوقه لا شرط لظهوره. وطُبّق المبدأ نفسه على قائمة الجوال.
أي محتوى يعتمد ظهوره على نجاح أنميشن، سيختفي يوماً ما.
أنميشن يُعرض لا أحد
رسم المخطط (مجرى الوادي، الدرعية، قطعة الأرض) كان مربوطاً بعنصر يتحرك مع السكرول، بينما المخطط نفسه ثابت على الديسكتوب — فيكتمل الرسم بعد أن يغادر المخطط الشاشة. أعدت ربط الحركة بالمخطط نفسه، فيُرسم وهو أمام الزائر.
الحركة التي لا يراها أحد كلفة بلا فائدة.
اختر معلماً، فيعود المخطط إليك
على الجوال المخطط غير ثابت، فالضغط على معلم من القائمة كان يرسم اتجاهه على مخطط خرج من الشاشة. الآن الاختيار يعيد المخطط للعرض معه. وعلى الديسكتوب لا يتحرك شيء: المخطط ثابت وظاهر أصلاً، وتحريك الصفحة هناك سيكون إزعاجاً.
وخطوط الاتجاه تنتهي داخل مخطط بعرض 375px دون أن تتجاوزه.
ما سُلِّم فعلياً
- هيرو بدخول CSS لا يؤخّر الرسم
- قسم الرؤية
- مخطط تفاعلي بمعالم واتجاهات
- المساكن — ٤ أنماط سكن
- المرافق
- معرض الصور
- نموذج تسجيل اهتمام
- تواصل واتساب مباشر
- تبديل فوري بين العربية والإنجليزية
- احترام إعداد «تقليل الحركة»
الدرس الذي بقي
الحركة في هذا المشروع جزء من إحساس الفخامة — لكن كل مشكلة كبيرة فيه كانت حركة أخذت أكثر من حقها: أخّرت الرسم، أو أخفت المحتوى، أو اشتغلت لا أحد. فصار المبدأ واضحاً: الحركة تحسين فوق صفحة تعمل بدونها.
المحتوى يظهر أولاً، والحركة تأتي فوقه.
النتائج — قياسات Lighthouse حقيقية
من داخل الصفحة
عندك مشروع عقاري تبي تبيعه؟
خلينا نبني صفحة تبني الرغبة وتجيبلك مهتمّين حقيقيين — مش مجرد زوار.
تواصل معي