كيفية إضافة تأثيرات التمرير كين بيرنز إلى الصور والوحدات والصفوف في Divi

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

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

من خلال تأثيرات التحويل إلى Divi Builder ، لم يكن من السهل أبدًا إحضار تأثيرات تحوم ken burns إلى صورك. تتيح لك خيارات التحويل هذه إمكانية القياس (التكبير / التصغير) والتحريك (أو التحريك) وتدوير الصورة كما تريد. ونظرًا لأنه يمكنك تطبيق هذه التحولات على حالة التمرير للصورة ، فإن إمكانيات التصميم لا حصر لها إلى حد كبير.

في هذا البرنامج التعليمي ، سأوضح لك مدى سهولة إنشاء تأثيرات تحوم فريدة تمامًا من ken burns على الصور والصفوف باستخدام Divi Builder.

هيا بنا نبدأ.

نظرة خاطفة

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

شرح المفهوم الأساسي

يتضمن المفهوم الأساسي لإنشاء تأثير التمرير Ken Burns استخدام خيارات التحويل الجديدة لـ Divi لتغيير حجم الصورة ووضعها وتدويرها عند التمرير فوق تلك الصورة. يمكنك زيادة خاصية تحويل المقياس بنسبة معينة لجعل الصورة أكبر عند المرور فوقها. يمكنك استخدام خاصية التحويل المترجم لتحريك الصورة على محوري x و y. ويمكنك تدوير الصورة باستخدام خاصية تدوير التحويل عن طريق تعيين قيمة درجة معينة (في هذه الحالة قيمة الدرجة للدوران على المحور س). أخيرًا ، يمكنك التحكم في مدة الانتقال (السرعة) ومنحنى السرعة للتحكم في سرعة تدفق تأثير ken burns hover. تعمل خصائص التحويل الثلاثة وخصائص الانتقال معًا لإنشاء تأثير التحويم كين بيرنز الذي يجعل صورك تنبض بالحياة.

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

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

قم بتنزيل أمثلة تأثير كين بيرنز هوفر مجانًا

لتضع يديك على أمثلة تأثير Ken Burns Hover Effect المجانية ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

بمجرد تنزيل الملف المضغوط ، قم بفك ضغط المجلد. بعد ذلك ، قم باستيراد تخطيط .json باستخدام ميزة Divi Builder Portability. أو يمكنك ببساطة سحب الملف إلى Divi Builder باستخدام وظيفة Divi Drag and Drop. هذا كل شيء!

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

الشروع في العمل بصفحة جديدة

أول شيء عليك القيام به هو إنشاء صفحة جديدة. ثم امنحك عنوانًا للصفحة وانشر Divi Builder في الواجهة الأمامية. ثم اختر خيار "البناء من الصفر".

إضافة تأثير كين بيرنز إلى صورة في صف عمود واحد

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

أولاً ، قم بإنشاء قسم جديد بصف من عمود واحد. ثم أضف وحدة صورة إلى الصف.

إخفاء الفائض من العمود

قبل أن نبدأ في تحديث إعدادات الصورة ، افتح إعدادات الصف وانقر على علامة التبويب خيارات متقدمة. ثم أضف CSS المخصص التالي إلى العنصر الرئيسي للعمود:

overflow: hidden;

سيؤدي ذلك إلى منع الصورة من الامتداد (أو الفائض) خارج حاوية العمود كلما تم تغيير حجم الصورة إلى حجم أكبر عند المرور فوقها. إذا لم تقم بإضافة هذا ، فستخرج الصورة من الحاوية وتخفي عناصر أخرى من الصفحة. من الناحية الفنية ، يمكنك إضافة هذا css إلى عنصر الصف الرئيسي بدلاً من العمود ، ولكنك ستحتاج إلى التخلص من أي حشوة صف مخصصة أيضًا.

احفظ إعدادات الصف.

مضيفا صورتك

الآن يمكننا إضافة الصورة إلى وحدة الصورة. افتح إعدادات وحدة الصورة وأضف صورة.

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

