Divi: วิธีเพิ่มเอฟเฟกต์การเอียงเมื่อวางเมาส์เหนือองค์ประกอบ

คุณต้องการเพิ่มเอฟเฟกต์การเอียงด้วย Divi ในองค์ประกอบใด ๆ ของหน้าของคุณ?

การเพิ่มเอฟเฟกต์การเอียงโฮเวอร์ให้กับ .ของคุณ เว็บไซต์เว็บ เป็นหนึ่งในวิธีที่สนุกและมีส่วนร่วมที่จะนำ .ของคุณ เว็บไซต์เว็บ Divi. โดยปกติการออกแบบประเภทนี้ต้องใช้ปลั๊กอินหรือโค้ดขั้นสูง แต่กระบวนการนี้ง่ายกว่ามากเมื่อใช้ Tilt.js (เอฟเฟกต์การเอียงแบบโฮเวอร์เล็กน้อยสำหรับ jQuery) ด้วย Tilt.js คุณสามารถใช้เอฟเฟกต์การเอียงแบบโฮเวอร์กับอะไรก็ได้ในไม่กี่นาที

ในบทช่วยสอนนี้ เราจะแสดงวิธีเพิ่มเอฟเฟกต์การเอียงของโฮเวอร์ให้กับองค์ประกอบใดๆ ของ Divi. ด้วยการใช้การผสมผสานระหว่างตัวอย่าง jQuery Tilt.js และตัวสร้าง Divi เราจะแสดงวิธีเพิ่มเอฟเฟกต์การเอียงโฮเวอร์ที่ยอดเยี่ยมให้กับรูปภาพ คอลัมน์โมดูล แถว ฯลฯ 

เราจะแสดงให้คุณเห็นถึงวิธีการเพิ่มเอฟเฟกต์พารัลแลกซ์ 3 มิติที่น่าทึ่ง

ขอเริ่มต้น!

การสำรวจ

นี่คือภาพรวมโดยย่อของผลลัพธ์ที่เราจะได้รับในบทช่วยสอนนี้

ดูสิ่งนี้ด้วย: Divi: วิธีเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือตัวแบ่งส่วน

สิ่งที่คุณต้องเริ่มต้น

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

เพิ่มเอฟเฟกต์การเอียงบนโฮเวอร์ขององค์ประกอบใด ๆ ใน Divi

เพิ่มเอฟเฟกต์ Tilt Hover ให้กับโมดูล Divi

เริ่มต้นด้วยการเพิ่มแถวสามคอลัมน์ในส่วนปกติที่เป็นค่าเริ่มต้น

เพิ่มโมดูลรูปภาพ

ในคอลัมน์แรก เพิ่มโมดูลรูปภาพ

หมายเหตุ: คุณสามารถใช้โมดูลใดก็ได้ตามต้องการ ไม่จำเป็นต้องเป็นโมดูลรูปภาพเลย

อัปโหลดรูปภาพที่คุณเลือก 

เพิ่มคลาสโมดูลรูปภาพ

ภายใต้แท็บ ระดับสูงเพิ่มคลาส CSS ต่อไปนี้:

• CSS คลาส: et-js-tilt

คลาสนี้จะใช้เป็นตัวเลือกสำหรับฟังก์ชันการเอียงของเราในภายหลัง

คัดลอกและวางโมดูลรูปภาพก่อนหน้า

ถัดไป คัดลอกโมดูลรูปภาพแล้ววางหนึ่งรายการลงในแต่ละคอลัมน์ที่เหลืออีกสองคอลัมน์

คุณสามารถแทนที่ภาพที่ซ้ำกันด้วยภาพใหม่ได้หากต้องการ เพียงตรวจสอบให้แน่ใจว่าแต่ละโมดูลรูปภาพเป็นของคลาส CSS “et-js-เอียง”.

เพิ่มไลบรารี JQuery "tilt.js"

เพื่อเพิ่มห้องสมุด เอียง.js และข้อมูลโค้ดที่จำเป็นในการบิดเบือนภาพ เราจะใช้โมดูลโค้ด

ขั้นแรก เพิ่มแถวใหม่หนึ่งคอลัมน์ใต้แถวที่มีอยู่

จากนั้นเพิ่มโมดูลโค้ดในแถวใหม่

จากนั้นเราต้องเข้าถึง ห้องสมุดtil.js โดยการเพิ่มสคริปต์ที่นำเข้าtil.js จาก CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). วางสคริปต์ต่อไปนี้ลงในกล่องรหัส

ใช้โค้ด src ต่อไปนี้ในแท็กสคริปต์เพื่อนำเข้าไลบรารี:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

ควรมีลักษณะดังนี้:

