كيفية إضافة تأثير التمرير لأسفل لمعاينة تصميمات صفحة الويب في Divi

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

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

نظرة خاطفة

فيما يلي معاينة لتأثير التمرير لأسفل الذي سنقوم ببنائه معًا في هذا البرنامج التعليمي.

قم بتنزيل Scroll Down Hover Effect Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

الآن دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

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

إنشاء صف الأعمدة الثلاثة

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

قم بتحديث إعدادات الصف كما يلي:

العرض المخصص: 100٪
الحشو المخصص (سطح المكتب): 5٪ يسار ، 5٪ يمين
الحشو المخصص (الجهاز اللوحي): يسار 25٪ ، يمين 25٪
الحشو المخصص (الهاتف): 15٪ يسار ، 15٪ يمين

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

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

overflow: hidden;
height: 400px;

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

overflow: hidden;
height: 400px;

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

overflow: hidden;
height: 400px;

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

إنشاء الصورة باستخدام تأثير التمرير لأسفل

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

هيريس كيفية القيام بذلك.

أضف وحدة صورة إلى العمود 1. ثم أضف خيارات التمرير التالية:

الهامش المخصص (التمرير): 400 بكسل للأعلى
تحويل المحور ص للترجمة (التمرير): -100٪

تأكد من أن الهامش العلوي المخصص عند التمرير يساوي الارتفاع المعطى لعمودك في CSS المخصص أعلاه.

أيضًا ، قيمة المحور Y لترجمة التحويل هي نسبة مئوية (-100٪) ، وليست بكسل ، لذلك ستحتاج إلى إدخال هذا يدويًا عن طريق كتابة القيمة في مربع الإدخال لعناصر تحكم ترجمة التحويل.

كيف يعمل تأثير التمرير لأسفل

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

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

أولاً ، تنقل خاصية التحويل التحويلية الصورة لأعلى بقيمة -100٪ للمحور الصادي. بمعنى آخر ، تتحرك الصورة لأعلى بنسبة 100٪ مهما كان ارتفاع الصورة (700 بكسل).

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

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

هذا ما تبدو عليه النتيجة في المثال الحي.

ضبط مدة الانتقال ومنحنى السرعة

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

قم بتحديث ما يلي:

مدة الانتقال: 4000 مللي ثانية
منحنى سرعة الانتقال: سهولة

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

انسخ والصق وحدة الصورة النمطية في الأعمدة المتبقية

الآن كل ما عليك فعله هو نسخ وحدة الصورة ولصقها في العمود 2 والعمود 3. ثم قم بتحديث الصور لكل صورة جديدة تريدها. هذا كل شيء!

إضافة عنوان فوق كل صورة باستخدام وحدة نصية

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

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

ثم قم بتحديث المحتوى بعنوان h2 كما يلي:

<h2>Homepage</h2>

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

لون الخلفية: #ffffff
اتجاه النص: الوسط
حجم نص العنوان 2: 20 بكسل
ارتفاع خط العنوان 2: 2em
الهامش المخصص: 0 بكسل للأسفل
الحشو المخصص: أعلى 10 بكسل
Box Shadow: انظر لقطة الشاشة

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

ارتفاع السطر هو 2em وهو ضعف حجم نص العنوان 2 (20 بكسل). هذا يعني أن ارتفاع خطي سيكون 40 بكسل.

تم ضبط المساحة المتروكة العلوية المخصصة على 10 بكسل. وهناك حشوة سفلية مخفية تبلغ 10 بكسل موجودة بالفعل لجميع العناوين افتراضيًا في Divi. يتم دمج الحشوة العلوية والسفلية للحصول على ارتفاع إضافي بمقدار 20 بكسل.

لذا ... 40 بكسل (من ارتفاع الخط) + 20 بكسل (من المساحة المتروكة) = 60 بكسل

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

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

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

أضف CSS المخصص التالي إلى العنصر الرئيسي:

position:relative;

ثم قم بتحديث الفهرس z:

الفهرس Z: 3

نسخ ولصق وحدة النص

الآن بعد أن تم الانتهاء من عنوان النص ، يمكننا نسخه ولصقه (باستخدام وضع عرض الإطار السلكي) فوق الصور الموجودة في العمود 2 و 3.

ثم كل ما عليك فعله هو تحديث المحتوى لكل منهما.

قم بتحديث قيمة الهامش الأعلى عند التمرير لكل صورة لتلائم ارتفاع وحدة النص

في الوقت الحالي ، تحتوي كل صورة في الأعمدة 1 و 2 و 3 على هامش علوي مخصص يبلغ 400 بكسل عند التمرير. تم تعيين هذا على مساوٍ لارتفاع العمود المخصص. ومع ذلك ، نظرًا لأن وحدة النص تشغل الآن بعضًا من مساحة العمود (ارتفاع 60 بكسل) ، فنحن بحاجة إلى ضبط قيمة تمرير الهامش العلوي.

للقيام بذلك ، استخدم ميزة التحديد المتعدد لتحديد الصور الثلاث. ثم قم بتحديث إعدادات العنصر كما يلي:

الهامش المخصص (التمرير): 340 بكسل للأعلى

الآن ستتوقف صورك تمامًا في أسفل العمود في نهاية حالة التمرير.

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

ها هي النتيجة النهائية للتصميم.

لا تتردد في تكرار الصف وتحديث الصور ونص العنوان حسب الحاجة لمزيد من شاشات العرض.

هذا ما يبدو على الجهاز اللوحي والهاتف.

افكار اخيرة

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

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

هتافات!