هام: كقاعدة عامة ، كلما كبرت الصورة ، زادت المساحة التي تحتاجها لتغيير حجم الصورة وتحريكها وتدويرها دون فقدان جودة الصورة.

إضافة تأثيرات التحويم

الآن بعد أن أصبحت صورتنا في مكانها الصحيح ، حان الوقت لاستخدام خيارات التحويل هذه لإنشاء تأثير التمرير كين بيرنز. انتقل إلى علامة تبويب التصميم وقم بفتح خيارات التحويل. قم بتنشيط تأثيرات التمرير وحدد علامة تبويب التمرير. الآن سيتم تطبيق أي تخصيصات لتأثير التحويل فقط على حالة التمرير لوحدة الصورة. ثم ضمن علامة التبويب Transform Scale ، قم بتحديث ما يلي:

مقياس التحويل المحور السيني (تحوم): 136٪
مقياس تحويل المحور ص (تحوم): 136٪

ثم انقر فوق علامة التبويب Transform Translate وقم بتحديث ما يلي:

تحويل المحور السيني للترجمة (تحوم): 3٪
تحويل المحور الصادي للترجمة (التمرير): 9٪

يؤدي هذا إلى تحريك الصورة إلى اليسار بنسبة 3٪ وإلى الأسفل بنسبة 9٪. بالنسبة إلى هذه الصورة المحددة ، كنت أسعى للتأثير والتأثير الذي من شأنه أن يكبر ويجلب الزوجين إلى مركز منفذ عرض العمود.

بشكل افتراضي ، ستكون قيم طول الترجمة بالبكسل (وليس النسبة المئوية). يمكنك استخدام وحدات البكسل لتحريك الصورة ولكني أجد أن استخدام النسب المئوية يجعل تحديد المواقع أكثر استجابة.

بعد ذلك ، انقر فوق علامة التبويب Transform Rotate وقم بتحديث ما يلي:

تحويل تدوير المحور السيني (تحوم): 6deg

تحديث خيارات الانتقال

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

مدة الانتقال: 2000 مللي ثانية (أو ثانيتين)
منحنى سرعة الانتقال: خطي (هذا يضمن عدم تغيير سرعة الانتقال في المدة)

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

الآن دعنا نتحقق من النتيجة النهائية. لا تنخدع من تقطع الصورة المتحركة أدناه. الانتقال سلس حقًا على موقع مباشر.

إضافة تأثير Ken Burns Hover إلى صور متعددة في صف ثلاثي الأعمدة

إذا كنت ترغب في إضافة تأثير التمرير ken burns إلى الصور الموجودة في أعمدة متعددة ، فإن نفس العملية تنطبق. الشيء الرئيسي الذي عليك القيام به هو التأكد من وإضافة مقتطف css "overflow: hidden" إلى كل عمود من الأعمدة التي تحتوي على صورتك.

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

بعد ذلك ، قم بتحديث إعدادات الصف باستخدام مقتطفات CSS المخصصة التي ستخفي تجاوز كل عمود.

العمود 1 العنصر الرئيسي CSS:

overflow:hidden;

العمود 2 العنصر الرئيسي CSS:

overflow:hidden;

العمود 3 العنصر الرئيسي CSS:

overflow:hidden;

بعد ذلك ، انسخ وحدة الصورة والصقها في العمود 2 والعمود 3.

هذا كل شيء. هنا هو النتيجة النهائية.

نظرًا لأن هذا التصميم أكثر شيوعًا لتخطيط شبكة المعرض ، فربما ترغب في تسريع مدة الانتقال قليلاً لزيادة حدة حركة التمرير. يمكنك القيام بذلك بسهولة باستخدام ميزة التحديد المتعدد لـ Divi. اضغط مع الاستمرار على ctrl أو cmd وحدد جميع وحدات الصورة. ثم انقر فوق رمز ترس الإعدادات في إحدى الصور لفتح إعدادات Element Settings.

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

مدة الانتقال: 500 مللي ثانية

ها هي مدة الانتقال الجديدة سارية المفعول.

إضافة تأثير Ken Burns Hover إلى أي وحدة بها صورة خلفية

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

