วิธีสร้างเอฟเฟกต์แอนิเมชั่น Mousemove 3D แบบไดนามิกใน Divi

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

ในการสร้าง เราจะใช้ตัวสร้าง Divi สำหรับการออกแบบจำนวนมาก จากนั้นเราจะใช้ CSS และ JQuery ที่กำหนดเองเพื่อสร้างฟังก์ชันแอนิเมชั่น

เมื่อเสร็จแล้ว คุณจะมีการออกแบบที่น่าประทับใจเพื่อนำเสนอผลิตภัณฑ์หรือบริการใหม่ในโครงการต่อไปของคุณ!

มาเริ่มกันเลย.

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

คุณยังสามารถตรวจสอบโค้ดเพนนี้เพื่อดูการสาธิตเอฟเฟกต์แบบสด

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

การสร้างเอฟเฟกต์แอนิเมชั่น 3D Mousemove แบบไดนามิกใน Divi

ส่วนที่ 1: การสร้างคอนเทนเนอร์โฮเวอร์และการ์ดที่มีแถวและคอลัมน์

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

แต่ก่อนที่เราจะสร้างแถวและคอลัมน์ เรามาจัดรูปแบบส่วนกันเสียก่อน

มาตรา

ในการเริ่มต้น ให้เปิดการตั้งค่าสำหรับส่วนปกติที่เป็นค่าเริ่มต้นและอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: rgba(68,55,99,0.1)

• Padding: บน 7vh ล่าง 7vh

แถว (โฮเวอร์คอนเทนเนอร์)

เพิ่มแถวหนึ่งคอลัมน์ในส่วน

การตั้งค่าแถว

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 70% (เดสก์ท็อป), 60% (แท็บเล็ต), 50% (โทรศัพท์)
• Padding: 7vh, บน, 7vh ล่าง, 5vw ซ้าย, 5vw ขวา

หมายเหตุ: เคล็ดลับในที่นี้คือ การสร้างแถวที่มีพื้นที่ว่างรอบๆ คอลัมน์เพียงพอ เพื่อให้คุณสามารถมีส่วนร่วมกับอนิเมชั่น mousemove ของการ์ดโดยเลื่อนเคอร์เซอร์ไปรอบๆ บริเวณแถวทั้งหมด (ไม่ใช่คอลัมน์) วิธีนี้จะทำให้คุณมีพื้นที่มากขึ้นในการเคลื่อนย้ายการ์ด คุณยังต้องการเว้นที่ว่างรอบๆ แถวให้เพียงพอ เพื่อให้คุณสามารถย้ายเคอร์เซอร์ไปด้านนอกของแถว (ไปยังพื้นที่ส่วนรอบๆ แถว) เพื่อปลดแอนิเมชั่นและอนุญาตให้องค์ประกอบของการ์ดกลับเข้าที่

ภายใต้แท็บขั้นสูง กำหนดคลาสแบบกำหนดเองให้กับแถว:

• CSS Class: et-hover-container

จากนั้นเพิ่ม CSS ต่อไปนี้ในองค์ประกอบหลัก:

display:flex;
align-items:center;
justify-content:center;

ตัวอย่างเล็ก ๆ นี้ช่วยให้คอลัมน์มีศูนย์กลางในแนวตั้งและแนวนอนภายในแถว (จำเป็นเพราะเราจะกำหนดความกว้างสูงสุดให้กับคอลัมน์ของเรา)

คอลัมน์ (หรือการ์ด)

หลังจากอัปเดตแถวแล้ว ให้เปิดการตั้งค่าสำหรับคอลัมน์เพื่อสร้างสไตล์สำหรับการ์ดของเราดังนี้:

• สีพื้นหลัง: #ffffff

• ช่องว่างภายใน: บน 7vh บน 7vh ล่าง 5% ซ้าย 5% ขวา
• มุมโค้งมน: 30px

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.2)

ภายใต้แท็บขั้นสูง ให้คอลัมน์เป็นคลาสที่กำหนดเอง:

• CSS Class: et-mousemove-card

จากนั้นเพิ่ม CSS ที่กำหนดเองนี้ไปยังองค์ประกอบหลัก:

max-width: 600px;

จากนั้นตรวจสอบให้แน่ใจว่าได้ตั้งค่าคุณสมบัติล้นเป็น "มองเห็นได้"

• แนวนอนล้น: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

หมายเหตุ: การให้คอลัมน์มีความกว้างสูงสุด 600px ทำให้การออกแบบมีความสอดคล้องกันมากขึ้นในขนาดเบราว์เซอร์ที่แตกต่างกัน และยังเพิ่มจำนวนพื้นที่โฮเวอร์รอบคอลัมน์สำหรับคอนเทนเนอร์โฮเวอร์ (หรือแถว) รัศมีของเส้นขอบ (มุมโค้งมน) ที่เราเพิ่มเข้าไปจะซ่อนส่วนล้น ดังนั้นเราจำเป็นต้องตั้งค่าส่วนที่ล้นให้มองเห็นได้ หากเราไม่ทำเช่นนี้ ภาพเคลื่อนไหวจะไม่ทำงานตามที่คาดไว้

