เอฟเฟกต์โฮเวอร์ที่ไม่ซ้ำใครสำหรับตัวสร้างออกซิเจน

เผยแพร่แล้ว: 2022-04-10

ในบทช่วยสอนนี้ เราจะสร้างเอฟเฟกต์โฮเวอร์เฉพาะสำหรับเนื้อหาที่แสดงใน Oxygen Builder Repeaters จำลองจาก Codrops "Distortion Hover Effect" และใช้ซอร์สโค้ดจากทรัพยากรนั้น เอฟเฟกต์นี้จะสร้างการเฟดที่บิดเบี้ยวไปยังภาพที่ผู้ใช้กำหนดเมื่อผู้เยี่ยมชมวางเมาส์เหนือเซลล์ทวน

บทช่วยสอนนี้จะรวมเอาแนวคิดเจ๋งๆ ของ Oxygen Builder:

  • เทคนิคการทำซ้ำขั้นสูง
  • กลุ่มฟิลด์ ACF และการรวมด้วยตนเองกับ Oxygen Builder
  • ตาราง CSS พื้นฐาน
  • แอตทริบิวต์แบบไดนามิก
  • การใช้บล็อกโค้ด & JS . ระดับกลาง

ก้าวไปอีกขั้น เราจะทำให้คุณลักษณะนี้เป็นคุณลักษณะไดนามิก 100% ซึ่งหมายความว่าระบบจะตั้งค่าและลืมไปเลย ไม่จำเป็นต้องเริ่มต้นเอฟเฟกต์เฉพาะสำหรับแต่ละเซลล์!

ติดตาม (ดาวน์โหลดที่มา):

หมายเหตุ: นี่เป็นการพิสูจน์แนวคิด และมีแนวโน้มว่าจะต้องมีการปรับให้เหมาะสมเพื่อใช้ในไซต์การผลิต

อีกสองสิ่ง:

  • เรากำลังเปิดหลักสูตร Oxygen Builder คุณสามารถเรียนรู้เพิ่มเติมได้ที่นี่ และเข้าร่วมในรายชื่อผู้รอ
  • นี่เป็นบทช่วยสอนที่ ขอในกลุ่ม Facebook ที่ ยอดเยี่ยมของเรา เราชอบที่จะให้คุณเข้าร่วม!

การสาธิตเอฟเฟกต์:

demo_iso_effect_oxygen_builder

ขั้นตอนที่ 1: ACF Fields

เราจะใช้ ACF เพื่อทำให้เป็นไดนามิก 100% และง่ายสำหรับผู้ใช้ในการแก้ไข สร้างกลุ่มฟิลด์ และเพิ่มรูปภาพโฮเวอร์และรูปภาพการกระจัด ภาพเริ่มต้นจะเป็นภาพเด่นของโพสต์ รูปภาพโฮเวอร์คือสิ่งที่เอฟเฟกต์จะจางหายไปเมื่อผู้เยี่ยมชมวางเมาส์เหนือโพสต์ทวน

รูปภาพการกระจัดคือสิ่งที่จะใช้เพื่อสร้างแอนิเมชั่น morph/fade ที่ไม่ซ้ำกันระหว่างสองภาพ ในตัวอย่างนี้ เรากำลังใช้ภาพต่อไปนี้สำหรับการกระจัด:

คุณสามารถใช้ภาพใดก็ได้ แต่ภาพขาวดำที่มีพื้นผิวที่ยอดเยี่ยมมักจะดีที่สุด การทดลองด้วยวิธีนี้ทำได้ง่าย!

isotropic-2022-04-07-at-12-11-43
สร้างกลุ่มฟิลด์และกำหนดให้กับประเภทโพสต์
isotropic-2022-04-07-at-12-11-24
รูปแบบการส่งคืนรูปภาพแต่ละรูปแบบควรเป็น URL ของรูปภาพ

นี่คือลักษณะของกลุ่มฟิลด์และรูปภาพที่เกี่ยวข้องเมื่อเพิ่มโพสต์ใหม่:

