---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%AA%D8%A8%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D9%83'
title: 'تحريك العناصر عند التمرير أو التحويم أو النقر | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:38:34+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  يمكنكم جعل مقطع أو صف أو أي عنصر محتوى يتحرك. فيتلاشى عنوان صعودًا بينما
  يُمرَّر إلى العرض، ويتبعه زر بعد لحظات، أو ينبض أيقونة عند التحويم. ويحمل كل
  منها لوحة الحركة في إعداداته. يتلاشى المثال في عنوان، ثم زر تسجيل بعد
  تأخير قصير.
  يتلاشى الفيديو في زر وعنوان بينما يدخل المقطع إلى العرض.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'تحريك العناصر عند التمرير أو التحويم أو النقر'
      description: |-
        يمكنكم جعل مقطع أو صف أو أي عنصر محتوى يتحرك. فيتلاشى عنوان صعودًا بينما
        يُمرَّر إلى العرض، ويتبعه زر بعد لحظات، أو ينبض أيقونة عند التحويم. ويحمل كل
        منها لوحة الحركة في إعداداته. يتلاشى المثال في عنوان، ثم زر تسجيل بعد
        تأخير قصير.
        يتلاشى الفيديو في زر وعنوان بينما يدخل المقطع إلى العرض.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:38:34+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%AA%D8%A8%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D9%83'
      articleSection: 'أدلة التصميم'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%AA%D8%A8%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D9%83'
      description: |-
        يمكنكم جعل مقطع أو صف أو أي عنصر محتوى يتحرك. فيتلاشى عنوان صعودًا بينما
        يُمرَّر إلى العرض، ويتبعه زر بعد لحظات، أو ينبض أيقونة عند التحويم. ويحمل كل
        منها لوحة الحركة في إعداداته. يتلاشى المثال في عنوان، ثم زر تسجيل بعد
        تأخير قصير.
        يتلاشى الفيديو في زر وعنوان بينما يدخل المقطع إلى العرض.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[بناء الصفحات](/ar/hc/documentation/learn-dxpr-builder/build) /[تنسيق العناصر](/ar/hc/documentation/learn-dxpr-builder/element-settings) /[أدلة التصميم](/ar/hc/documentation/learn-dxpr-builder/design/overview) # تحريك العناصر عند التمرير أو التحويم أو النقر.

 تعلّم DXPR Builderبناء الصفحاتتنسيق العناصرأدلة التصميم

   ## في هذا الدليل

 أدلة ذات صلة

- [جعل العناصر تتفاعل عند التحويم](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%AA%D8%A3%D8%AB%D9%8A%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%85)
- [منح مقطع لونًا أو صورة أو تدرجًا](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AE%D9%84%D9%81%D9%8A%D8%A7%D8%AA)
- [إضافة تخطيط كاروسيل](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7/%D8%AA%D8%AE%D8%B7%D9%8A%D8%B7-%D9%83%D8%A7%D8%B1%D9%88%D8%B3%D9%8A%D9%84)

يمكنكم جعل مقطع أو صف أو أي عنصر محتوى يتحرك. فيتلاشى عنوان صعودًا بينما يُمرَّر إلى العرض، ويتبعه زر بعد لحظات، أو ينبض أيقونة عند التحويم. ويحمل كل منها لوحة **الحركة** في إعداداته. يتلاشى المثال في عنوان، ثم زر تسجيل بعد تأخير قصير.

يتلاشى الفيديو في زر وعنوان بينما يدخل المقطع إلى العرض.

  ## تلاشي عنوان وزر

1. انقروا **إضافة عناصر** في منطقة المحتوى الفارغة واختاروا **مقطعًا** من تبويب **التخطيط**.
2. حوّموا فوق المقطع وافتحوا **المزيد > الإعدادات**.
3. ضمن **فئات HTML**، اختاروا **توسيط النص** وانقروا **حفظ**.
4. انقروا **+** على المقطع واختاروا **زرًا** من تبويب **المحتوى**. فتُفتَح إعداداته.
5. اكتبوا `Register now` في **العنوان** و`/register` في **الرابط**.
6. افتحوا لوحة **الحركة** واضبطوا **بدء الحركة** على **عند الظهور**.
7. اضبطوا **الحركة الداخلة** على **fadeInUp**.
8. ضمن **مخفي**، حدّدوا **قبل الحركة الداخلة**.
9. اضبطوا **تأخير الدخول** على 600 وانقروا **حفظ**.
10. انقروا **+** على المقطع مجددًا واختاروا **نصًا** من تبويب **المحتوى**. فيقع فوق الزر.
11. اكتبوا عنوانًا، مثل `Open day 2026`، واضبطوه على **العنوان 2** في شريط أدوات المحرّر.
12. افتحوا لوحة **الحركة**. اختاروا **عند الظهور** و**fadeInUp** و**قبل الحركة الداخلة**، كما للزر.
13. اضبطوا **المدة** على 800 وانقروا **حفظ**.
14. انقروا **حفظ** على شريط الأدوات.
15. افتحوا قائمة العرض (أيقونة العين على شريط الأدوات) واختاروا **معاينة**.

## مؤثرات إضافية للتجربة