ตอนที่ 2: การสร้างองค์ประกอบการ์ด

#1 พื้นหลังวงกลมพร้อมโลโก้

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

เพิ่มโมดูลข้อความใหม่ในคอลัมน์

นำข้อความเริ่มต้นออกเพื่อให้เนื้อหาเนื้อหาว่างเปล่า

จากนั้นเพิ่มพื้นหลังไล่ระดับสี:

• ไล่สีพื้นหลังซ้ายสี: #443763
• พื้นหลังไล่ระดับสีด้านขวา: #ea3900

นอกจากพื้นหลังแบบไล่ระดับแล้ว ให้เพิ่มโลโก้สำหรับรูปภาพพื้นหลังด้วย

• ภาพพื้นหลัง: [เพิ่มภาพโลโก้ png ที่มีขนาดประมาณ 60px x 60px]
• ขนาดภาพพื้นหลัง: ขนาดจริง

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 160px (เดสก์ท็อป), 150px (แท็บเล็ต), 80px (โทรศัพท์)
• ความสูง: 160px (เดสก์ท็อป), 150px (แท็บเล็ต), 80px (โทรศัพท์)
• มุมโค้งมน: 50%

ค่าความกว้างและความสูงที่ตรงกันและรัศมีเส้นขอบ 50% ทำให้เราได้รูปร่างวงกลมที่เราต้องการ

ภายใต้แท็บ ขั้นสูง ให้อัปเดตตำแหน่งดังนี้:

• ตำแหน่ง: Absolute
• ที่ตั้ง: ท็อปเซ็นเตอร์
• ออฟเซ็ตแนวตั้ง: 15%

#2 ภาพการ์ด

ในการสร้างรูปภาพผลิตภัณฑ์ (ในกรณีนี้คือจักรยาน) ให้เพิ่มโมดูลรูปภาพใหม่ภายใต้โมดูลข้อความก่อนหน้า

จากนั้นอัปโหลดภาพไปยังโมดูล ตรวจสอบให้แน่ใจว่าเป็นรูปภาพในรูปแบบ png โดยมีพื้นหลังโปร่งใส ฉันกำลังใช้รูปภาพจักรยานจากแพ็กเลย์เอาต์การซ่อมจักรยานของเรา

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งภาพ: กึ่งกลาง
• ความกว้าง: 90%
• ระยะขอบ: ด้านล่าง 4vh

ใต้แท็บขั้นสูง กำหนดคลาสที่กำหนดเองให้กับรูปภาพ:

• CSS Class: et-card-image

#3 หัวเรื่องการ์ด

เมื่อใส่รูปภาพแล้ว ให้เพิ่มโมดูลข้อความใหม่ใต้โมดูลเพื่อสร้างส่วนหัวของการ์ด

ในเนื้อหาเนื้อหาของโมดูลข้อความใหม่ ให้วาง HTML ส่วนหัว H2 ต่อไปนี้:

<h2>The <span style="color: #ea3900;">Divi</span> Bike</h2>

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• แบบอักษรของหัวเรื่อง 2: Bebas Neue
• การจัดตำแหน่งข้อความหัวเรื่อง 2: center
• หัวเรื่อง 2 สีข้อความ: #443763
• ขนาดข้อความของหัวเรื่อง 2: 75px (เดสก์ท็อป), 60px (แท็บเล็ต), 45px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 0.05em
• ระยะขอบ: ด้านล่าง 4vh

ใต้แท็บขั้นสูง เพิ่มคลาสที่กำหนดเอง:

• CSS Class: et-card-heading

#4 ข้อความข้อมูลการ์ด

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

จากนั้นเพิ่มเนื้อหาต่อไปนี้ในเนื้อหา:

