الوجبات السريعة الرئيسية
- تأثيرات تمرير العنصر في محرر المخزون هي ستة عناصر تحكم ضمن Advanced > Motion Effects > Scrolling Effects (التمرير العمودي، والتمرير الأفقي، والشفافية، والطمس، والتدوير، والتوسع)، وكل عنصر يحرك عنصرًا واحدًا.
- تعد عناصر التحكم في Scrolling Effects إحدى ميزات Elementor Pro، ولا يحتوي المكون الإضافي Elementor 4.3.2 المجاني عليها.
- تأثيرات تمرير الصور الـ 16 الموجودة على هذه الصفحة هي عناصر واجهة مستخدم Master Addons Widget Builder التي تثبت مرحلة ملء الشاشة وتحريك مجموعة كاملة من الصور مقابل موضع التمرير، بما في ذلك مكعب ثلاثي الأبعاد وكتاب تقليب الصفحات ومجموعة بطاقات التراص.
- تحتوي كل أداة من عناصر واجهة المستخدم الستة عشر على تنزيل مضغوط خاص بها يحتوي على ملف JSON واحد وREADME، ويتم استيراد JSON من خلال Master Addons > Widget Builder > Import Widget، الذي يقبل ملفات.json فقط.
- تشتمل كل واحدة من الأدوات الستة عشر على قاعدة الحركة المخفضة المفضلة، لذلك يحصل الزائرون الذين يقومون بإيقاف تشغيل الحركة في نظام التشغيل الخاص بهم على تخطيط ثابت بدلاً من الرسوم المتحركة.
تأثيرات التمرير Elementor، كما يقابلها معظم الأشخاص، هي عناصر التحكم في تأثيرات التمرير في لوحة تأثيرات الحركة: التمرير الرأسي، والتمرير الأفقي، والشفافية، والتمويه، والتدوير، والقياس. يدفع كل واحد صورة أو عنوانًا واحدًا أثناء تحرك الصفحة، وهذا هو أقصى ما يصل إليه. تثبيت قسم بينما يدور المكعب بداخله هو أبعد من ذلك.
يعرض هذا المنشور 16 صورة متحركة للتمرير تعمل على هذا النطاق الأكبر. كل واحدة منها عبارة عن أداة جاهزة لبرنامج Master Addons Widget Builder مع عرض توضيحي مباشر يمكنك فتحه قبل تثبيت أي شيء. ستجد أدناه ما يفعله كل تأثير، ونوع الموقع الذي يناسبه، وكيفية استيراد المجموعة، وما يجب التحقق منه للتأكد من السرعة وإمكانية الوصول.
جدول المحتويات
ما يمكن أن تفعله تأثيرات التمرير Elementor بمفردها
تعمل تأثيرات التمرير الخاصة بـ Elementor على تغيير خاصية واحدة لعنصر واحد أثناء قيام الزائر بالتمرير. يمكنك تحديد عنصر واجهة مستخدم أو حاوية، وفتحها متقدم > تأثيرات الحركة، قم بتشغيل تأثيرات التمرير، واختر من بين ستة خيارات. صفحة مساعدة تأثيرات الحركة الخاصة بـ Elementor يسردها على أنها التمرير العمودي، والتمرير الأفقي، والشفافية، والطمس، والتدوير، والقياس.
تنتمي عناصر التحكم هذه إلى Elementor Pro. لقد تحققنا من البرنامج الإضافي Elementor 4.3.2 المجاني وعناصر التحكم في التمرير غير موجودة فيه.
تأثير التمرير يعرف فقط عن العنصر الخاص به ومنفذ العرض. ليس لديه طريقة لتثبيت قسم في مكانه أثناء تغير المحتوى الموجود بداخله، ولا يمكنه تنسيق عشر صور حتى تصل بالترتيب. من السهل إعداد المنظر على صورة البطل بهذه الطريقة. تحتاج الصورة التي تنقسم إلى قطع ألغاز ويتم إعادة تجميعها أثناء القراءة إلى أداة مخصصة، وهو ما يغطيه باقي هذا المنشور.
إذا كان المنظر البسيط هو كل ما تحتاجه، فإن امتداد ريلاكس في الإضافات الرئيسية يتعامل معها، ولدينا نظرة عامة على الرسوم المتحركة يغطي تأثيرات الدخول والعائمة.
ما تحتاجه لتشغيل هذه الأدوات
أنت بحاجة إلى Elementor وMaster Addons وWidget Builder. يعد المكون الإضافي Elementor المجاني كافيًا على جانب Elementor، لأنه لا يستخدم أي من هذه التصميمات عناصر واجهة المستخدم Elementor Pro أو لوحة تأثيرات الحركة الخاصة به.
يتم استيراد الأدوات وتحريرها في منشئ القطعة، وهي إحدى ميزات Master Addons Pro. الخطط على صفحة التسعير. كل تصميم أدناه له رابط تنزيل خاص به بجوار العرض التوضيحي المباشر، ولا توجد بوابة بريد إلكتروني.
سوف تريد أيضا الصور الخاصة بك. تستخدم العروض التوضيحية المجال العام والصور المرخصة بشكل مفتوح، وكل عنصر واجهة مستخدم يحتوي على حقول صور أو مكرر، لذا يستغرق تبديلها بضع دقائق.
لا تحتاج العروض التوضيحية المباشرة إلى تثبيت أي شيء. افتح واحدًا وقم بتمريره بحجمين للنافذة، وهي أسرع طريقة لمعرفة ما إذا كان نمط الحركة يناسب المحتوى الخاص بك.
هل تريد إنشاء أداة التمرير الخاصة بك؟ ال منشئ عناصر واجهة المستخدم الرئيسية يحول HTML وCSS وJavaScript إلى عنصر واجهة مستخدم Elementor مع عناصر التحكم الخاصة بالمحتوى والنمط.
16 تأثير تمرير الصورة لـ Elementor
تنقسم تأثيرات تمرير الصور الستة عشر إلى خمس مجموعات: الكشف المثبت، والكائنات ثلاثية الأبعاد، وأسطح البطاقات، والمعارض التي لا نهاية لها، وتخطيطات الفهرس أو المتجر. يستخدم معظمهم نفس الأساس. تمنح الأداة نفسها مدرجًا طويلًا، وتثبت مسرحًا بشاشة واحدة بداخله مع وضع لزج، وتقرأ مدى التمرير عبر المدرج لقيادة الرسوم المتحركة. قم بالتمرير للخلف وكل شيء يتم تشغيله في الاتجاه المعاكس.
تكشف الصورة المثبتة
هؤلاء الأربعة يحتفظون بإطار ثابت ويغيرون ما بداخله. إنها تناسب الصفحات الطويلة حيث تأتي كل صورة مع فقرة.
1. مؤشر الفتحة
يبدأ كل إدخال كشريط أفقي رفيع ويفتح على صورة كاملة عندما يصل إلى منتصف الشاشة، بالطريقة التي يفتح بها مصراع الأوراق. يقع العنوان عبر الصورة وتتناوب الإدخالات يسارًا ويمينًا أسفل الصفحة. يظل الإطار مثبتًا بينما يمر نصه، ثم يتركه.
إنها صورة يتم الكشف عنها على التمرير بأرضية داكنة، لذا فهي تضفي لمسة جمالية على التصوير الليلي ولقطات المنتج باللون الأسود. أربعة إلى ستة إدخالات هي النطاق المريح.
2. إطار لوح خشبي
يظل إطار واحد ثابتًا على اليمين بينما يتم تمرير النسخة على اليسار. ومع وصول كل كتلة جديدة من النص، تنزلق صورتها فوق الكتلة السابقة داخل نفس الإطار، مثل القوباء المنطقية على السطح. يتغير لون خلفية الصفحة مع كل صورة.
يخبر تغيير اللون القارئ أن فصلًا جديدًا قد بدأ، لذا يمكنك إسقاط الفواصل والعناوين الفرعية. استخدمه لدراسات الحالة والجولات المميزة التي تحتوي على أربعة أو خمسة عناصر يستحق كل منها فقرة.
3. الفصول المتوافقة
يحمل كل فصل صورة مقطعة إلى قطع بانوراما متشابكة. يبدأون في التشتت والتدوير. يؤدي التمرير إلى توجيههم إلى المنزل، ويظهر التعليق بمجرد اكتمال الصورة.
يتم حساب موضع كل قطعة من إزاحة التمرير، وبالتالي فإن الرسوم المتحركة لا تتقدم أبدًا على القارئ أو تتخلف عن الركب. إنه يعمل بشكل جيد لصفحات سرد القصص التي تحتوي على صورتين إلى أربع صور كبيرة. لن أتجاوز الرابعة، لأن الحيلة تضعف.
4. شبكة اللحمة
يفتح القسم على صورة واحدة عند النزيف الكامل. قم بالتمرير، وسوف ينكمش في مكانه في شبكة مكونة من ثلاثة أعمدة بينما تتطاير الصور الأخرى حوله. استمر في التمرير وجزء الصفوف لإفساح المجال للعنوان الرئيسي والزر.
يعد هذا بطلًا قويًا للصفحة الرئيسية للمتجر أو الاستوديو، لأنه ينتقل من صورة واحدة كبيرة إلى المجموعة الكاملة إلى دعوة للعمل في قسم واحد. للحصول على البدائل الثابتة، راجع لدينا قوالب قسم بطل العنصر.
تأثيرات التمرير ثلاثية الأبعاد
يستخدم هؤلاء الأربعة تحويلات ومنظور CSS 3D، ويقوم موضع التمرير بتشغيلها. إذا كنت تريد 3D يتم تشغيله على مؤقت أو يستجيب للأسهم، فإن دليلنا إلى عنصر دائري 3D يغطي هذا الجانب.
5. مكعب الوجه
توجد ست صور فوتوغرافية على الوجوه الستة للمكعب. يدير المكعب وجهًا واحدًا لكل امتداد للتمرير بينما تنتشر الصورة التي تواجهها عبر الخلفية بأكملها. تظهر مجموعة من الصور المصغرة الموجودة على اليمين مكانك وتتيح لك القفز إلى أي وجه.
ستة هو الحد الصعب، لأن المكعب له ستة جوانب. وهذا يجعله مناسبًا تمامًا لمجموعة قصيرة من المنتجات أو مجموعة من ستة منتجات.
6. أنبوب المدار
تقف حلقات بطاقات الصور حول محور عمودي، مكدسة واحدة فوق الأخرى لتشكل أنبوبًا. يمكنك مشاهدته من الخارج مباشرةً، بحيث يمر الجدار القريب بشكل كبير عبر الشاشة ويظهر الجدار البعيد صغيرًا وخافتًا من خلال الفجوات. توجد كرة زجاجية على المحور في العرض التوضيحي، وتوفر الأداة كائنات مركزية أخرى، بما في ذلك الجرم السماوي أو الذرة أو الكوكب الحلقي أو المكعب السلكي أو الصورة أو الأيقونة.
إنها تحتاج إلى الكثير من الصور لقراءتها كأنبوب، لذا فكر في صالات عرض مكونة من ستة عشر صورة أو أكثر.
7. رف الحامل
Easel Rack عبارة عن معرض تمرير يقف في العمق. كل صورة عبارة عن لوحة يتم إبعادها عنك حتى تجعلها اللفافة مستوية مع منتصف الشاشة، حيث تتأرجح لمواجهتك. التسميات التوضيحية تجلس بجانب اللوحات والعناصر متعرجة يسارًا ويمينًا.
يمر العرض التوضيحي عبر ست مراحل لاستوديو الفخار، وهذا هو الاستخدام الطبيعي له: خطوات العملية أو قائمة مرقمة من الخدمات.
8. كتاب كويري
يفتح كتاب مغلق أثناء التمرير، ثم يقلب صفحة واحدة في كل مرة. تتم طباعة كل ورقة على كلا الجانبين وتدور حول العمود الفقري، بحيث ترى الجزء الخلفي من الصفحة أثناء مرورها. قم بالتمرير لأعلى وسيغلق الكتاب مرة أخرى.
العرض التوضيحي عبارة عن قائمة مطعم بها صورة على الصفحة اليسرى وأطباق على اليمين. كما أنه يناسب دفاتر البحث والكتيبات. مع إيقاف تشغيل JavaScript، تعود الصفحات إلى عمود عادي بترتيب القراءة، لذلك لا يتم إخفاء أي شيء عن محركات البحث أو قارئات الشاشة.
تشكيلات البطاقة
9. سطح البندقية
هذه هي بطاقات التراص على نمط التمرير، والتي يتم إجراؤها باستخدام بطاقات الصور الشخصية. تضع كل خطوة تمرير البطاقة التالية أعلى الكومة بزاوية طفيفة. يتغير لون الخلفية ليتناسب مع كل بطاقة، ويتم احتساب شريط تقدم صغير من خلال المجموعة.
تعمل الصور الشخصية بشكل أفضل: الملصقات، وأغلفة الكتب، والتغليف، وشاشات التطبيقات. ستة إلى ثمانية بطاقات على حق.
10. سطح السفينة المحطم
Shatter Deck عبارة عن مجموعة كاملة الإطار من الصور الفوتوغرافية، تحتوي كل منها على تسمية توضيحية وزر وسهمين للتحرك من خلالها. يؤدي التنقل بين الصور إلى قطع الصورة إلى شبكة من البلاط الصغير، وتشتيتها، وإعادة تجميعها معًا كالصورة التالية.
خارج الصندوق، يمكنك التحرك من خلاله باستخدام الأسهم أو السحب الأفقي أو مفاتيح الأسهم بمجرد التركيز على المجموعة. تحتفظ الصفحة بتمريرها الرأسي العادي. التبديل على انتقل إلى فرك يؤدي التحكم والتمرير إلى تشغيل عملية الانتقال بدلاً من ذلك. مع تمكين الحركة المنخفضة، تتوقف البلاطات عن الطيران ويتلاشى السطح بشكل متقاطع.
معارض التمرير التي لا نهاية لها
هذه الحلقات الثلاث. لا توجد صورة أولى أو أخيرة تناسب التصفح أكثر من القراءة.
11. صالون شنق
Salon Hang عبارة عن جدار بلا قمة ولا قاع. الصور معلقة في عمود واحد، ويتم دفعها إلى اليسار واليمين من المنتصف بكميات مختلفة ويتم قطعها إلى عروض مختلفة، بالطريقة التي يزدحم بها الصالون جدار المعرض. بعد الصورة الأخيرة تأتي الصورة الأولى مرة أخرى. انقر فوق صورة وتنمو إلى صفحتها الخاصة مع تسمية توضيحية وزر الرجوع.
استخدمه في محافظ التصوير الفوتوغرافي حيث لا يهم الترتيب وكل صورة تستحق نظرة فاحصة.
12. خيط خيوط
الصور الفوتوغرافية بحجم الطوابع البريدية معلقة على طول خيط مغلق يلتف عبر الشاشة. تسافر على طول الخيط بالتمرير. أينما يمر في منتصف المسرح، تنتفخ الصور كما لو كانت تحت عدسة مكبرة، وتسمي التسمية التوضيحية الصورة الموجودة في المقدمة. انقر على صورة لفتحه.
إنه الأفضل من بين الستة عشر للأرشيفات الكبيرة، لأن الصور المصغرة الصغيرة تعني أن الكثير من الصور مناسبة للشاشة في وقت واحد. بدون JavaScript، تعرض الأداة كل صورة في شبكة عادية.
13. صور بكرة
تُظهر صور البكرة صورًا بملء الشاشة واحدة تلو الأخرى، على حلقة. يحمل كل منها كلمة واحدة كبيرة جدًا عبرها، وتمتد بشكل جانبي على طول منحنى مثل النوع على أسطوانة دوارة، مع وجود خط مكتوب بخط اليد يعبرها في الاتجاه الآخر. تتحرك الصورة مع انحراف اختلاف المنظر خلف النوع، ويوجد فهرس مرقم منخفضًا على اليسار.
وهو التصميم الأعلى صوتًا من بين الستة عشر، وهو يناسب مواقع الموضة والتحرير. أعطها خمس أو ست صور قوية وكلمة واحدة.
الفهارس وتخطيطات المتجر
14. مؤشر المنفاخ
يُظهر مؤشر المنفاخ مجموعة من الأعمال إدخالاً واحدًا في كل مرة. يحتوي كل منها على عنوان كبير ولوحتين متداخلتين من نفس الصورة وتعليق، وتأخذ الصفحة بأكملها لونًا جديدًا لكل إدخال. يتم تعيين العنوان بخط متغير، وتقوم الأداة بكتابة ضغط التمرير على محور العرض الخاص بها، بحيث تمتد الكلمة وتستقر أثناء تحركك.
يقرأ بشكل أفضل مع أربعة إلى ثمانية إدخالات. جربه في معرض أو مجموعة من المشاريع المميزة.
15. مؤشر المد والجزر
يحتوي مؤشر المد والجزر على عمودين يتحركان ضد بعضهما البعض. العناوين تجري إلى اليسار والأشخاص الذين صنعوها إلى اليمين. أثناء التمرير، ينزلق كل سطر بشكل جانبي على موجة، والعمود الأيسر في اتجاه واحد والعمود الأيمن مرآته، بينما توجد صورة للصف الحالي بينهما.
يتم قيادة هذا حسب النوع، مع وجود الصورة في دور داعم. يناسب قوائم الائتمان وفهارس المشاريع الطويلة.
16. متجر سواتش
Swatch Shop عبارة عن ممر من صور المنتجات التي يمكنك السير فيها عن طريق التمرير. أثناء وجود المنتج في المقدمة، تأخذ الغرفة بأكملها لونها، وتظهر البطاقة بجانبها الاسم والوصف المختصر والسعر وخيارات الحجم والزر. عمود من النقاط الملونة على اليمين يشير إلى مكانك.
إنه مصمم للكتالوجات الصغيرة: بائعي الزهور والسيراميك والشموع والمطبوعات. سبعة منتجات تملأ العرض التوضيحي.
جميع تأثيرات التمرير الـ 16 في لمحة
استخدم هذا الجدول لمطابقة تأثير التمرير مع المحتوى الموجود لديك. عدد العناصر هو ما يتعامل معه التخطيط بشكل مريح.
| القطعة | تأثير التمرير | الأفضل ل | عناصر |
|---|---|---|---|
| مؤشر الفتحة | تفتح الصورة من شريط عند دخولها العرض | مقالات الصور المظلمة | 4 إلى 6 |
| إطار لوح خشبي | تتداخل الصور في إطار ثابت، ويتغير لون الصفحة | دراسات الحالة والجولات المميزة | 4 إلى 5 |
| فصول متوافقة | يتم تجميع قطع بانوراما | صفحات القصص | 2 إلى 4 |
| شبكة اللحمة | تصبح الصورة كاملة النزيف شبكة مكونة من ثلاثة أعمدة | أبطال الصفحة الرئيسية | 12 |
| مكعب الوجه | مكعب ثلاثي الأبعاد يدير وجهًا واحدًا في كل خطوة تمرير | المحافظ القصيرة | 6 |
| أنبوب المدار | حلقات من البطاقات تدور حول محور | صالات عرض كبيرة | 16 أو أكثر |
| رف الحامل | تتأرجح اللوحات لمواجهة القارئ | خطوات العملية | 4 إلى 8 |
| كتاب كويري | يفتح الكتاب وتدور الصفحات | القوائم، كتب البحث | 3 إلى 6 فروق أسعار |
| سطح البندقية | البطاقات مكدسة على التمرير | الملصقات والأغلفة وشاشات التطبيقات | 6 إلى 8 |
| سطح السفينة المحطمة | تنقسم الصورة إلى مربعات وتعيد تشكيلها | منزلقات كاملة العرض | 3 إلى 6 |
| صالون هانغ | جدار متدلي، الصور مفتوحة في الصفحة | محافظ التصوير الفوتوغرافي | 10 أو أكثر |
| خيط خيوط | تنتقل الصور المصغرة على طول الخيط | أرشيف | 20 أو أكثر |
| صور بكرة | صور بملء الشاشة من النوع المنحني | الموضة، الافتتاحية | 5 إلى 6 |
| مؤشر الخوار | إدخال واحد في كل مرة، يتفاعل العنوان مع التمرير | المعارض والمجموعات | 4 إلى 8 |
| مؤشر المد | عمودان ينزلقان على موجة | الاعتمادات، الفهارس الطويلة | 15 أو أكثر |
| متجر سواتش | ممر المنتج، الغرفة يتغير لونها | كتالوجات صغيرة | 5 إلى 8 |
قم بتنزيل عناصر واجهة المستخدم ذات تأثير التمرير الستة عشر
كل عنصر واجهة مستخدم عبارة عن سحاب منفصل، لذا يمكنك فقط تنزيل العناصر التي تخطط لاستخدامها. يحتوي كل سحاب على ملفين: JSON الخاص بالعنصر واجهة المستخدم وREADME الذي يسرد عناصر التحكم الخاصة به.
| القطعة | تجريبي | الرمز البريدي |
|---|---|---|
| مؤشر الفتحة | العرض المباشر | تحميل |
| مؤشر الخوار | العرض المباشر | تحميل |
| فصول متوافقة | العرض المباشر | تحميل |
| رف الحامل | العرض المباشر | تحميل |
| مكعب الوجه | العرض المباشر | تحميل |
| خيط خيوط | العرض المباشر | تحميل |
| أنبوب المدار | العرض المباشر | تحميل |
| كتاب كويري | العرض المباشر | تحميل |
| صور بكرة | العرض المباشر | تحميل |
| سطح البندقية | العرض المباشر | تحميل |
| صالون هانغ | العرض المباشر | تحميل |
| سطح السفينة المحطمة | العرض المباشر | تحميل |
| إطار لوح خشبي | العرض المباشر | تحميل |
| متجر سواتش | العرض المباشر | تحميل |
| مؤشر المد | العرض المباشر | تحميل |
| شبكة اللحمة | العرض المباشر | تحميل |
قم بفك ضغط الملف قبل استيراده. يقرأ مستورد Widget Builder ملفات.json ولن يقبل الرمز البريدي نفسه.
كيفية استيراد عنصر واجهة مستخدم التمرير إلى Elementor
يمكنك استيراد كل عنصر واجهة مستخدم من خلال Master Addons Widget Builder، ثم اسحبه إلى صفحة مثل أي عنصر واجهة مستخدم Elementor آخر. يستغرق الأمر برمته حوالي دقيقتين لكل تصميم.
- قم بتنزيل الأداة التي تريدها وقم بفك ضغطها. يوجد بالداخل ملف اسمه مثل
widget-facet-cube.json، بالإضافة إلى التمهيدي. - في لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية > منشئ القطعة وانقر استيراد القطعة.
- اسحب ملف.json واحدًا إلى منطقة التحميل، أو انقر فوق تصفح الملفات واختياره. يأخذ المستورد ملفًا واحدًا في كل مرة، لذا كرر ذلك لكل تصميم تريده.
- افتح أي صفحة في Elementor وابحث في لوحة عناصر واجهة المستخدم عن اسم التصميم، على سبيل المثال “Facet Cube”. اسحبه إلى حاوية كاملة العرض.
- استبدل الصور والنصوص التجريبية في علامة التبويب "المحتوى"، ثم قم بتعيين الألوان والطباعة في علامة التبويب "النمط".
لا تمر هذه الملفات عبر ملف Elementor الخاص القوالب > الاستيراد شاشة. هذا المستورد مخصص لقوالب الصفحات والأقسام التي نغطيها كيفية استيراد قالب العنصر. تحتاج الأدوات المثبتة أيضًا إلى مساحة. ضعها في حاوية مضبوطة على العرض الكامل بدون حشوة، وإلا سيجلس المسرح داخل عمود ضيق وسيبدو ضيقًا.
اقرأ أيضا: كيفية إضافة الرسوم المتحركة GSAP في Elementor، إذا كنت ترغب في كتابة الرسوم المتحركة الخاصة بك التي يتم تشغيلها بالتمرير من الصفر.
أداة تمرير الصورة مقابل تأثير تمرير الصورة
تعد أداة تمرير الصورة وتأثير تمرير الصورة شيئين مختلفين، والأسماء تسبب ارتباكًا. في معظم إضافات Elementor، يعني “Image Scroll” لقطة شاشة طويلة داخل إطار ثابت تنزلق لأعلى عند التمرير فوقه. تستخدمه متاجر السمات لمعاينة صفحة طويلة في مربع صغير.
تأثير تمرير الصورة هو رسوم متحركة مرتبطة بتمرير الصفحة: الصور التي تكشف أو تكدس أو تدور أو تنتقل أثناء تحرك الزائر إلى أسفل الصفحة. كل شيء في هذا المنشور هو النوع الثاني. إذا كانت معاينة التمرير هي ما أتيت من أجله، فأنت بحاجة إلى إضافة تحتوي على أداة تمرير الصور، لأنه لا أحد من هؤلاء الستة عشر يفعل ذلك.
التمرير في العنصر
Scrollytelling عبارة عن صفحة يؤدي فيها التمرير إلى تقدم القصة: يظل النص المرئي مثبتًا أثناء تحرك النص الموجود بجانبه، ويتغير المرئي في كل خطوة. يمكن لـ Elementor عمل نسخة أساسية بعمود لاصق. الجزء الأصعب هو جعل الصورة المرئية تستجيب لمكان وجود القارئ بالضبط.
تم تصميم ثلاثة من هذه الأدوات لها. يقوم Shingle Frame بإقران كل فقرة بصورة تحل محل الأخيرة، وتقوم الفصول المتوافقة بتجميع صورة واحدة لكل فصل أثناء القراءة، ويقوم Quire Book بقلب صفحة لكل قسم. للحصول على قصة أطول، قم بتكديس اثنين منهم في صفحة واحدة مع أقسام نصية عادية بينهما، حتى يحصل القارئ على قسط من الراحة من الحركة.
هل تعمل تأثيرات التمرير على إبطاء موقعك؟
تعمل تأثيرات التمرير على إبطاء سرعة الموقع عندما يتم إنشاؤها بلا مبالاة، ويكون الجناة المعتادون عبارة عن صور ورسوم متحركة كبيرة الحجم تغير التخطيط في كل إطار. تتجنب عناصر واجهة المستخدم هذه المشكلة الثانية. يقومون بالتحريك باستخدام تحويلات CSS والعتامة، والتي يمكن للمتصفح تسليمها إلى بطاقة الرسومات، ويستخدمون IntersectionObserver لمعرفة وقت ظهور عنصر واجهة المستخدم على الشاشة.
وزن الصورة متروك لك، نظرًا لأن الأداة التي تعرض اثنتي عشرة صورة فوتوغرافية ستقوم بتحميل اثنتي عشرة صورة فوتوغرافية. قم بتصديرها على شكل WebP، وقم بقياسها إلى البعد الأكبر الذي تظهر به، واحتفظ بكل منها أقل من حوالي 150 كيلو بايت.
عند إمكانية الوصول، تحمل جميع الأدوات الستة عشر أ prefers-reduced-motion قاعدة. الزائر الذي طلب من أجهزته حركة أقل يحصل على تخطيط ثابت: تعرض Weft Grid شبكتها النهائية مع النص فوقها، ويتلاشى Shatter Deck بشكل متقاطع. يعد Shatter Deck أيضًا نقطة توقف حقيقية لعلامات التبويب، لذا تعمل مفاتيح الأسهم بمجرد التركيز عليها ولا تختطف الصفحة بخلاف ذلك.
بالنسبة للهواتف، تتضمن العديد من التصميمات تخطيط الشاشة الضيقة الخاص بها. يقوم Facet Cube بتحريك حاجز الصور المصغرة الخاص به إلى صف عند أسفل المسرح، وتقوم Reel Portraits بتحويل فهرسه إلى صف من الأرقام. ومع ذلك، اختبر الأداة التي تختارها على هاتف حقيقي قبل النشر. تبدو الأقسام الطويلة المثبتة أطول تحت الإبهام مقارنة بعجلة الماوس. إذا كان موقعك يستخدم نقاط توقف غير قياسية، فسيقوم دليلنا بذلك نقاط توقف العنصر يشرح كيفية تعديلها.
سأستخدم تأثير تمرير مثبتًا واحدًا لكل صفحة، اثنان على الأكثر. تضيف كل مرحلة مثبتة مسافة تمرير، وسيشعر بها الزائر الذي يتعين عليه التمرير عبر ثلاثة منها على التوالي.
الأسئلة المتداولة
هل تأثيرات تمرير Elementor مجانية؟
رقم تعد عناصر التحكم في تأثيرات التمرير ضمن Advanced > Motion Effects جزءًا من Elementor Pro، ولا يتضمنها البرنامج الإضافي Elementor المجاني. لا تعتمد عناصر واجهة المستخدم الـ 16 الموجودة في هذه الصفحة على Elementor Pro. وهي تعمل على Elementor المجاني مع Widget Builder من Master Addons Pro.
كيف يمكنني إضافة تأثيرات التمرير في Elementor؟
باستخدام Elementor Pro، حدد عنصرًا، وافتح Advanced > Motion Effects، وقم بتشغيل Scrolling Effects واختر Vertical Scroll أو Horizontal Scroll أو Transparency أو Blur أو Rotate أو Scale. بالنسبة للتأثيرات التي تقوم بتثبيت قسم أو تحريك عدة صور معًا، قم باستيراد عنصر واجهة مستخدم للتمرير جاهز من خلال الإضافات الرئيسية > منشئ عناصر واجهة المستخدم > استيراد عنصر واجهة المستخدم.
لماذا لا تعمل تأثيرات التمرير Elementor الخاصة بي؟
الأسباب الشائعة هي التخزين المؤقت أو البرنامج المساعد للتحسين الذي يؤخر JavaScript حتى التفاعل الأول، والحاوية الأصلية مع تعيين الفائض على مخفي (مما يكسر الموضع الثابت)، والعنصر المتداخل الموجود في عمود محاصر ضيق جدًا. مسح ذاكرة التخزين المؤقت، وضبط الحاوية على العرض الكامل، وإزالة الفائض المخفي عن والديها.
هل أحتاج إلى Elementor Pro لعناصر واجهة المستخدم الستة عشر هذه؟
لا، لا أحد منهم يستخدم عناصر واجهة المستخدم Elementor Pro أو لوحة تأثيرات الحركة، لذا فإن Elementor المجاني يكفي. ما تحتاجه هو Master Addons Pro، لأنه يتم استيراد عناصر واجهة المستخدم وتحريرها في Widget Builder الخاص به.
ما الفرق بين الرسوم المتحركة التي يتم تشغيلها بالتمرير والرسوم المتحركة المرتبطة بالتمرير؟
تبدأ الرسوم المتحركة التي يتم تشغيلها بالتمرير مرة واحدة عندما يدخل عنصر إلى الشاشة ثم يتم تشغيلها على ساعته الخاصة، مثل التلاشي. تتبع الرسوم المتحركة المرتبطة بالتمرير موضع التمرير بشكل مستمر، لذلك تتوقف مؤقتًا عند التوقف ثم تنعكس عند التمرير لأعلى. معظم التأثيرات الستة عشر هنا مرتبطة بالتمرير.
هل يمكنني استخدام أكثر من تأثير تمرير واحد على الصفحة؟
نعم، وكل عنصر واجهة مستخدم يحتفظ بالرسوم المتحركة الخاصة به في القسم الخاص به. اقتصر على تأثير واحد أو اثنين من التأثيرات المثبتة لكل صفحة، مع وجود محتوى عادي بينهما. تضيف كل مرحلة مثبتة مسافة تمرير، والعديد منها على التوالي تجعل الصفحة تبدو بطيئة حتى عندما يتم تحميلها بسرعة.
هل تعمل تأثيرات التمرير هذه مع GSAP أو ScrollTrigger؟
لا يحتاجون أيضا. تقوم كل عنصر واجهة مستخدم بشحن CSS وJavaScript الخاص بها ولا تقوم بتحميل أي مكتبة للرسوم المتحركة. إذا كان موقعك يقوم بالفعل بتشغيل GSAP لأقسام أخرى، فيمكن أن يجلس الاثنان على نفس الصفحة، نظرًا لأن عناصر واجهة المستخدم تلمس العلامات الخاصة بها فقط.
الأفكار النهائية
تمنحك تأثيرات التمرير المضمنة في Elementor ست طرق لتحريك عنصر واحد، وهي موجودة في Elementor Pro. تغطي عناصر واجهة المستخدم الـ 16 هنا الأرض بعد ذلك: أربعة كشوفات مثبتة، وأربع قطع ثلاثية الأبعاد، ومجموعتين من البطاقات، وثلاث صالات عرض لا نهاية لها وثلاثة فهرس أو تخطيطات متجر، كل منها مع عرض توضيحي مباشر وخلفي منخفض الحركة.
لاختيار واحدة، احسب صورك وقرر ما إذا كان ترتيبها مهمًا، ثم اختر من الجدول أعلاه. يمكنك تغيير أي من هذه التصميمات، أو إنشاء تصميم جديد، في منشئ القطعة.
القراءة ذات الصلة