- **الكشف بالتمرير:** **عند الظهور** و**fadeInUp** و**قبل الحركة الداخلة** و**مدة** 800.
- **بطاقات متدرجة:** المؤثر نفسه على ثلاث بطاقات، مع **تأخير دخول** 0 و200 و400.
- **نبضة لفت:** **عند الظهور** و**pulse** و**لا نهائي** مفعّل و**مدة** 1500.
- **نبضة التحويم:** **عند التحويم** و**pulse** و**رقم الأصل** 0، فيتفاعل العنصر نفسه فقط.
- **كشف التبويب:** **عند التشغيل** و**fadeIn** على العناصر داخل تبويب. وهي تعمل في كل مرة يُفتَح فيها التبويب.

## ما الذي ترونه

عندما تحفظون النص، يشغّل المحرّر المؤثرين: فيتلاشى العنوان صعودًا عبر 800 مللي ثانية ويتبعه الزر بعد 600 مللي ثانية. ويرى الزوار الشيء نفسه بينما يُمرَّر المقطع إلى العرض، مرة لكل تحميل صفحة. ويبقى كلاهما غير مرئي حتى يبدأ مؤثره، لأن **قبل الحركة الداخلة** محدد.

## الإعدادات

| الإعداد | ما يفعله | الافتراضي |
|---|---|---|
| **بدء الحركة** | متى يعمل المؤثر: **عند الظهور** (يُمرَّر إلى العرض) أو **عند التحويم** أو **عند النقر** أو **عند التشغيل** (عندما تُفتَح شريحة الدوّار أو التبويب أو المبدّل الذي يحمل العنصر) | **دون حركة** |
| **الحركة الداخلة** | مؤثر الدخول: تلاشيات وانزلاقات وتقريبات وانقلابات ومؤثرات لفت مثل الارتداد والنبض والاهتزاز | **دون حركة** |
| **الحركة الخارجة** | مؤثر الخروج، من القائمة نفسها. يظهر لـ **عند التحويم** و**عند التشغيل** فقط. | **دون حركة** |
| **مخفي** | **قبل الحركة الداخلة** تُبقي العنصر غير مرئي حتى يعمل مؤثره. وتخفي **بعد الحركة الداخلة** المؤثر بعد انتهائه. | لا هذا ولا ذاك |
| **لا نهائي** | يكرّر المؤثر دون نهاية | مغلق |
| **حدّ الظهور** | لـ **عند الظهور**: ما مدى انخفاض بدء المؤثر تحت الشاشة، بالنسبة المئوية لارتفاع الشاشة. يبدؤه 0 بينما يُمرَّر العنصر إلى العرض؛ ويبدؤه 100 قبل ذلك بارتفاع شاشة واحدة. | 100 |
| **المدة** | طول المؤثر، من 0 إلى 3000 مللي ثانية | 1000 |
| **تأخير الدخول** | الانتظار قبل عمل الدخول، حتى 10000 مللي ثانية | 0 |
| **تأخير الخروج** | الانتظار قبل عمل الخروج، حتى 10000 مللي ثانية | 0 |
| **رقم الأصل** | لـ **عند التحويم** و**عند النقر**: أي عنصر يشير إليه الزائر أو ينقره. فـ 0 هو العنصر نفسه، و1 أصله، و2 أصل الأصل. | 1 |

لا تحمل الأعمدة لوحة **حركة**. ولا تحملها التبويبات والمبدّلات والشرائح المفردة داخل عناصر التخطيط. فحرّكوا العنصر داخلها بدل ذلك.

## إذا لم تروا الحركة

- **العنصر لا يظهر أبدًا.** **قبل الحركة الداخلة** تخفي العنصر حتى يعمل مؤثره، لكن **الحركة الداخلة** هي **دون حركة**. اختاروا مؤثرًا في **الحركة الداخلة**.
- **عمل المؤثر مرة وتوقف.** **عند الظهور** يعمل مرة لكل تحميل صفحة. أعيدوا تحميل الصفحة لرؤيته مجددًا، أو شغّلوا **لا نهائي** لمؤثر يتكرر.
- **يبدأ المؤثر قبل وصول الزائر إلى العنصر.** **حدّ الظهور** مرتفع: فعند 100، يبدأ المؤثر قبل دخول العنصر إلى العرض بارتفاع شاشة واحدة. اضبطوه على 0 في لوحة **الحركة**.
- **يبدأ المؤثر عند التحويم قرب العنصر.** **رقم الأصل** هو 1، فيستمع الأصل للمؤشر. اضبطوا **رقم الأصل** على 0.

## ما الخطوة التالية؟

- [مؤثرات التحويم](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%AA%D8%A3%D8%AB%D9%8A%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%85): تغيير الألوان أو الظلال أو الشفافية بينما يستقر المؤشر على عنصر.
- [الخلفيات](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85/%D8%A7%D9%84%D8%AE%D9%84%D9%81%D9%8A%D8%A7%D8%AA): منح المقطع المتحرك لونًا أو صورة أو تدرجًا.
- [تخطيط الدوّار](/ar/hc/documentation/learn-dxpr-builder/layout/carousel-layout): تشغيل مؤثرات **عند التشغيل** في كل مرة تُفتَح فيها شريحة.