isotropic-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-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- นี่คือ "ตัวตัดทอนรูปภาพ" div" --> <img src="img/Img22.jpg" alt="รูปภาพ"/> <img src="img/Img21.jpg" alt="รูปภาพ"/> </div> <div class=" grid__item-content"> <!-- นี่คือ "ตัวห่อเนื้อหา div> --> <span class="grid__item-meta">แคลิฟอร์เนีย</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>
isotropic-2022-04-07-at-13-12-26

เราเพียงแค่ทำซ้ำโครงสร้าง HTML ด้านบนด้วยองค์ประกอบ Oxygen Builder อย่าลืมเพิ่มคลาสจากตัวอย่าง HTML ด้านบน เนื่องจากเราจะเพิ่ม CSS และ JS ใช้เพื่อระบุองค์ประกอบเฉพาะ หากคุณเปลี่ยนคลาสเหล่านี้ คุณจะต้องอัปเดต CSS และ JS ตามลำดับ

Repeater ของเราใช้กริด CSS เพื่อแบ่งเซลล์ทั้งหมดเท่าๆ กันโดยไม่ต้องทำงานมาก:

isotropic-2022-04-07-at-13-25-06

ขั้นตอนที่ 3: สร้างไดนามิก

มีหลายสิ่งที่ต้องกำหนดค่าให้เป็นไดนามิก ขั้นแรก ให้ทำการรีพีทเตอร์ค้นหาประเภทโพสต์ของ WordPress

ถัดไป ตั้งค่าวันที่และชื่อโพสต์เป็นไดนามิก

isotropic-2022-04-07-at-13-17-17

ตอนนี้เราจะตั้งค่าสามภาพ นี่คือสิ่งที่อาจซับซ้อน ตั้งค่า URL ของรูปภาพ 1 ให้เป็น URL รูปภาพเด่น

isotropic-2022-04-07-at-13-20-11

ตั้งค่า URL ของรูปภาพ 2 ให้เป็นรูปภาพโฮเวอร์ ตั้งค่าใน ACF สำหรับบทช่วยสอนนี้ ฟิลด์ ACF ไม่แสดงในป๊อปอัป "แทรกข้อมูลไดนามิก" (น่าจะเกิดจากจุดบกพร่อง Oxygen Builder 4.0 Beta 2) มีวิธีแก้ปัญหาง่ายๆ หากคุณเคยประสบปัญหานี้:

1 - แทรกข้อมูลไดนามิก

2 - เลือกค่าส่งคืนฟังก์ชัน PHP

isotropic-2022-04-07-at-13-20-47

3 - แทรกเนื้อหาฟิลด์ ACF ด้วยตนเองด้วย get_field('fieldname')

isotropic-2022-04-07-at-13-21-30

สุดท้าย เราต้องตั้งค่าภาพบิดเบี้ยวที่เอฟเฟกต์จะใช้เพื่อทำการเปลี่ยน morph สิ่งนี้ถูกแทรกลงใน HTML เป็นแอตทริบิวต์ข้อมูล ซึ่ง JS อ่านและรวมไว้ในเอฟเฟกต์ จาก HTML ด้านบน เราจะเห็นได้ว่ามีหลายแอตทริบิวต์ ซึ่งอาจแก้ไขเพื่อเปลี่ยนเอฟเฟกต์ได้

<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- this คือ "image wrapper div" --> ... </div>

สิ่งสำคัญที่เราจำเป็นต้องสร้างไดนามิกคือ data-displacement ซึ่งจะมี URL ของรูปภาพที่ตั้งค่าไว้ในโพสต์โดยใช้ ACF เราได้ฮาร์ดโค้ดแอตทริบิวต์อีกสามรายการไว้ แต่คุณสามารถใช้วิธีการเดียวกันกับที่ระบุไว้ด้านล่างเพื่อให้ผู้ใช้เหล่านี้สามารถแก้ไขได้ด้วย

ไปที่องค์ประกอบ wrapper รูปภาพ (div รอบ ๆ รูปภาพไดนามิกสองภาพ) คลิก ขั้นสูง -> คุณสมบัติ และเพิ่มสิ่งต่อไปนี้

isotropic-2022-04-07-at-13-28-05

