การวางซ้อนรูปภาพเป็นสื่อที่สร้างสรรค์มากในการมอบประสบการณ์การรับชมที่น่าดึงดูดแก่ผู้เยี่ยมชมเว็บไซต์ แอนิเมชั่นแบบกำหนดเองและเอฟเฟกต์โฮเวอร์เป็นวิธีที่ยอดเยี่ยมในการแสดงรูปภาพ และเป็นที่นิยมอย่างมากกับทุกคนในทุกวันนี้ ในบทช่วยสอนวันนี้ เราจะมาดูวิธีสร้างภาพซ้อนทับที่สวยงามด้วยแอนิเมชั่นข้อความแยกผ่าน Divi
เราได้แบ่งการกวดวิชาวันนี้ออกเป็นสามส่วน ในส่วนแรก เราจะมาดูวิธีการสร้างภาพซ้อนทับแบบกำหนดเอง และในตอนต่อไป เราจะเพิ่มโค้ดบางส่วนลงในการออกแบบ และสุดท้าย เราจะดูวิธีสร้างการออกแบบภาพซ้อนทับที่ไม่เหมือนใครโดยใช้ตัวเลือกในตัวของ Divi
มาเริ่มกันเลยโดยไม่ชักช้า
ดูตัวอย่าง
ก่อนที่เราจะเริ่มบทช่วยสอนของวันนี้ มาดูการออกแบบที่เราจะเรียนกันในวันนี้
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลยก่อนที่เราจะเริ่ม
Divi เป็นธีม WordPress ที่ยอดเยี่ยมที่นำเสนอคุณสมบัติที่น่าประทับใจและให้บริการตามวัตถุประสงค์ที่แท้จริงของธีม WordPress อเนกประสงค์ เครื่องมือสร้างเพจที่ใช้งานง่ายมีฟังก์ชันมากมายที่สามารถสร้างการออกแบบที่ยอดเยี่ยมได้ รับธีม และเปิดใช้งานหลังจากการติดตั้ง
สร้างหน้าใหม่จากแดชบอร์ด WordPress และเปิดหน้าเพื่อแก้ไขด้วยตัวสร้าง Divi เลือก "สร้างจากศูนย์" และเราพร้อมที่จะทำงาน!
ส่วนที่ 1: การสร้างการออกแบบ
เราได้กล่าวถึงก่อนหน้านี้ว่าเราจะสร้างโครงสร้างของการออกแบบของเราในส่วนแรก ทันทีที่เราตั้งค่าภาพซ้อนทับด้วยหน้าต่างข้อความแยก เราจะโหลดภาพเคลื่อนไหวในส่วนถัดไป
เพิ่ม: แถว 1
การตั้งค่าแถว
เพิ่มแถว 2 คอลัมน์ปกติในส่วนนี้ และก่อนที่จะเพิ่มโมดูลใดๆ เพิ่มเติม ให้เปลี่ยนการตั้งค่าต่อไปนี้
- ความกว้างของรางน้ำ: 2
การตั้งค่าคอลัมน์
คอลัมน์จะเก็บรูปภาพและองค์ประกอบโอเวอร์เลย์ชัตเตอร์ ดังนั้น นี่จะเป็นคอนเทนเนอร์หลักของเรา นอกจากนี้ คอลัมน์นี้จะเริ่มต้นเอฟเฟกต์โฮเวอร์ของภาพเคลื่อนไหวจากชัตเตอร์ พูดง่ายๆ ก็คือ เมื่อเมาส์เข้ามาในคอลัมน์นี้ แอนิเมชั่นทั้งหมดจะเริ่มต้นขึ้น และทันทีที่เมาส์ออก ภาพเคลื่อนไหวจะกลับสู่สถานะก่อนหน้า
เพิ่มคลาส CSS ลงในคอลัมน์เพื่อเลือกคอลัมน์ของเราเป็น "คอลัมน์ชัตเตอร์" และเพื่อทำให้เคลื่อนไหวในภายหลัง "เมื่อวางเมาส์ไว้"
- CSS Class: คอลัมน์ชัตเตอร์บนโฮเวอร์
ทำการปรับเปลี่ยนต่อไปนี้ด้วย
- แนวนอนล้น: ซ่อน
- ล้นแนวตั้ง: ซ่อน
เพิ่ม: โมดูลรูปภาพ
ตอนนี้ เราจะเพิ่มรูปภาพหลักของเราที่จะอยู่ด้านหลังโอเวอร์เลย์ชัตเตอร์ด้วยโมดูลรูปภาพ
ตอนนี้ทำการเปลี่ยนแปลงเล็กน้อยในการจัดตำแหน่งภายใต้แท็บการออกแบบ
- การจัดตำแหน่งภาพ: กึ่งกลาง
การสร้างข้อความแยกชัตเตอร์ด้านบน
เมื่อวางรูปภาพ เราจะเพิ่มโมดูลข้อความใต้โมดูลรูปภาพเพื่อเพิ่มชัตเตอร์ด้านบน
อัปเดตโมดูลข้อความด้วยข้อความ
เปิดแท็บการออกแบบ ทำการปรับเปลี่ยนเหล่านี้
- แบบอักษรของข้อความ: Poppins
- น้ำหนักแบบอักษรของข้อความ: หนัก
- รูปแบบตัวอักษรของข้อความ: TT
- สีข้อความ: #ffffff
- ขนาดข้อความ: 150px (เดสก์ท็อป), 20vw (แท็บเล็ตและโทรศัพท์)
- ระยะห่างของตัวอักษรข้อความ: -0.03em
- ความสูงของบรรทัดข้อความ: 0em
- การจัดตำแหน่งข้อความ: กึ่งกลาง
ตอนนี้อัปเดตการตั้งค่าการปรับขนาดและระยะห่าง
- ความกว้าง: 100%
- ส่วนสูง: 50%
- ระยะขอบ: 0px ด้านล่าง
ตอนนี้ เพิ่มคลาส CSS ต่อไปนี้จากแท็บขั้นสูง
- CSS Class: ชัตเตอร์ด้านบน
ต่อมา เราจะใช้คลาสเพื่อเปิดและปิดแอนิเมชั่นการแปลงด้วยโค้ดที่กำหนดเอง จากนั้น เพิ่มโค้ด CSS นี้ลงในองค์ประกอบหลัก
display:flex;
align-items:flex-end;
justify-content:center;
เพื่อให้ข้อความของเราอยู่ในตำแหน่ง เราจำเป็นต้องทำการเปลี่ยนแปลงเหล่านี้
การสร้างข้อความแยกชัตเตอร์ด้านล่าง
เนื่องจากข้อความแบ่งชัตเตอร์ด้านบนเสร็จสิ้นแล้ว ให้ทำซ้ำโมดูลข้อความเพื่อสร้างข้อความแยกชัตเตอร์ด้านล่าง คุณไม่จำเป็นต้องเพิ่มคลาส CSS ใดๆ เนื่องจากเราเพิ่งโคลนโมดูลก่อนหน้านี้ CSS Class ก็อยู่ที่นั่นแล้ว แต่เราจำเป็นต้องทำการปรับเปลี่ยนโค้ด CSS ในองค์ประกอบหลัก
display:flex;
align-items:flex-start;
justify-content:center;
อ้างอิงถึง "flex-start" ข้อความอยู่ในแนวตั้งที่ด้านบนของโมดูล ในโมดูลข้อความก่อนหน้า เราได้ตั้งค่าความสูงของบรรทัดที่ 0 ดังนั้นครึ่งล่างของข้อความทั้งหมดจะปรากฏให้เห็น
เพิ่มตำแหน่งที่แน่นอนด้วยออฟเซ็ตแนวตั้ง
- ออฟเซ็ตแนวตั้ง: 50%
ตอนนี้ เราได้สร้างโครงสร้างของบทช่วยสอนของเราสำเร็จแล้ว ซึ่งเราจะทำแอนิเมชั่นด้วยการเขียนโค้ดในตอนต่อไป มาเปลี่ยนชื่อโมดูลเพื่อความเข้าใจที่ดีขึ้นในอนาคต
ส่วนที่ 2: ประมวลกฎหมาย
ในการสร้างเอฟเฟกต์แอนิเมชั่นชัตเตอร์บนโครงสร้างของเรา เราจำเป็นต้องมีโค้ด CSS และ JS เราจะใช้โมดูลโค้ดสำหรับสิ่งนั้น เพิ่มโมดูลโค้ดที่ด้านบนของคอลัมน์ด้านขวา
โค้ด CSS
วางโค้ด CSS ต่อไปนี้ในแท็กสไตล์
/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
transform: none;
}
.on-click {
cursor:pointer;
}
JS Code
จากนั้น เพิ่มโค้ด JQuery ต่อไปนี้ในแท็กสคริปต์
(function ($) {
$(document).ready(function () {
/*
Toggle shutter transform animation on hover.
To work, Divi Column with shutters must include
these CSS Classes: "shutter-column on-hover divi-transform-none".
*/
$ShutterColumnToHover = $(".shutter-column.on-hover");
$ShutterColumnToHover.hover(function () {
$(this).toggleClass("divi-transform-none");
});
/*
Toggle shutter transform animation on click.
To work, Divi Column with shutters must include
these CSS Classes: "shutter-column on-click divi-transform-none".
*/
$ShutterColumnToClick = $(".shutter-column.on-click");
$ShutterColumnToClick.on("click", function (e) {
$(this).toggleClass("divi-transform-none");
e.stopPropagation();
});
$(document).on("click", function (e) {
if ($(e.target).is(".shutter-column.on-click") === false) {
$ShutterColumnToClick.addClass("divi-transform-none");
}
});
});
})(jQuery);
ส่วนที่ 3: การออกแบบแอนิเมชั่นชัตเตอร์ข้อความแบบแยกส่วน
ตอนนี้ เราจะทำซ้ำส่วนแรกของการออกแบบเพื่อสร้างแอนิเมชั่นชัตเตอร์แรกของเรา
เพิ่ม: คุณสมบัติการเปลี่ยนชัตเตอร์ยอดนิยม
โดยปกติ เมื่อเราทำให้บางสิ่งเคลื่อนไหวโดยใช้ CSS Transform Properties จะไม่มีรูปแบบการแปลงสำหรับองค์ประกอบนั้นในตอนเริ่มต้น หลังจากวางเมาส์เหนือองค์ประกอบแล้ว เราจะเห็นรูปแบบนั้น ใน Divi เราจะย้อนกลับกระบวนการทั้งหมด ก่อนอื่นเราจะแปลงองค์ประกอบนั้นโดยใช้ Divi Builder ข้อดีของสิ่งนี้คือเราสามารถแก้ไขทุกอย่างด้วยสายตา จากนั้นเมื่อจัดรูปแบบเสร็จแล้ว เราจะปิดการใช้งานในขั้นต้นโดยใช้คลาส CSS จากนั้นเปิดและปิดเมื่อผู้ใช้โต้ตอบกับโอเวอร์เลย์
หากต้องการเพิ่มการออกแบบการเปลี่ยนรูปแบบให้กับชัตเตอร์ด้านบน ให้เปิดการตั้งค่าโมดูลข้อความชัตเตอร์ด้านบนและอัปเดตสิ่งต่อไปนี้:
- มาตราส่วนการแปลง (X และ Y): 150%
- แปลงแกน Y แปล: -101%
- กำเนิดการเปลี่ยนแปลง: ศูนย์ด้านบน
หากคุณแก้ไขทุกอย่างถูกต้อง ข้อความชัตเตอร์ด้านบนจะไม่ปรากฏอีกต่อไป เนื่องจากเราต้องการให้ภาพทั้งหมดปรากฏหลังจากการเปลี่ยนภาพเคลื่อนไหว
เพิ่ม: คุณสมบัติการแปลงชัตเตอร์ด้านล่าง
สำหรับชัตเตอร์ด้านล่าง ให้อัปเดตตัวเลือกการออกแบบการแปลงต่อไปนี้:
- มาตราส่วนการแปลง (X และ Y): 150%
- แปลงแกน Y แปล: 101%
- กำเนิดการแปลง: ศูนย์กลางด้านล่าง
เพิ่ม: คลาส CSS เพื่อปิดใช้งานการแปลงคุณสมบัติ (เริ่มต้น)
เรารู้อยู่แล้วว่าหลังจากออกแบบคุณสมบัติการแปลงสำหรับแอนิเมชั่นชัตเตอร์ เราจะปิดการใช้งานการออกแบบการแปลงโดยใช้คลาส CSS ขนาดเล็ก เนื่องจากโค้ด CSS แบบกำหนดเองที่เราเพิ่มไว้ก่อนหน้านี้ การออกแบบจึงจะปรากฏโดยไม่มีการออกแบบการแปลงใดๆ
เพิ่ม: ฟังก์ชันเมื่อคลิก
แอนิเมชั่นแรกของเราอยู่ในเอฟเฟกต์โฮเวอร์ ดังนั้น การโฮเวอร์จะเรียกภาพเคลื่อนไหวด้วยเคอร์เซอร์ของเมาส์เหนือรูปภาพและข้อความ ตอนนี้เราจะมาดูกันว่าเราสามารถทำได้ด้วยการคลิกเมาส์โดยไม่ต้องวางเมาส์เหนือ
ง่ายมาก เราจะละเว้นคำสั่ง "on-hover" และเพิ่มคำสั่ง "on-click" ในส่วน
- CSS Class: คอลัมน์ชัตเตอร์เมื่อคลิก Divi-transform-none
การออกแบบก็จะออกมาประมาณนี้
การย้อนกลับของนิเมชั่น
ตอนนี้ ถ้าเราต้องการ เราสามารถสร้างแอนิเมชั่นโดยที่ภาพทั้งหมดจะถูกเปิดเผยและข้อความจะมาเมื่อเราวางเมาส์เหนือ ซึ่งหมายถึงสิ่งที่ตรงกันข้ามกับที่เรามีในตอนนี้ เราสามารถรับแอนิเมชั่นดังกล่าวได้อย่างง่ายดายโดยลบคลาส CSS "divi-transform-none"
การออกแบบอื่น
ที่นี่เรามีการออกแบบอื่น
อัพเดทบานประตูหน้าต่าง
เลือกโมดูลข้อความด้านบนและด้านล่างจากเทมเพลตชัตเตอร์แต่ละอัน จากนั้นเปิดการตั้งค่าองค์ประกอบสำหรับทั้งคู่และอัปเดตสิ่งต่อไปนี้:
- ความเป็นมา: #ffffff
- สีข้อความ: #000000
- โหมดผสมผสาน: หน้าจอ
การออกแบบขั้นสุดท้าย
การออกแบบขั้นสุดท้ายของเราจะมีลักษณะเช่นนี้
บทสรุป
การออกแบบใดๆ รวมถึงการออกแบบชัตเตอร์ข้อความแบบแยกส่วน สามารถทำได้ง่าย ๆ ผ่าน Divi เป็นวิธีที่มีประสิทธิภาพมากในการดึงดูดผู้เข้าชม หวังว่าบทช่วยสอนวันนี้จะเพิ่มมิติใหม่ให้กับการออกแบบเว็บไซต์ของคุณ หากคุณชอบบทช่วยสอนนี้ อย่าลืมแจ้งให้เราทราบในช่องแสดงความคิดเห็น
