كيفية إضافة الرسوم المتحركة GSAP في Elementor (قالب مجاني)

يمكنك تشغيل الرسوم المتحركة GSAP الكاملة داخل Elementor. يكشف النص المقسم، والتمرير الأفقي المثبت، واختلاف المنظر، والعدادات، وكل ذلك، بدون تطوير البرنامج المساعد ولا وظائف. تعديلات php، ويحتفظ عملاؤك بالقدرة على تحرير كل عنوان ولون. الحيلة هي منشئ القطعة في الإضافات الرئيسية: الصق HTML وCSS وJS مرة واحدة، وحدد ما يجب أن يكون قابلاً للتحرير، ويصبح عنصر واجهة مستخدم عاديًا يمكن لأي شخص إسقاطه على الصفحة وتحريره من اللوحة.

لإثبات ذلك، قمت ببناء قالب هبوط GSAP كامل مكون من صفحة واحدة (استوديو حركة خيالي يسمى Playhead) وقمت بتحويل كل قسم إلى عنصر واجهة مستخدم قابل للاستيراد. تستطيع قم بتنزيل جميع الأدوات الستة كسحاب واحد في نهاية هذا المنشور، قم باستيرادها ببضع نقرات، ثم قم بفصلها لمعرفة كيفية عملها بالضبط.

سأتناول في هذا الدليل كيفية إنشاء أداة قسم البطل خطوة بخطوة، ثم تلخيص الأقسام الخمسة الأخرى. إذا كنت ترغب في تحويل تصميم HTML/CSS/JS إلى Elementor، بما في ذلك التعليمات البرمجية التي قمت بإنشائها باستخدام ChatGPT أو Claude، فهذا هو سير العمل.

اختصار واحد قبل البدء: إذا كانت الحركة التي تريدها عبارة عن صف من الصور التي تتحرك، فقد لا تحتاج إلى كتابة GSAP على الإطلاق. لقد شحننا بالفعل 20 قطعة دوارة ومنزلق تم تصميمه بنفس الطريقة، حيث يقوم أحدهم بتدوير الألواح الجانبية بشكل ثلاثي الأبعاد، ويقوم أحدهم بتقشير البطاقات من المكدس، ويركب المرء شرائحه حول حافة منحنية 500 متر، ويتم استيراد كل منها كأداة عنصر عادية تقوم بتحريرها من اللوحة.

ثمانية منهم يعملون على البرنامج الإضافي المجاني، واثني عشر يحتاجون إلى Pro. حتى لو لم يكن أي منها متطابقًا تمامًا، فإن استيراد الأقرب وقراءة JS بداخله يبدأ من محرر فارغ، وخطوات البناء أسفل هذا المنشور هي ما يحول JS إلى عناصر تحكم.

ما هي الرسوم المتحركة GSAP؟

GSAP (منصة GreenSock للرسوم المتحركة) هي مكتبة رسوم متحركة JavaScript تقوم بتحريك أي شيء على صفحة ويب بنص وصور وخصائص SVG وCSS مع توقيت دقيق للإطار وتسهيل التحكم. فهو يعمل على تشغيل تأثيرات التمرير ويكشف النص الذي تراه على المواقع الحائزة على جوائز، ومنذ الإصدار 3.13، أصبحت المكتبة بأكملها، بما في ذلك المكونات الإضافية المتميزة مثل ScrollTrigger وSplitText، مجانية بنسبة 100%.

هذا الجزء الأخير مهم أكثر مما يدركه الناس. كان SplitText (المكون الإضافي الذي يقسم العناوين الرئيسية إلى أحرف متحركة فردية) يكلف 99 دولارًا + سنويًا خلف نظام حظر الاشتراك غير المدفوع “Club GreenSock”. بعد أن استحوذت Webflow على GSAP، أصبح كل شيء مجانيًا. لذا فإن العائق الحقيقي الوحيد المتبقي لمستخدمي WordPress هو التكامل، وهذا ما يزيله هذا المنشور.