สำหรับ data-displacement เราจะสร้างไดนามิกนี้โดยคลิกที่ปุ่ม data+ ในเนื้อหา และแทรกฟิลด์ ACF ที่เกี่ยวข้อง

HTML ส่วนหน้าจะมีลักษณะดังนี้ และ JS จะใช้ข้อมูลทั้งหมดนี้ (ซึ่งเป็นไดนามิกและผู้ใช้แก้ไขได้ผ่าน ACF) เพื่อสร้างเอฟเฟกต์การเลื่อนตำแหน่งที่ยอดเยี่ยมบน WordPress:

isotropic-2022-04-07-at-13-46-39

ขั้นตอนที่ 4: เพิ่ม CSS, ไลบรารี & JS

เราจะเพิ่ม CSS ต่อไปนี้ในสไตล์ชีต Universal CSS ของเรา คุณอาจต้องเล่นกับสไตล์ CSS เพิ่มเติมเพื่อให้ทุกอย่างทำงานได้ดี

.grid__item { ล้น: ซ่อน; ตำแหน่ง:ญาติ; } .grid__item-เนื้อหา { ดัชนี z:5; } .grid__item-img { แสดง: บล็อก; ความสูง: 100%; ความกว้าง: 100%; } .grid__item-img ผ้าใบ (ความสูง: 100%; ตำแหน่ง:แน่นอน; ด้านบน:0; ดัชนี z:1; } .grid__item-img img { ความสูง: 100%; แสดง: บล็อก; } /* นี่เป็นทางเลือกหาก JS ไม่ทำงาน */ .grid__item-img img:nth-child(2) { ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความทึบ: 0; การเปลี่ยนแปลง: ความทึบ 0.3s; } .grid__item: hover .grid__item-img img:nth-child (2) { ความทึบ: 1; } .js .grid__item-img img { แสดง: ไม่มี; }

สุดท้าย เราจะโหลดไลบรารี 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')); hoverEffect ใหม่ ({ parent: el, ความเข้ม: el.dataset.intensity || undefined, speedIn: el.dataset.speedin || undefined, speedOut: el.dataset.speedout || undefined, easing: el.dataset.easing || undefined, โฮเวอร์: el.dataset โฮเวอร์ || undefined, image1: imgs[0].getAttribute('src'), image2: imgs[1].getAttribute('src'), displacementImage: el.dataset.displacement }); }); </script>

เราใช้ Static สำหรับตัวอย่างของเรา (ดึงไลบรารี ImagesLoaded และ Hover Effect จาก GitHub) แต่คุณควรโฮสต์สิ่งนี้บนไซต์ของคุณโดยใช้เครื่องมือเช่น Scripts Organizer หรือ Advanced Scripts

นอกจากนี้เรายังโหลด Three.JS และ TweenMax.JS ซึ่งเป็นไลบรารีพื้นฐานสองแห่งที่ทำงานเพื่อสร้างเอฟเฟกต์การกระจัด

สุดท้าย JS ทำสิ่งต่อไปนี้ - จะระบุเมื่อโหลดรูปภาพและใช้เอฟเฟกต์โฮเวอร์กับองค์ประกอบใด ๆ ที่มี .grid__item-img ดึงรูปภาพที่เกี่ยวข้องและรูปภาพแทนที่จากแต่ละโพสต์ ไดนามิกโดยสมบูรณ์และจะทำงานโดยไม่คำนึงถึงจำนวนโพสต์ที่ส่งคืนโดยตัวทำซ้ำ Oxygen Builder

หลังจากเพิ่มทั้งหมดนี้ เอฟเฟกต์ของคุณควรใช้งานได้!

สิ่งนี้ถูกร้องขอโดยสมาชิกของ Isotropic Facebook Group ของเรา เราขอเชิญคุณเข้าร่วมที่นี่

สมัครสมาชิก & แชร์
หากคุณชอบเนื้อหานี้ สมัครรับข่าวสาร WordPress แรงบันดาลใจเว็บไซต์ ข้อเสนอสุดพิเศษและบทความที่น่าสนใจทุกเดือนของเรา
ยกเลิกการสมัครได้ตลอดเวลา เราไม่สแปมและจะไม่ขายหรือแบ่งปันอีเมลของคุณ