<p>The One and Only Divi Bike<br>(By Elegant Themes)</p>

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• ขนาดข้อความ: 18px (เดสก์ท็อป), 16px (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em
• การจัดตำแหน่งข้อความ: center
• มาร์จิ้น: 4vh

จากนั้นให้โมดูลข้อความเป็นคลาสที่กำหนดเอง:

• CSS Class: et-card-info

#5 ปุ่มการ์ด

ในการสร้างปุ่มสำหรับการ์ด ให้เพิ่มโมดูลปุ่มใหม่ภายใต้โมดูลข้อความข้อมูล

ในโมดอลการตั้งค่าปุ่ม ให้อัปเดตข้อความของปุ่ม

• ข้อความปุ่ม: ทำข้อเสนอ

ใต้แท็บออกแบบ กำหนดลักษณะปุ่มดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 25px (เดสก์ท็อป), 20px (แท็บเล็ต), 16px (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #443763
• ความกว้างของขอบปุ่ม: 0px
• ขอบปุ่ม รัศมี: 30px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.1em
• แบบอักษรของปุ่ม: Bebas Neue
• Padding (เดสก์ท็อป): 0.5em บน 0.5em ล่าง 3em ซ้าย 3em ขวา
• Padding (โทรศัพท์): 0.5em บน 0.5em ล่าง 2em ซ้าย 2em right

จากนั้นให้ปุ่มคลาสที่กำหนดเอง:

• et-card-ปุ่ม

ผลลัพธ์จนถึงตอนนี้

นี่คือผลลัพธ์ของการออกแบบจนถึงตอนนี้

ตอนนี้ ทั้งหมดที่เราต้องการคือโค้ดที่กำหนดเอง

ส่วนที่ 3: การเพิ่มรหัสที่กำหนดเอง (CSS และ JQuery)

เมื่อการออกแบบของเราเสร็จสมบูรณ์แล้ว เราสามารถเพิ่มโค้ด CSS และ JQuery ที่จำเป็นในการสร้างเอฟเฟกต์ภาพเคลื่อนไหว 3 มิติของ mousemove แบบไดนามิกให้กับการ์ด/คอลัมน์และองค์ประกอบการ์ดได้

ในการดำเนินการนี้ ให้เพิ่มโมดูลโค้ดใต้โมดูลปุ่ม

จากนั้นวาง CSS ที่กำหนดเองต่อไปนี้ลงในกล่องโค้ดเพื่อให้แน่ใจว่าได้ใส่ CSS ไว้ในแท็ก สไตล์ แล้ว

/*add perspective to row for 3d perspective of child elements*/ 
.et-hover-container {
perspective: 1000px;
}

/*preserve-3d needed for 3d effect on card elements*/ 
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

/*transition timing function and duration for card elements*/ 
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

ภายใต้ CSS ให้วาง JQuery ต่อไปนี้เพื่อให้แน่ใจว่าได้ใส่โค้ดลงในแท็ก สคริปต์ แล้ว

jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});

เกี่ยวกับรหัส

CSS

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

.et-hover-container {
perspective: 1000px;
}

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

.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

จากนั้นเราตั้งค่าฟังก์ชันกำหนดเวลาการเปลี่ยนและระยะเวลาเมื่อองค์ประกอบของการ์ดเคลื่อนไหว

.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

สุดท้ายนี้ เราใช้คุณสมบัติ transform พร้อมฟังก์ชัน translateZ เพื่อย้ายองค์ประกอบบนแกน z เพื่อสร้างเอฟเฟกต์ป๊อปเอาต์เมื่อใดก็ตามที่เราวางเมาส์เหนือแถวนั้นและเพิ่มคลาส transform-3d ในแต่ละองค์ประกอบ

.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

JQuery

ขั้นแรก เราประกาศตัวแปรทั้งหมดที่จำเป็นในการกำหนดเป้าหมายองค์ประกอบตามคลาสที่กำหนดเอง

//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

จากนั้นเราแนบเหตุการณ์ mousemove กับแถว (หรือโฮเวอร์คอนเทนเนอร์) ด้วยฟังก์ชันที่คำนวณตำแหน่งของเคอร์เซอร์สำหรับทั้งแกน X และ Y ของหน้าต่างเบราว์เซอร์ แล้วหมุนการ์ด mousemove (หรือคอลัมน์) เป็น X และ Y ค่าเปลี่ยนแปลงแบบไดนามิก

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

เพื่อเปิดใช้งานการแปลง CSS (ด้วย translateZ) ที่ย้ายองค์ประกอบการ์ดออกในพื้นที่ Z เราสลับคลาส transform-3d ให้กับแต่ละองค์ประกอบเมื่อวางเมาส์เหนือแถว (หรือโฮเวอร์คอนเทนเนอร์)

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

จากนั้นเราจำเป็นต้องแนบเหตุการณ์ mouseleave กับแถวด้วยฟังก์ชันที่เพิ่มคุณสมบัติการแปลง CSS ด้วยฟังก์ชันการหมุน Y และการหมุน X เป็น 0 องศา การดำเนินการนี้จะล็อคคอลัมน์ (หรือการ์ด) กลับเข้าที่เมื่อเคอร์เซอร์เลื่อนออกจากแถว

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});

ผลสุดท้าย

เช็คผลสุดท้าย!

คุณยังสามารถตรวจสอบโค้ดเพนนี้เพื่อดูการสาธิตเอฟเฟกต์แบบสด

ความคิดสุดท้าย

เอฟเฟกต์แอนิเมชั่น 3d mousemove แบบไดนามิกที่เราสร้างขึ้นในบทช่วยสอนนี้รวมถึงเอฟเฟกต์แอนิเมชั่นขั้นสูงที่ไม่เหมือนใครซึ่งสามารถเรียนรู้ได้ง่ายและน่าตื่นเต้นในการสำรวจ แอนิเมชั่น mousemove ที่อนุญาตให้ผู้ใช้โต้ตอบกับการออกแบบสามารถทำได้ด้วย JQuery สองสามบรรทัด และเอฟเฟกต์โฮเวอร์ 3 มิตินั้นอาศัยคุณสมบัติ CSS สองสามอย่างที่สามารถเรียนรู้ได้ง่าย โดยรวมแล้ว มีความเป็นไปได้มากมายที่สามารถมาจากการรวมตัวสร้างเพจที่ทรงพลัง เช่น Divi เข้ากับเวทย์มนตร์ของ JQuery หวังว่าสิ่งนี้จะมีประโยชน์สำหรับคุณ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!