الخلفيات والتأثيرات·متوسط
ظهور تدريجي عند السحب
Fade + slide-up عند دخول العنصر إلى الشاشة.
نصّ البرومبت
أضف حركة scroll reveal:
- استخدم framer-motion + whileInView.
- initial: { opacity: 0, y: 20 }، whileInView: { opacity: 1, y: 0 }.
- duration: 0.5، ease: [0.22, 1, 0.36, 1].
- viewport: { once: true, margin: '-80px' }.
- لا تطبّقها على كل عنصر — فقط العناوين ورؤوس الأقسام.وسوم
framer-motionscroll
كيف تخصّصه لفكرتك؟
- استبدل أسماء العناصر والألوان بما يناسب هوية منتجك.
- أضف قيوداً واضحة (مثل: بدون خلفيات متدرّجة، استخدم توكنز styles.css).
- بعد التنفيذ، راجع النتيجة على الجوال والسطح المكتبي.
محتوى مرتبط
الخلفيات والتأثيرات · متوسط
خلفية Mesh Gradient هادئة
خلفية متعدّدة الألوان بأسلوب Stripe.
الخلفيات والتأثيرات · متقدّم
طبقة ضجيج للخلفية
grain خفيف يعطي الإحساس التحريري.
الخلفيات والتأثيرات · مبتدئ
خلفية شبكة نقطيّة
نمط dot-grid ناعم كأنّه ورق مربّعات.
الخلفيات والتأثيرات · متوسط
بطاقة زجاجية هادئة
Glassmorphism بلا مبالغة.