تأثير التحويم الفريد لمكررات منشئ الأكسجين

نشرت: 2022-04-10

في هذا البرنامج التعليمي ، سنقوم ببناء تأثير تحوم فريد للمحتوى المعروض في مكررات منشئ الأكسجين. على غرار نموذج Codrops "Distortion Hover Effect" ، وباستخدام شفرة المصدر من هذا المورد ، سيؤدي هذا التأثير إلى تلاشي مشوه للصورة التي يحددها المستخدم عندما يحوم الزائر على خلية مكرر.

سيتضمن هذا البرنامج التعليمي بعض المفاهيم الرائعة لـ Oxygen Builder:

  • تقنيات مكرر متقدمة
  • المجموعات الميدانية ACF والتكامل اليدوي مع Oxygen Builder
  • شبكة CSS الأساسية
  • السمات الديناميكية
  • استخدام كتلة الكود و JS الوسيطة

بأخذ خطوة إلى الأمام ، سنجعل هذه ميزة ديناميكية بنسبة 100٪ ، مما يعني أنه سيتم تعيينها ونسيانها. لا حاجة لتهيئة تأثير معين لكل خلية!

اتبع على طول (تنزيل المصدر):

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

شيئين آخرين:

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

عرض التأثير:

demo_iso_effect_oxygen_builder

الخطوة 1: حقول ACF

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

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

7
8

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

الخواص -2022-04-07-at-12-11-43
قم بإنشاء مجموعة ميدانية وتخصيصها لنوع المنشور.
الخواص -2022-04-07-at-12-11-24
يجب أن يكون كل تنسيق إرجاع للصورة هو عنوان URL للصورة.

هذا هو الشكل الذي تبدو عليه المجموعة الميدانية والصور المرتبطة بها عند إضافة منشور جديد:

الخواص -2022-04-07-at-12-53-46
من السهل تبديل أي من الصور الثلاث.

الخطوة 2: قم بإنشاء هيكل للتأثير

في جوهره ، نقوم بنسخ الكود المصدري من مثال Codrops ، مع تعديلات طفيفة.

<div class = "grid"> <! - هذا هو المكرر -> <div class = "grid__item grid__item - bg"> <! - هذا هو div في المكرر -> <div class = " Grid__item-img "data -acement =" img / div "-> <img src =" img / Img22.jpg "alt =" Image "/> <img src =" img / Img21.jpg "alt =" Image "/> </div> <div class =" grid__item-content "> <! - this is the" content wrapper div> -> <span class = "grid__item-meta"> California </span> <h2 class = "grid__item-title"> القفز حول </ h2 > <h3 class = "grid__item-subtitle"> <span> آخر مواضع قفزة فارغة في كاليفورنيا </ span> <a class="grid__item-link" href="#"> اكتشف المزيد </a> </h3> </ div> </div> </div>
الخواص -2022-04-07-at-13-12-26

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

يستخدم مكررنا شبكة CSS لتباعد جميع الخلايا بالتساوي دون بذل الكثير من الجهد:

الخواص -2022-04-07-at-13-25-06

الخطوة 3: اجعل ديناميكيًا

هناك العديد من الأشياء لتكوينها لتكون ديناميكية. أولاً ، اجعل استعلام التكرار من نوع WordPress Post.

بعد ذلك ، قم بتعيين التاريخ وعنوان المنشور ليكونا ديناميكيين.

الخواص -2022-04-07-at-13-17-17

الآن ، سنقوم بإعداد الصور الثلاث. هذا هو المكان الذي قد تتعقد فيه الأشياء. قم بتعيين عنوان URL للصورة 1 ليكون عنوان URL للصورة المميزة.

الخواص -2022-04-07-at-13-20-11

قم بتعيين عنوان URL للصورة 2 ليكون صورة التمرير ، المحددة في ACF. بالنسبة لهذا البرنامج التعليمي ، لم يتم عرض حقول ACF في النافذة المنبثقة "إدراج بيانات ديناميكية" (على الأرجح بسبب خطأ Oxygen Builder 4.0 Beta 2). هناك حل بديل سهل إذا واجهت هذا من قبل:

1 - ادخال البيانات الديناميكية

2 - تحديد قيمة إرجاع دالة PHP

الخواص -2022-04-07-at-13-20-47