ที่สำคัญต้องนำเข้า เอียง.js ก่อนเพิ่มรหัสที่จะใช้ ดังนั้นหลังจากที่สคริปต์ชี้ไปที่ เอียง.jsเพิ่มแท็กสคริปต์ที่จำเป็นเพื่อห่อ JQuery ที่เราจำเป็นต้องเพิ่ม จากนั้นวาง JQuery ต่อไปนี้ระหว่างแท็กสคริปต์

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {
 
    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });
 
  }
});

โปรดทราบว่าฟังก์ชัน tilt() อยู่ในคำสั่ง if ที่จะทำงานเมื่อความกว้างของเบราว์เซอร์มากกว่า 980px เพื่อให้แน่ใจว่าเอฟเฟกต์จะเกิดขึ้นกับคอมพิวเตอร์เดสก์ท็อปเท่านั้น

นี่คือผลลัพธ์

เพิ่มเอฟเฟกต์โฮเวอร์เอียงให้กับเส้น

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ คุณสามารถเพิ่มเอฟเฟกต์การเอียงของโฮเวอร์นี้ให้กับองค์ประกอบ Divi ใดก็ได้ ซึ่งรวมถึงทั้งบรรทัด 

นอกจากนี้ คุณสามารถเพิ่มเอฟเฟกต์การเอียงให้กับแถวในขณะที่ยังคงเอฟเฟกต์การเอียงสำหรับแต่ละโมดูลภายในแถวได้

นี่คือวิธี

ทำซ้ำบรรทัดและเพิ่มคลาส CSS ที่ไม่ซ้ำกันให้กับ line

ทำซ้ำแถวรูปภาพที่มีอยู่ จากนั้นเปิดการตั้งค่าแถวที่ซ้ำกัน ภายใต้แท็บ ระดับสูงกำหนดคลาส CSS เฉพาะของบรรทัดดังนี้:

• CSS คลาส: et-row-js-tilt

เพิ่ม jQuery

จากนั้นเพิ่ม jQuery ต่อไปนี้ด้านล่างฟังก์ชัน skew ก่อนหน้า เพื่อใช้ฟังก์ชัน skew แยกต่างหากกับบรรทัด

$(".et-row-js-tilt").tilt({
  scale: 1,
  perspective: 1200,
});

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

นี่คือผลลัพธ์

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

เพิ่มเอฟเฟกต์ Tilt Hover ให้กับคอลัมน์ที่มีโมดูล Divi หลายโมดูล

ในบางกรณี จะเป็นประโยชน์ในการเพิ่มเอฟเฟกต์เอียงให้กับคอลัมน์ของโมดูล สิ่งนี้จะช่วยให้คุณสามารถออกแบบโมดูลหลายโมดูลในคอลัมน์ด้วย Divi จากนั้นให้องค์ประกอบทั้งหมดเหล่านั้นทำมุมเป็นหน่วยเดียว 

เพื่อแสดงตัวอย่างวิธีการทำสิ่งนี้ เราจะเพิ่มเอฟเฟกต์การเอียงเมื่อเลื่อนไปที่คอลัมน์ที่มีโมดูลรูปภาพ โมดูลข้อความ และโมดูลปุ่ม

เพิ่มบรรทัดใหม่

ในการเริ่มต้น ให้สร้างแถวใหม่ด้วยโครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลรูปภาพ

ภายในคอลัมน์ 2 (คอลัมน์กลาง) เพิ่มโมดูลรูปภาพใหม่

อัปโหลดรูปภาพไปยังโมดูล

ตั้งค่าการจัดตำแหน่งรูปภาพให้อยู่ตรงกลาง

เพิ่มโมดูลข้อความ

ด้านล่างโมดูลรูปภาพ ให้เพิ่มโมดูลข้อความที่มีส่วนหัว H2 ต่อไปนี้:

<h2>Local Organic</h2>

ถัดไป อัปเดตสไตล์ส่วนหัว H2 ดังนี้:

• แบบอักษร: Berkshire Swash
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #000000
• ขนาด: 60px
• ความสูงของสาย: 1,2 em

เพิ่มโมดูลปุ่ม

ด้านล่างโมดูลข้อความ ให้เพิ่มโมดูลปุ่ม

อัปเดตข้อความปุ่มเป็น "เรียนรู้เพิ่มเติม..."

อัปเดตการตั้งค่าส่วนบุคคลดังนี้:

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม
• ขนาดข้อความของปุ่ม: 18px
• สีข้อความ: #fff
• พื้นหลังปุ่ม: #000

• ความกว้างของขอบปุ่ม: 0 พิกเซล
• รัศมีเส้นขอบ: 100px
• แบบอักษรของปุ่ม: ทรายดูด
• น้ำหนักแบบอักษร: ตัวหนา