إليك كيفية إضافة تأثير كين بيرنز إلى وحدة نصية.

قم أولاً بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف وحدة نصية إلى الصف.

قم بتحديث وحدة النص بالمحتوى التالي:

<h1>We're Engaged!</h1>

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

ثم قم بتحديث خيارات تصميم العنوان على النحو التالي:

خط العنوان: براتا
حجم نص العنوان: 6vw
الحشو المخصص: 10vw top ، 10vw bottom ، 3vw left

مدة الانتقال: 5000 مللي ثانية

أضف الآن إعدادات التحويل التالية إلى وحدة النص.

مقياس التحويل المحور السيني (تحوم): 118٪
مقياس تحويل المحور ص (تحوم): 118٪

تحويل المحور السيني للترجمة (تحوم): 6٪
تحويل المحور الصادي للترجمة (التمرير): 6٪

الآن ، قم بتحديث إعدادات الصف باستخدام CSS المخصص التالي للعمود.

العمود الرئيسي العنصر CSS:

overflow:hidden;

الآن تحقق من النتيجة.

لاحظ كيف سيتحول النص وصورة الخلفية معًا عند التمرير.

الجمع بين تأثير Ken Burns Hover وتأثيرات التحويم الإضافية

يمكنك أيضًا الجمع بين تأثير Ken Burns Hover الذي يتم تطبيقه على وحدة مع تأثيرات إضافية لمزيد من الإبداع.

الجمع بين تأثير كين بيرنز هوفر وتأثيرات المرشح

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

لتوضيح ذلك ، دعنا نستخدم المثال أعلاه الذي أضاف تأثير ken burns إلى وحدة نصية. نظرًا لأن وحدة النص لديها بالفعل تأثير تحويم التحويل في مكانه ، فلنضيف تأثير مرشح إضافي لتغيير الصورة من الأسود والأبيض إلى اللون.

افتح إعدادات وحدة النص وقم بتحديث خيار التصفية التالي:

التشبع (افتراضي): 0٪
التشبع (تحوم): 100٪

سيؤدي هذا الانتقال إلى ضبط وحدة النص على 0٪ تشبع افتراضيًا مما يؤدي إلى تجريد اللون مما يجعله أبيض وأسود. سيؤدي التعيين إلى 100٪ عند التمرير إلى إضافة اللون الأصلي للصورة مرة أخرى.

هذا هو التأثير النهائي لتأثير المرشح جنبًا إلى جنب مع تأثير ken burns hovers.

الجمع بين تأثير كين بيرنز تحوم وتأثيرات تحويل الصف

في هذا المثال ، سأوضح لك كيفية دمج تأثير ken burns hovers مع تأثير التحويل الإضافي المضاف إلى الصف. تكمن الفكرة في استخدام تأثيرات التحويل لتغيير حجم الصف وتدويره في حالته الافتراضية ثم استعادة التصميم الأصلي عند التمرير.

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

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

افتح إعدادات الصف الذي يحتوي على وحدة النص. ثم قم بتحديث ما يلي:

الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل ، 0 بكسل يسار ، 0 بكسل يمين

هذا للتأكد من عدم وجود مسافات إضافية بين وحدة النص والصف.

بعد ذلك ، سنقوم بإضافة ظل مربع إلى الصف كما يلي:

Box Shadow: انظر لقطة الشاشة
مربع قوة طمس الظل: 36 بكسل
لون الظل: rgba (0،0،0،0.17)

أضف الآن تأثيرات التحويل التالية:

مقياس التحويل المحور س (الافتراضي): 70٪
مقياس التحويل المحور السيني (تحوم): 100٪
مقياس التحويل المحور ص (افتراضي): 70٪
مقياس تحويل المحور ص (تحوم): 100٪

تحويل محور ص (افتراضي): 19 درجة
تحويل تدوير المحور ص (تحوم): 0 درجة
تحويل تدوير المحور z (افتراضي): 23deg
تحويل محور z (تحوم): 0deg

الآن دعنا نتحقق من النتيجة النهائية.

إضافة تأثير Ken Burns Hover إلى صف كامل من المحتوى

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

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!