3 - أدخل محتوى حقل ACF يدويًا باستخدام get_field('fieldname')

الخواص -2022-04-07-at-13-21-30

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

<div class = "grid__item-img" data-pull = "img / مسافة / 8.jpg" data -ensity = "- 0.65" data-speedIn = "1.2" data-speedOut = "1.2"> <! - هذا هو "غلاف الصورة div" -> ... </div>

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

انتقل إلى عنصر غلاف الصورة (div حول الصورتين الديناميكيتين). انقر فوق خيارات متقدمة -> السمات ، وأضف ما يلي.

الخواص -2022-04-07-at-13-28-05

data-displacement ، سنجعل هذه ديناميكية بالنقر فوق الزر data + في المحتوى ، وإدخال حقل ACF المقابل.

ستبدو واجهة HTML على هذا النحو ، وستستخدم JS كل هذه البيانات (وهي ديناميكية وقابلة للتعديل من قبل المستخدم عبر ACF) لإنشاء تأثير تمرير الإزاحة الرائع على WordPress:

الخواص -2022-04-07-at-13-46-39

الخطوة 4: أضف CSS والمكتبات و JS

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

.grid__item {overflow: hidden؛ الموقف: نسبي ؛ } .grid__item-content {z-index: 5 ؛ } .grid__item-img {display: block؛ الارتفاع: 100٪؛ العرض: 100٪؛ } قماش .grid__item-img {height: 100٪؛ الموقف: مطلق. أعلى: 0؛ مؤشر z: 1 ؛ } .grid__item-img img {height: 100٪؛ العرض محجوب؛ } / * هذا احتياطي إذا لم تعمل JS * / .grid__item-img: nth-child (2) {position: absolute؛ أعلى: 0؛ اليسار: 0؛ العتامة: 0؛ الانتقال: العتامة 0.3 ثانية ؛ } .grid__item: hover .grid__item-img img: nth-child (2) {opacity: 1؛ } .js .grid__item-img img {display: none؛ }

أخيرًا ، سنقوم بتحميل مكتبات JS الضرورية ، والتعليمات البرمجية (قمنا بذلك باستخدام كتلة التعليمات البرمجية):

<script src = "https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/example/js/imagesloaded.pkgd.min.js"> </script> <script src = "https : //cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js "> </script> <script src =" https://cdnjs.cloudflare.com/ajax/libs/gsap/latest /TweenMax.min.js "> </script> <script src =" https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/dist/hover-effect.umd.js "> </script> <script> imagesLoaded (document.querySelectorAll ('img')، () => {document.body.classList.remove ('loading')؛})؛ Array.from (document.querySelectorAll ('. grid__item-img')). forEach ((el) => {const imgs = Array.from (el.querySelectorAll ('img'))؛ new hoverEffect ({parent: el، الكثافة: el.dataset.intensity || غير محدد ، السرعة In: el.dataset.speedin || غير محدد ، speedOut: el.dataset.speedout || غير محدد ، التخفيف: el.dataset.easing || غير محدد ، التمرير: el.dataset. hover || undefined، image1: imgs [0] .getAttribute ('src')، image2: imgs [1] .getAttribute ('src') ،acementImage: el.dataset.displacement})؛})؛ </script>

نحن نستخدم Statically في مثالنا (سحب مكتبات ImagesLoaded و Hover Effect من GitHub) ، ولكن يجب أن تستضيف هذا بشكل مثالي على موقعك باستخدام أداة مثل Scripts Organizer أو Advanced Scripts.

نقوم أيضًا بتحميل Three.JS و TweenMax.JS ، وهما المكتبتان الأساسيتان اللتان تعملان على توليد تأثير الإزاحة.

أخيرًا ، يقوم JS بما يلي - يحدد متى يتم تحميل الصور ويطبق تأثير التمرير على أي عنصر يحتوي على .grid__item-img ، ويسحب الصور المرتبطة وصور الإزاحة من كل منشور. ديناميكي تمامًا وسيعمل بغض النظر عن عدد الوظائف التي يتم إرجاعها بواسطة مكرر Oxygen Builder.

بعد إضافة كل هذا ، يجب أن يعمل تأثيرك!

تم طلب ذلك من قبل أحد أعضاء مجموعة Isotropic Facebook. ندعوك للانضمام هنا.

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