• ช่องว่างภายใน (บนและล่าง): 16px
• ช่องว่างภายใน (ซ้ายและขวา): 30px

• กล่องเงา: ดูภาพหน้าจอ

พารามิเตอร์คอลัมน์

เมื่อทั้งสามโมดูลเสร็จสมบูรณ์ ให้เปิดการตั้งค่าสำหรับคอลัมน์หลักของโมดูลเหล่านั้น (คอลัมน์ 2) และอัปเดตสิ่งต่อไปนี้:

• ความเป็นมา: #f5cee6

• ช่องว่างภายใน (บนและล่าง): 50px
• ช่องว่างภายใน (ซ้ายและขวา): 20px

การเพิ่มคลาส CSS ให้กับคอลัมน์

ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: et-column-js-tilt

เพิ่ม jQuery เพื่อใช้เอฟเฟกต์การเอียงกับคอลัมน์

ในการเพิ่มเอฟเฟกต์เอียงให้กับคอลัมน์ เราสามารถเพิ่มข้อมูลโค้ด jQuery ที่คล้ายกันซึ่งกำหนดเป้าหมายคอลัมน์ CSS Class 

วางข้อมูลโค้ดต่อไปนี้ใต้ข้อมูลโค้ดก่อนหน้าที่กำหนดเป้าหมายบรรทัด

$(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});

นี่คือผลสุดท้าย

เพิ่มเอฟเฟกต์พารัลแลกซ์ 3 มิติให้กับภายใน

สำหรับเอฟเฟกต์การเอียงแบบโฮเวอร์ขั้นสูง เราสามารถเพิ่มเอฟเฟกต์พารัลแลกซ์ 3 มิติให้กับโมดูลคอลัมน์ภายในได้ 

ด้วยการใช้เปอร์สเปคทีฟและ transform:translateZ() ร่วมกัน เราสามารถทำให้แต่ละโมดูลของคอลัมน์ปรากฏในพื้นที่ 3 มิติ เมื่อเอฟเฟกต์เอียงบนโฮเวอร์ทำงานอยู่

นี่คือวิธี

ซ้ำบรรทัดก่อนหน้า

ขั้นแรก ทำซ้ำแถวก่อนหน้าโดยเพิ่มเอฟเฟกต์เอียงลงในคอลัมน์กลาง

เพิ่มคลาสคอลัมน์เดียว

จากนั้นอัปเดตคอลัมน์กลาง (คอลัมน์ 2) ด้วยคลาส CSS เฉพาะดังนี้:

• คลาส CSS: et-column-js-tilt-3d

CSS ที่กำหนดเอง

เพื่อให้แน่ใจว่าโมดูลภายในคงเอฟเฟกต์ 3D ไว้ ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบคอลัมน์หลัก:

transform-style: preserve-3d;

เพิ่ม jQuery และ CSS

ถัดไป เพิ่มข้อมูลโค้ด jQuery เพิ่มเติมด้านล่างข้อมูลโค้ดฟังก์ชัน skew ก่อนหน้าที่กำหนดเป้าหมายคอลัมน์ดังนี้:

const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
  scale: 1.1,
  perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
  $(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
  $(e.target).removeClass("tilt-active");
});

jQuery นี้เพิ่มฟังก์ชันการเอียงพื้นฐานอื่นๆ ให้กับคอลัมน์ เช่นเดียวกับตัวอย่างก่อนหน้านี้ 

.et-column-js-tilt-3d.tilt-active .et_pb_image {
  transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
  transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
  transform: translateZ(50px);
}

ตอนนี้เห็นผลสุดท้าย สังเกตว่าโมดูลทั้งสามปรากฏในพื้นที่ 3 มิติ ขณะที่หมุนระหว่างเอฟเฟกต์การเอียง

อ่าน: Divi: วิธีเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือตัวแบ่งส่วน

ผลสุดท้าย

ต่อไปนี้คือผลลัพธ์สุดท้ายสำหรับตัวอย่างของเรา

ดาวน์โหลด DIVI ทันที !!!

สรุป

เอฟเฟกต์เอียงโฮเวอร์ที่นำเสนอโดย Tilt.js เป็นเรื่องสนุกที่จะทดลองด้วย 

แม้ว่าเราจะใช้ตัวอย่างพื้นฐานสองสามตัวอย่างในบทช่วยสอนนี้ แต่คุณสามารถมีวันภาคสนามได้อย่างง่ายดายโดยใช้เอฟเฟกต์การเอียงของโฮเวอร์เหล่านี้กับหนึ่งในเลย์เอาต์ที่สร้างไว้ล่วงหน้าของเราหรือกับไซต์ของคุณเอง

เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...