المشكلة: العنصر لا يتحدث GSAP

تغطي تأثيرات الحركة المضمنة في Elementor الرسوم المتحركة للمدخل، واختلاف المنظر الأساسي، وتتبع الماوس. جيد لـ 80% من الصفحات. لكنهم لا يستطيعون فعل:

• يكشف النص المقسم عن المكان الذي تتحرك فيه كل شخصية بتأخيرها الخاص
• الأقسام المثبتة التي يتم تمريرها أفقيًا بينما يتم تمرير الصفحة عموديًا
• الرسوم المتحركة التي تم مسحها بالتمرير مرتبطة بموضع التمرير الدقيق (تخصص ScrollTrigger)
• جداول زمنية متسلسلة حيث تنتقل إحدى الرسوم المتحركة إلى الأخرى
• تأثيرات السرعة التفاعلية، حيث تستجيب العناصر لمدى سرعة تمرير الزائر

تشترك جميع الحلول المعتادة في عيب واحد. يمكنك لصق التعليمات البرمجية في عنصر واجهة مستخدم HTML، ولكن بعد ذلك يعيش نص العنوان داخل كتلة التعليمات البرمجية التي لن يجرؤ عميلك على لمسها أبدًا. يمكنك تثبيت مكون إضافي للرسوم المتحركة خاص بـ GSAP، لكنك تقتصر على تأثيراته المحددة مسبقًا. يمكنك إدراج البرامج النصية يدويًا في السمة الفرعية الخاصة بك، ولكن الآن يتطلب تحرير العنوان الرئيسي مطورًا.

4 طرق لإضافة الرسوم المتحركة GSAP إلى Elementor (مقارنة)

تعد المكونات الإضافية المعدة مسبقًا جيدة حقًا إذا كان كل ما تحتاجه هو التلاشي عند التمرير. يفوز منشئ عناصر واجهة المستخدم عندما تريد رسمًا متحركًا لا يملكه أي شخص آخر، لأنك (أو الذكاء الاصطناعي) كتبته. تقوم بعمل التعليمات البرمجية مرة واحدة، وتقوم بتوصيل الأجزاء القابلة للتحرير بعناصر التحكم، ومنذ ذلك الحين فصاعدًا تتصرف مثل أي عنصر واجهة مستخدم Elementor: حقول النص، ومنتقي الألوان، وعناصر التحكم في الارتباط، والمجموعة.

القالب المجاني: صفحة مقصودة كاملة لـ GSAP مكونة من 6 عناصر واجهة مستخدم

Playhead هو موقع من صفحة واحدة لاستوديو الحركة الخيالي. لقد اخترت هذا المكان عن قصد: بالنسبة لاستوديو الحركة، الرسوم المتحركة يكون المحفظة، لذلك كل تأثير يكسب مكانه. تعمل الصفحة على GSAP 3.15 مع ScrollTrigger وSplitText، المحملة من CDN الرسمي.

الحاجيات الستة في التنزيل:

1. بطل كشف حرف SplitText، وأشكال الماس المنظر، والأجرام السماوية المتوهجة المنجرفة، والأزرار المغناطيسية
2. سرادق قم بتعيين شريط لا نهائي يتسارع عندما يقوم الزائر بالتمرير بشكل أسرع
3. معرض العمل if تم تثبيت التمرير الأفقي باستخدام عداد البطاقات المباشرة وانحراف البطاقة على أساس السرعة
4. إحصائيات عدادات الاختيار التي تتدحرج من الصفر عند دخولها إلى إطار العرض
5. عملية bo أربعة منحنيات تخفيف ترسم نفسها حرفيًا، كل منها يستخدم سهولة GSAP الخاصة به
6. CTA امسح الكشف عن النص المقسم الناتج عن التمرير باستخدام زر بريد إلكتروني مغناطيسي

