เอฟเฟกต์โฮเวอร์ที่ไม่ซ้ำใครสำหรับตัวสร้างออกซิเจน
เผยแพร่แล้ว: 2022-04-10ในบทช่วยสอนนี้ เราจะสร้างเอฟเฟกต์โฮเวอร์เฉพาะสำหรับเนื้อหาที่แสดงใน Oxygen Builder Repeaters จำลองจาก Codrops "Distortion Hover Effect" และใช้ซอร์สโค้ดจากทรัพยากรนั้น เอฟเฟกต์นี้จะสร้างการเฟดที่บิดเบี้ยวไปยังภาพที่ผู้ใช้กำหนดเมื่อผู้เยี่ยมชมวางเมาส์เหนือเซลล์ทวน
บทช่วยสอนนี้จะรวมเอาแนวคิดเจ๋งๆ ของ Oxygen Builder:
- เทคนิคการทำซ้ำขั้นสูง
- กลุ่มฟิลด์ ACF และการรวมด้วยตนเองกับ Oxygen Builder
- ตาราง CSS พื้นฐาน
- แอตทริบิวต์แบบไดนามิก
- การใช้บล็อกโค้ด & JS . ระดับกลาง
ก้าวไปอีกขั้น เราจะทำให้คุณลักษณะนี้เป็นคุณลักษณะไดนามิก 100% ซึ่งหมายความว่าระบบจะตั้งค่าและลืมไปเลย ไม่จำเป็นต้องเริ่มต้นเอฟเฟกต์เฉพาะสำหรับแต่ละเซลล์!
ติดตาม (ดาวน์โหลดที่มา):
หมายเหตุ: นี่เป็นการพิสูจน์แนวคิด และมีแนวโน้มว่าจะต้องมีการปรับให้เหมาะสมเพื่อใช้ในไซต์การผลิต
อีกสองสิ่ง:
- เรากำลังเปิดหลักสูตร Oxygen Builder คุณสามารถเรียนรู้เพิ่มเติมได้ที่นี่ และเข้าร่วมในรายชื่อผู้รอ
- นี่เป็นบทช่วยสอนที่ ขอในกลุ่ม Facebook ที่ ยอดเยี่ยมของเรา เราชอบที่จะให้คุณเข้าร่วม!
การสาธิตเอฟเฟกต์:
ขั้นตอนที่ 1: ACF Fields
เราจะใช้ ACF เพื่อทำให้เป็นไดนามิก 100% และง่ายสำหรับผู้ใช้ในการแก้ไข สร้างกลุ่มฟิลด์ และเพิ่มรูปภาพโฮเวอร์และรูปภาพการกระจัด ภาพเริ่มต้นจะเป็นภาพเด่นของโพสต์ รูปภาพโฮเวอร์คือสิ่งที่เอฟเฟกต์จะจางหายไปเมื่อผู้เยี่ยมชมวางเมาส์เหนือโพสต์ทวน
รูปภาพการกระจัดคือสิ่งที่จะใช้เพื่อสร้างแอนิเมชั่น morph/fade ที่ไม่ซ้ำกันระหว่างสองภาพ ในตัวอย่างนี้ เรากำลังใช้ภาพต่อไปนี้สำหรับการกระจัด:
คุณสามารถใช้ภาพใดก็ได้ แต่ภาพขาวดำที่มีพื้นผิวที่ยอดเยี่ยมมักจะดีที่สุด การทดลองด้วยวิธีนี้ทำได้ง่าย!
นี่คือลักษณะของกลุ่มฟิลด์และรูปภาพที่เกี่ยวข้องเมื่อเพิ่มโพสต์ใหม่:
ขั้นตอนที่ 2: สร้างโครงสร้างสำหรับเอฟเฟกต์
ที่แกนหลัก เรากำลังคัดลอกซอร์สโค้ดจากตัวอย่าง Codrops โดยมีการแก้ไขเล็กน้อย
เราเพียงแค่ทำซ้ำโครงสร้าง HTML ด้านบนด้วยองค์ประกอบ Oxygen Builder อย่าลืมเพิ่มคลาสจากตัวอย่าง HTML ด้านบน เนื่องจากเราจะเพิ่ม CSS และ JS ใช้เพื่อระบุองค์ประกอบเฉพาะ หากคุณเปลี่ยนคลาสเหล่านี้ คุณจะต้องอัปเดต CSS และ JS ตามลำดับ
Repeater ของเราใช้กริด CSS เพื่อแบ่งเซลล์ทั้งหมดเท่าๆ กันโดยไม่ต้องทำงานมาก:
ขั้นตอนที่ 3: สร้างไดนามิก
มีหลายสิ่งที่ต้องกำหนดค่าให้เป็นไดนามิก ขั้นแรก ให้ทำการรีพีทเตอร์ค้นหาประเภทโพสต์ของ WordPress
ถัดไป ตั้งค่าวันที่และชื่อโพสต์เป็นไดนามิก
ตอนนี้เราจะตั้งค่าสามภาพ นี่คือสิ่งที่อาจซับซ้อน ตั้งค่า URL ของรูปภาพ 1 ให้เป็น URL รูปภาพเด่น
ตั้งค่า URL ของรูปภาพ 2 ให้เป็นรูปภาพโฮเวอร์ ตั้งค่าใน ACF สำหรับบทช่วยสอนนี้ ฟิลด์ ACF ไม่แสดงในป๊อปอัป "แทรกข้อมูลไดนามิก" (น่าจะเกิดจากจุดบกพร่อง Oxygen Builder 4.0 Beta 2) มีวิธีแก้ปัญหาง่ายๆ หากคุณเคยประสบปัญหานี้:
1 - แทรกข้อมูลไดนามิก
2 - เลือกค่าส่งคืนฟังก์ชัน PHP
3 - แทรกเนื้อหาฟิลด์ ACF ด้วยตนเองด้วย get_field('fieldname')
สุดท้าย เราต้องตั้งค่าภาพบิดเบี้ยวที่เอฟเฟกต์จะใช้เพื่อทำการเปลี่ยน morph สิ่งนี้ถูกแทรกลงใน HTML เป็นแอตทริบิวต์ข้อมูล ซึ่ง JS อ่านและรวมไว้ในเอฟเฟกต์ จาก HTML ด้านบน เราจะเห็นได้ว่ามีหลายแอตทริบิวต์ ซึ่งอาจแก้ไขเพื่อเปลี่ยนเอฟเฟกต์ได้
สิ่งสำคัญที่เราจำเป็นต้องสร้างไดนามิกคือ data-displacement ซึ่งจะมี URL ของรูปภาพที่ตั้งค่าไว้ในโพสต์โดยใช้ ACF เราได้ฮาร์ดโค้ดแอตทริบิวต์อีกสามรายการไว้ แต่คุณสามารถใช้วิธีการเดียวกันกับที่ระบุไว้ด้านล่างเพื่อให้ผู้ใช้เหล่านี้สามารถแก้ไขได้ด้วย
ไปที่องค์ประกอบ wrapper รูปภาพ (div รอบ ๆ รูปภาพไดนามิกสองภาพ) คลิก ขั้นสูง -> คุณสมบัติ และเพิ่มสิ่งต่อไปนี้
สำหรับ data-displacement
เราจะสร้างไดนามิกนี้โดยคลิกที่ปุ่ม data+ ในเนื้อหา และแทรกฟิลด์ ACF ที่เกี่ยวข้อง
HTML ส่วนหน้าจะมีลักษณะดังนี้ และ JS จะใช้ข้อมูลทั้งหมดนี้ (ซึ่งเป็นไดนามิกและผู้ใช้แก้ไขได้ผ่าน ACF) เพื่อสร้างเอฟเฟกต์การเลื่อนตำแหน่งที่ยอดเยี่ยมบน WordPress:
ขั้นตอนที่ 4: เพิ่ม CSS, ไลบรารี & JS
เราจะเพิ่ม CSS ต่อไปนี้ในสไตล์ชีต Universal CSS ของเรา คุณอาจต้องเล่นกับสไตล์ CSS เพิ่มเติมเพื่อให้ทุกอย่างทำงานได้ดี
สุดท้าย เราจะโหลดไลบรารี JS ที่จำเป็น และโค้ด (เราทำสิ่งนี้ด้วยบล็อกโค้ด):
เราใช้ Static สำหรับตัวอย่างของเรา (ดึงไลบรารี ImagesLoaded และ Hover Effect จาก GitHub) แต่คุณควรโฮสต์สิ่งนี้บนไซต์ของคุณโดยใช้เครื่องมือเช่น Scripts Organizer หรือ Advanced Scripts
นอกจากนี้เรายังโหลด Three.JS และ TweenMax.JS ซึ่งเป็นไลบรารีพื้นฐานสองแห่งที่ทำงานเพื่อสร้างเอฟเฟกต์การกระจัด
สุดท้าย JS ทำสิ่งต่อไปนี้ - จะระบุเมื่อโหลดรูปภาพและใช้เอฟเฟกต์โฮเวอร์กับองค์ประกอบใด ๆ ที่มี .grid__item-img
ดึงรูปภาพที่เกี่ยวข้องและรูปภาพแทนที่จากแต่ละโพสต์ ไดนามิกโดยสมบูรณ์และจะทำงานโดยไม่คำนึงถึงจำนวนโพสต์ที่ส่งคืนโดยตัวทำซ้ำ Oxygen Builder
หลังจากเพิ่มทั้งหมดนี้ เอฟเฟกต์ของคุณควรใช้งานได้!
สิ่งนี้ถูกร้องขอโดยสมาชิกของ Isotropic Facebook Group ของเรา เราขอเชิญคุณเข้าร่วมที่นี่