كيفية إضافة الرسوم المتحركة إلى الأقسام / الصفوف

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

معاينة

سطح المكتب

متحرك

قم بتحميل Divi Builder في صفحة أو منشور

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

مع هذا التصميم ، سنقوم بتحريك قسم واحد و 3 صفوف لتحقيق تأثير تحميل متسلسل.

اختر تخطيط Premade

لتطبيق إحدى حزم التخطيط المصممة بشكل احترافي ، أدخل Divi Builder وحدد Use a Premade Layout . سيؤدي ذلك إلى عرض قائمة بجميع العروض المجانية التي نقدمها.

اختر تخطيطًا

بعد ذلك ، اختر ببساطة حزمة التخطيط التي تريد استخدامها. يمكنك الفرز حسب الفئة أو البحث عن الكلمات الرئيسية لمعرفة ما أنشأناه لك.

حدد موقع القسم (الأقسام) والصف (الصفوف) المطلوب تحريكه

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

مع هذا المخطط ، دعنا نصل إلى إضافة تلك الرسوم المتحركة!

كيفية إضافة الرسوم المتحركة إلى الأقسام والصفوف - الخيار 1

تعد إضافة رسم متحرك إلى قسم Divi أمرًا بسيطًا للغاية. تحتاج أولاً إلى إدخال إعدادات القسم . بعد ذلك ، انتقل إلى علامة التبويب " تصميم" وقم بالتمرير حتى ترى خيارات الرسوم المتحركة .

ضمن خيارات الرسوم المتحركة ، ستقوم بضبط ما يصل إلى 8 خيارات مختلفة للرسوم المتحركة التي اخترتها.

1. أنماط الرسوم المتحركة هي المكان الذي تختار فيه كيفية ظهور الرسوم المتحركة. إذا كان القسم سيتدحرج من طرف إلى طرف أو يرتد من جانب الصفحة مثل الكرة. الأكثر شيوعًا هي Fade و Slide .
2. الاتجاه - ستحدد الاتجاه الذي يتحرك فيه العنصر. تعني القيمة لأعلى أن القسم سيبدأ من الأسفل ويتحرك لأعلى. ما يصل ليس نقطة الأصل.
3. المدة - المدة التي تستغرقها الرسوم المتحركة من البداية إلى النهاية. ستؤدي القيمة الأقل إلى تسريعها ، بينما تؤدي القيمة الأعلى إلى إبطائها.
4. التأخير - يمنع هذا الخيار تشغيل الرسوم المتحركة في أسرع وقت ممكن ويمكن أن يساعد في جذب الانتباه إليها أكثر مما لو تم تشغيلها على الفور.
5. الكثافة - كلما انخفضت القيمة ، كانت أكثر سلاسة من الرسوم المتحركة ، بينما تكون القيم الأعلى أكثر حدة وأكثر حدة.
6. بدء التعتيم - ستؤدي القيمة 0 إلى بدء الرسوم المتحركة بشكل غير مرئي والتركيز عليها طوال المدة. 100 يعني أن العنصر مرئي بالكامل حتى قبل أن تبدأ الرسوم المتحركة.
7. منحنى السرعة - سيسمح لك ذلك بضبط مدى سلاسة بدء الرسوم المتحركة وانتهائها.
8. التكرار - هل الرسوم المتحركة الخاصة بك لها تأثير لمرة واحدة ، أم أنها شيء تريد تكرارها مرارًا وتكرارًا؟ إذا تم تعيين رسم متحرك على مرة واحدة ، فيجب إعادة تحميل الصفحة لبدء تشغيله مرة أخرى.

كيفية إضافة الرسوم المتحركة إلى الأقسام والصفوف - الخيار 2

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

كيفية تمكين تأثيرات التمرير

مرة أخرى ، يمكن تعيين أي عنصر في Divi لتمكين تأثيرات التمرير ، لكننا نتعامل مع الأقسام والصفوف اليوم. لذا أدخل إعدادات القسم الخاصة بك ، وانتقل إلى علامة التبويب خيارات متقدمة ، وابحث عن عنوان تأثيرات التمرير .

اختر التأثيرات والمشغلات