كل عنصر واجهة مستخدم مستقل بذاته: CSS محدد النطاق بحيث لا يمكن أن يتعارض مع السمة الخاصة بك، ومحمل GSAP الخاص به الذي يجلب المكتبة مرة واحدة حتى لو كانت جميع عناصر واجهة المستخدم الستة موجودة في نفس الصفحة، ويتم الرجوع إلى الخلف بحيث يظل المحتوى مرئيًا إذا كان CDN فشل أبدًا. يتم احترام تفضيلات الحركة المخفضة أيضًا. يحصل الزائرون الذين يقومون بإيقاف تشغيل الرسوم المتحركة في نظام التشغيل الخاص بهم على صفحة ثابتة.

كيف بنيت أداة البطل، خطوة بخطوة

وهذا هو الجزء الذي يعمم عليه أي الرسوم المتحركة التي سوف تريدها من أي وقت مضى. نفس الخطوات السبع في كل مرة.

الخطوة 1: ابدأ بالعمل على HTML وCSS وJS

يمكن أن يكون المصدر أي شيء: قلم CodePen الذي يعجبك، أو قسم قمت بترميزه، أو إخراج من دردشة الذكاء الاصطناعي. كان بطلي عبارة عن ثلاثة ملفات over، والعلامات، والأنماط، والنص الذي ينشئ جدولًا زمنيًا لـ GSAP. قبل لمس Widget Builder، تأكد من أنه يعمل كملف .html عادي في المتصفح. تصحيح الأخطاء أسهل بمقدار 10 مرات من أي منشئ صفحات.

الخطوة 2: قم بتوسيع نطاق كل شيء إلى فئة غلاف واحدة

ستعيش عنصر واجهة المستخدم الخاص بك على الصفحات التي تحتوي على عناصر واجهة مستخدم أخرى ومكونات إضافية أخرى وCSS أخرى. قم بلف القسم بأكمله في فئة واحدة فريدة وقم بتعليق كل محدد منه

<section class="ph-hero-wrap">
  ...
</section>

/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }

قم أيضًا بإعادة تسمية الإطارات الرئيسية للرسوم المتحركة العامة. @keyframes spin يصبح @keyframes ph-hero-spin، لذا فإن عنصرين في صفحة واحدة لا يتقاتلان أبدًا حول نفس الاسم. تمنع هذه الخطوة الفردية 90% من عناصر واجهة المستخدم الخاصة بـ “ كسر تذاكر دعم page”.

الخطوة 3: استبدال النص القابل للتحرير بالرموز

في أي مكان قد يرغب فيه مالك الموقع في كلمات مختلفة، قم بتبديل النص المشفر برمز مميز بين قوسين مجعدين مزدوجين

<h1 class="ph-title">
  <span class="ph-split">{{title_line_one}}</span>
  <span class="ph-split">{{title_line_two}}</span>
  <em class="ph-serif">{{accent_word}}</em>
</h1>

لاحظ أنني قمت بتقسيم العنوان إلى ثلاثة رموز بدلاً من رمز واحد. تم تصميم الكلمة المميزة (“move”) بشكل مختلف على شكل حرف مائل، وكهرماني، ومتحرك 1، لذا فهي تحصل على تحكمها الخاص. لا يحتاج الشخص الذي يقوم بالتحرير أبدًا إلى معرفة ذلك؛ يرون فقط ثلاثة حقول نصية مُسمى. يصبح كل رمز مميز التحكم بالنص في البناء.

تحصل الأزرار على عنصر تحكم في عنوان URL، لذا فإن الرابط وتبديل علامة التبويب الجديدة وnofollow كلها تعمل من اللوحة

<a class="ph-btn" href="{{first_button_url.url}}"
   target="{{first_button_url.is_external}}"
   rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>

الخطوة 4: تحويل ألوان العلامة التجارية إلى عناصر تحكم في النمط

مقاومة الرغبة في عمل ثلاثين عنصر تحكم في الألوان. لدى بطلي خمسة: الخلفية، والنص، واللكنة، والأساسية، والكاتمة. يقومون بتغذية متغيرات CSS على الغلاف، ويتم حساب كل لون مشتق منها (التوهج والحدود والظلال) color-mix():

.ph-hero-wrap {
  --ph-accent: {{accent_color}};
  --ph-primary: {{primary_color}};
  --ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}

تغيير “Primary” في التحكم بالألوان ويتم تحديث الزر والجرم السماوي المتوهج والأشكال الماسية معًا. هذا ما يجعل القطعة تبدو مصممة بدلاً من تجميعها.

الخطوة 5: قم بتحميل GSAP من CDN مرة واحدة

يقوم JS بإدخال نصوص GSAP بمعرفات محمية، لذلك لا تزال ستة عناصر واجهة مستخدم في صفحة واحدة تقوم بتحميل المكتبة مرة واحدة بالضبط

["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st",   "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]

ثم الرسوم المتحركة نفسها عبارة عن جدول زمني قياسي لـ GSAP. ترتفع الشخصيات بشكل متدرج، وتنبثق الكلمة المميزة back.out(2.5)، الماس يقشر ضد موضع التمرير. إذا كنت تعرف بالفعل GSAP، فلن يتغير شيء. إذا لم تكن تعرفه، فهذا هو بالضبط الكود الذي سيكتبه لك الذكاء الاصطناعي بسعادة (المزيد حول ذلك أدناه).

الخطوة 6: إنشاء عنصر واجهة المستخدم في منشئ عناصر واجهة المستخدم

في لوحة تحكم WordPress الخاصة بك: الإضافات الرئيسية → منشئ عناصر واجهة المستخدم → إضافة جديد. قم بتسمية الأداة، واختر رمزًا، ثم الصق ملفاتك الثلاثة في علامات التبويب HTML وCSS وJS.

أضف الآن عنصر تحكم واحدًا لكل رمز مميز: 19 لبطلتي، بالإضافة إلى أربعة نصوص حاجب، وأربعة حقول عناوين، والوصف، وزرين مع روابطهما، وإشارة التمرير، وخمسة ألوان في علامة تبويب النمط. يجب أن يتطابق اسم التحكم مع الرمز المميز تمامًا: {{title_line_one}} يحتاج الرمز المميز إلى عنصر تحكم مسمى title_line_one. مرجع التحكم الكامل موجود في وثائق منشئ القطعة.

تفصيل واحد يستحق النسخ: امنح كل عنصر تحكم في اللون قيمة افتراضية تتوافق مع تصميمك. تبدو الأداة التي تستورد اللون الرمادي لأن عناصر التحكم في الألوان الخاصة بها فارغة معطلة حتى عندما لا تكون كذلك.

الخطوة 7: قم بإسقاطه في Elementor وتحريره مثل أي عنصر واجهة مستخدم

انشر عنصر واجهة المستخدم وسيظهر في لوحة Elementor ضمن الإضافات الرئيسية. اسحبه إلى الصفحة، وستعرض اللوحة اليسرى الحقول التي تحمل علامة. قم بتغيير “، ونقوم بالتدوير إلى عنوانك الرئيسي، ونعيد تلوين اللكنة، ونوجه الأزرار إلى صفحة التسعير الخاصة بك. يستمر الجدول الزمني لـ GSAP في العمل خلال كل تعديل. هذا هو الوعد الكامل: إخفاء تعقيد الرسوم المتحركة، وكشف تحرير المحتوى.

الأقسام الخمسة الأخرى، باختصار

سرادق (3 ضوابط). تتم طباعة نص المؤشر مرتين للحصول على حلقة CSS بدون فجوات، ويتولى GSAP مسؤولية التفاعل مع سرعة التمرير. قم بالتمرير بسرعة ويتسارع حتى 4x، ثم يسهل الرجوع للخلف. مثال تعليمي ممتع لأن الاحتياطي هو CSS خالص: إذا لم يتم تحميل GSAP مطلقًا، فإنه لا يزال يتم التمرير.

معرض العمل (22 عنصر تحكم). التحفة الفنية. يقوم ScrollTrigger بتثبيت القسم بينما يترجم مسار البطاقة أفقيًا، ويضع العداد علامة 01/05، وتنحرف البطاقات قليلاً بناءً على سرعة التمرير. خمس بطاقات، كل منها تحمل عنوانًا ورمزًا زمنيًا وعلامات قابلة للتحرير. على الهاتف المحمول، يتدهور إلى دائرة تمرير أصلية، ولا يتطلب أي تثبيت أو JS. يحتاج إلى قسم كامل العرض في Elementor حتى تعمل الرياضيات الدبوسية.

الإحصائيات (13 عنصر تحكم). أربعة أرقام يتم حسابها بسهولة عند التمرير للعرض. الأرقام النهائية موجودة في الترميز نفسه، لذلك حتى مع وجود زوار معاقين في JavaScript، راجع “142”، وليس “0”.

العملية (20 عنصر تحكم). الغرور المفضل لدي على الصفحة: أربع خطوات عملية، كل منها مقترنة بمنحنى تسهيل SVG الذي يرسم نفسه باستخدام تلك السهولة الدقيقة. يرسم المنحنى الخطي خطيًا، ويتجاوز المنحنى الخلفي. التسميات التوضيحية للتعليمات البرمجية عبارة عن عناصر تحكم نصية قابلة للتحرير، لذا يمكنك تبديل مراجع GSAP بأوصاف الخطوات الخاصة بك.

CTA (11 الضوابط). نفس تقنية النص المقسم مثل البطل ولكن يتم تشغيلها عند التمرير، بالإضافة إلى زر مغناطيسي يتبع المؤشر ويعود للخلف بسهولة مرنة. قم بتوجيه التحكم في عنوان URL إلى mailto: link وهو قسم اتصال.

قم بتنزيل القالب (6 عناصر واجهة مستخدم، سحاب واحد)

تنزيل gsap-animation-elementor-widgets.zip over جميع ملفات JSON للأدوات الستة، مجانًا، بدون بوابة بريد إلكتروني.

ملاحظة واحدة قبل البدء: الإصدار المجاني من Master Addons يشحن أداة إنشاء عناصر واجهة مستخدم محدودة، وتأتي مجموعة الميزات الكاملة التي تستخدمها عناصر واجهة المستخدم هذه مع ماستر أدونز برو. للاستيراد:

1. قم بفك ضغط التنزيل، حيث سترى ستة ملفات JSON، واحد لكل قسم
2. اذهب الى الإضافات الرئيسية → منشئ القطعة في لوحة تحكم ووردبريس الخاصة بك
3. انقر يستورد، اختر ملف JSON، وقم بالتأكيد
4. كرر ذلك بالنسبة للأقسام التي تريدها (لا تحتاج إلى الستة جميعها)
5. افتح أي صفحة باستخدام Elementor واسحب عناصر واجهة المستخدم من فئة الإضافات الرئيسية

كل شيء قابل للتحرير بعد الاستيراد: 88 عنصر تحكم عبر عناصر واجهة المستخدم الستة، كل لون، كل عنوان، كل رابط. لا توجد صور للتحميل. جميع العناصر المرئية هي CSS وSVG، مما يبقي القالب بأكمله أيضًا أقل من 200 كيلو بايت.

زاوية الذكاء الاصطناعي: تحويل أي تصميم تم إنشاؤه إلى عنصر

أدوات الذكاء الاصطناعي تكتب كود GSAP جيدًا الآن. اسأل ChatGPT أو Claude عن قسم بطل “a مع الكشف عن النص المقسم لـ GSAP، والخلفية الداكنة، واختلاف اختلاف التمرير، وستحصل على HTML وCSS وJS في استجابة واحدة. كانت المشكلة دائمًا هي الميل الأخير: كان هذا الرمز عالقًا كملف ثابت، وغير مفيد للعميل الذي يقوم بالتحرير في Elementor.

منشئ القطعة هو ذلك الميل الأخير. نمط سريع يعمل بشكل جيد:

Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapper

اطلب هذه القيود الأربعة مقدمًا وينخفض الإخراج إلى Widget Builder دون تغيير تقريبًا. سأظل أختبره كملف HTML مسطح أولاً. عادةً ما يعمل كود الذكاء الاصطناعي، لكن “عادةً ما تكون” ليست كلمة تريد اكتشافها داخل الصفحة المباشرة للعميل.

الأداء: حافظ على سرعة الرسوم المتحركة GSAP

• تحميل المكتبة مرة واحدة. تتعامل معرفات البرامج النصية المحمية من الخطوة 5 مع هذا تلقائيًا عبر عناصر واجهة مستخدم متعددة.
• تحريك التحولات والعتامةليس العرض/الارتفاع/الأعلى/اليسار. يقوم GSAP بذلك افتراضيًا باستخدام x, y، و scale 40- يتعامل معها مؤلف المتصفح دون إعادة التدفق.
• الاحترام يفضل الحركة المخفضة. تقوم كل عنصر واجهة مستخدم في القالب بالتحقق منه وتقديم محتوى ثابت. إمكانية الوصول، ولكن أيضا عمر البطارية.
• التكلفة الإجمالية صغيرة. تم تصغير GSAP core + ScrollTrigger + SplitText بمقدار 90 كيلو بايت تقريبًا، وهو أقل من معظم صور البطل الفردي. قم بإقران القالب بصفحات بسيطة وستمرر العناصر الحيوية الأساسية للويب بشكل مريح؛ لدينا دليل تأثيرات الرسوم المتحركة يغطي صورة السرعة الأوسع.

إذا شعرت أن GSAP أكثر مما تحتاج إليه، فإن Master Addons يقوم أيضًا بشحن حركة بدون تعليمات برمجية خارج الصندوق. الرسوم المتحركة المدخل, التأثيرات العائمة (برو)، و نظام الرسوم المتحركة open مع إعداد صفر. GSAP مخصص عندما تتوقف الإعدادات المسبقة عن كونها كافية.

دليل تعليمي للفيديو

ربما لا تفضل القراءة، لذلك أقوم بإنشاء مقطع فيديو لك حول كيفية تنزيل الأداة وتثبيتها باستخدام GSAP Animation في محرر Elementor الخاص بك.

الأسئلة المتداولة

ابدأ بالقالب، ثم قم ببناء القالب الخاص بك

استيراد عناصر واجهة المستخدم الستة، وكسرها، وإعادة بنائها. أسرع طريقة لفهم أداة إنشاء عناصر واجهة المستخدم هي فتح عنصر واجهة المستخدم البطل بعد الاستيراد ومعرفة كيفية تعيين عناصر التحكم 19 إلى الرموز المميزة في علامة تبويب HTML الخاصة بها. بعد ذلك، يصبح كل CodePen الذي تقوم بوضع إشارة مرجعية عليه وكل قسم تم إنشاؤه بواسطة الذكاء الاصطناعي مرشحًا لعنصر واجهة المستخدم.

يعمل Master Addons على 30،000+ موقع WordPress، ويأتي Widget Builder الكامل مع الإصدار Pro. شاهد كل ما هو مضمن في صفحة الحاجيات والإضافاتقم بتنزيل القالب أعلاه، ويمكن أن تكون أول أداة GSAP مخصصة لك متاحة اليوم.