ضمن خيارات Scroll Effects ، ستجد العديد من علامات التبويب لأنواع مختلفة من الرسوم المتحركة التي يمكنك تشغيلها عند التمرير.

• الموضع الثابت - ما إذا كان القسم أو الصف يلتصق بشاشة المستخدم أثناء التمرير في الماضي أم لا.
• تأثيرات التحويل - هذه هي تأثيرات الرسوم المتحركة الفعلية: الحركة الأفقية والعمودية ، والتلاشي للداخل / الخارج ، وقياس الحجم ، والدوران ، والتعتيم.
• تعيين [ميزة] - ستتمكن من تعيين المكان الذي يكون فيه التأثير أكثر وضوحًا على الشاشة ومتى / مكان حدوثه
• مشغل تأثير الحركة - ستحدد ما إذا كانت الرسوم المتحركة تبدأ عندما يدخل الجزء العلوي من العنصر في منفذ العرض أو مركز العنصر أو الجزء السفلي.

يتمثل الاختلاف الأساسي في هذه مقابل استخدام خيارات الرسوم المتحركة في القسم السابق في ما إذا كنت تريد أن تكون الرسوم المتحركة مؤتمتة أو إذا كنت تريد تشغيلها في كل مرة يقوم فيها المستخدم بإجراء ما. يمكنك الجمع بين الرسوم المتحركة باستخدام خيارات Scroll Effects و Animation ، والتي سنستخدمها لتأثير البرنامج التعليمي الرئيسي.

الجمع بين الرسوم المتحركة للأقسام والصفوف

يمكنك إنشاء بعض التأثيرات المذهلة لمواقعك من خلال الجمع بين الرسوم المتحركة المختلفة لتشغيلها في أوقات مختلفة. باستخدام خيار Animation Delay ، يمكن لموقعك تحريك سلسلة من الأقسام والصفوف والعناصر في تسلسل لإخراج بعض العناصر المرئية الرائعة.

بادئ ذي بدء ، سنقوم بتعيين نمط الرسوم المتحركة في إعدادات القسم على Slide مع تعيين اتجاه الحركة على Up .

سنحتفظ ببقية الخيارات في إعداداتها الافتراضية. خاصة تأخير الرسوم المتحركة . نريد تشغيل القسم عندما يكون معروضًا.

إعدادات الرسوم المتحركة للصف 1

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

نظرًا لأننا تركنا توقيت القسم عند 0 مللي ثانية ليتم تشغيله على الفور ، فنحن نريد إزاحة الصف قليلاً ، مما يسمح للرسوم المتحركة الأولية بالانتهاء في الغالب قبل أن تبدأ هذه الحركة.

إعدادات الرسوم المتحركة للصف 2

بعد ذلك ، سنذهب إلى إعدادات الصف الثاني للصفحة وننتقل إلى خيارات الرسوم المتحركة . مرة أخرى ، سنختار Slide لنمط الرسوم المتحركة ، وسينزلق هذا الصف باتجاه اليمين .

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

إعدادات الرسوم المتحركة للصف 3

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

خيارات الرسوم المتحركة

أولاً ، سنكرر العمليات المذكورة أعلاه. فقط مع هذا الصف ، نقوم بتعيين نمط الرسوم المتحركة على Fade. بعد ذلك ، سنقوم بتعيين Duration إلى 500ms بحيث يظهر هذا الصف بسرعة أكبر أثناء الرسوم المتحركة. وسوف تأخير من قبل 1500ms لضمان الحركات الأخرى كاملة تماما قبل هذا يبدأ.

أخيرًا ، تأكد من التحقق من ضبط عتامة البداية على 0٪ . نريد أن يكون هذا الصف غير مرئي حتى يصبح جاهزًا للرؤية.

انتقل إلى إعدادات التأثيرات

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

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

النتائج النهائية

عند الانتهاء من كل ذلك ، يجب أن تكون نتائجك مشابهة لذلك.

سطح المكتب

متحرك

استنتاج

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

ما الذي استخدمته في تأثيرات الرسوم المتحركة Divi لإنشاء الأقسام والصفوف الخاصة بك؟ دعونا نراهم في التعليقات!

المادة مميزة الصورة من Vectorchok / shutterstock.com