วิธีเพิ่มเอฟเฟกต์เลื่อนลงเพื่อดูตัวอย่างการออกแบบเว็บเพจใน Divi

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

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

แอบมอง

นี่คือตัวอย่างเอฟเฟกต์โฮเวอร์แบบเลื่อนลงที่เราจะสร้างร่วมกันในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงเอฟเฟกต์เลื่อนลงโฮเวอร์ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ตอนนี้ขอได้รับการกวดวิชาเราจะ?

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

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

การสร้างแถวสามคอลัมน์

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

อัปเดตการตั้งค่าแถวดังนี้:

ความกว้างที่กำหนดเอง: 100%
Custom Padding (เดสก์ท็อป): 5% ซ้าย 5% ขวา
Custom Padding (แท็บเล็ต): ซ้าย 25%, 25% ขวา
Custom Padding (โทรศัพท์): ซ้าย 15%, 15% ขวา

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

คอลัมน์ 1 องค์ประกอบหลัก CSS:

overflow: hidden;
height: 400px;

คอลัมน์ 2 องค์ประกอบหลัก CSS:

overflow: hidden;
height: 400px;

คอลัมน์ 3 องค์ประกอบหลัก CSS:

overflow: hidden;
height: 400px;

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

การสร้างภาพด้วยเอฟเฟกต์เลื่อนลง เลื่อนลง

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

นี่คือวิธีการทำ

เพิ่มโมดูลรูปภาพในคอลัมน์ 1 จากนั้นเพิ่มตัวเลือกโฮเวอร์ต่อไปนี้:

มาร์จิ้นที่กำหนดเอง (โฮเวอร์): 400px ด้านบน
Transform Translate แกน Y (โฮเวอร์): -100%

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

นอกจากนี้ ค่าการแปลงแกน Y ที่แปลเป็นเปอร์เซ็นต์ (-100%) ไม่ใช่พิกเซล ดังนั้น คุณจะต้องป้อนค่านี้ด้วยตนเองโดยพิมพ์ค่าในกล่องป้อนข้อมูลของตัวควบคุมการแปลการแปลง

วิธีการทำงานของเอฟเฟกต์เลื่อนลงโฮเวอร์

อาจช่วยได้หากฉันอธิบายฟังก์ชันการทำงานของการตั้งค่านี้ด้วยภาพประกอบบางส่วน สมมติว่ารูปภาพที่คุณใช้มีความสูง 700px ความสูงของคอลัมน์เพียง 400px ซึ่งหมายความว่า ตามค่าเริ่มต้น (ก่อนวางเมาส์เหนือ) โอเวอร์โฟลว์ด้านล่างของรูปภาพนั้นจะถูกซ่อนเนื่องจากขยายออกไปนอกคอลัมน์

เมื่อผู้ใช้วางเมาส์เหนือรูปภาพ สองสิ่งจะเกิดขึ้น

ขั้นแรก คุณสมบัติ Transform translate จะย้ายรูปภาพขึ้นด้านบนด้วยค่าแกน Y ที่ -100% กล่าวอีกนัยหนึ่ง รูปภาพจะเลื่อนขึ้น 100% ของความสูงของรูปภาพ (700px)

ถัดไป รูปภาพจะได้รับระยะขอบบนสุด 400px เพื่อนำรูปภาพกลับเข้าไปในวิวพอร์ตของคอลัมน์เพื่อให้อยู่ด้านล่างสุดอย่างสมบูรณ์

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

นี่คือลักษณะผลลัพธ์ในตัวอย่างสด

การปรับระยะเวลาการเปลี่ยนภาพและเส้นโค้งความเร็ว

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

อัปเดตสิ่งต่อไปนี้:

ระยะเวลาการเปลี่ยนภาพ: 4000ms
เส้นโค้งความเร็วในการเปลี่ยน: Ease

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

คัดลอกและวาง Image Module ลงในคอลัมน์ที่เหลือ

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

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

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

ไปข้างหน้าและเพิ่มโมดูลข้อความใหม่เหนือรูปภาพในคอลัมน์ 1 คุณจะใช้โหมดมุมมองโครงร่างได้ง่ายขึ้นเนื่องจากคอลัมน์ของคุณถูกตั้งค่าเป็นความสูงของคอลัมน์

จากนั้นอัปเดตเนื้อหาด้วยหัวข้อ h2 ดังนี้:

<h2>Homepage</h2>

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

สีพื้นหลัง: #ffffff
การวางแนวข้อความ: center
หัวเรื่อง 2 ขนาดข้อความ: 20px
ส่วนหัว 2 ความสูงของบรรทัด: 2em
มาร์จิ้นที่กำหนดเอง: 0px ด้านล่าง
ช่องว่างภายในที่กำหนดเอง: 10px ด้านบน
กล่องเงา: ดูภาพหน้าจอ

การตั้งค่าเหล่านี้อาจดูเหมือนไม่มีกฎเกณฑ์ แต่ก็ไม่เป็นเช่นนั้น ค่าเหล่านี้สามารถคาดการณ์ความสูงของโมดูลข้อความซึ่งเป็นสิ่งสำคัญที่ต้องทราบในภายหลัง ตัวอย่างเช่น ฉันรู้ว่าโมดูลข้อความจะมีความสูง 60px มาทำคณิต...

ความสูงของบรรทัดคือ 2em ซึ่งเป็น 2 เท่าของขนาดข้อความของส่วนหัว 2 (20px) ซึ่งหมายความว่าความสูงของเส้นของฉันจะเท่ากับ 40px

ช่องว่างด้านบนที่กำหนดเองถูกตั้งค่าเป็น 10px และมีช่องว่างภายในที่ซ่อนอยู่ด้านล่างของ 10px ที่มีอยู่แล้วสำหรับส่วนหัวทั้งหมดโดยค่าเริ่มต้นใน Divi แผ่นรองด้านบนและด้านล่างรวมกันเพื่อเพิ่มความสูง 20px

ดังนั้น… 40px (ของความสูงของบรรทัด) + 20px (ของช่องว่างภายใน) = 60px

ตอนนี้เรารู้ความสูงของโมดูลข้อความแล้ว แน่นอน คุณสามารถตรวจสอบองค์ประกอบโดยใช้เครื่องมือ dev ได้เสมอเพื่อให้แน่ใจ

ระยะขอบด้านล่างแบบกำหนดเองที่ 0px จำเป็นเพื่อนำระยะขอบเริ่มต้นที่อยู่ด้านล่างโมดูลออก (เพิ่มด้วยความกว้างของรางน้ำ)

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

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

position:relative;

จากนั้นอัปเดตดัชนี z:

ดัชนี Z: 3

คัดลอกและวางโมดูลข้อความ

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

สิ่งที่คุณต้องทำคืออัปเดตเนื้อหาสำหรับแต่ละรายการ

อัปเดตค่า Margin สูงสุดเมื่อวางเมาส์เหนือรูปภาพแต่ละรูปเพื่อรองรับความสูงของโมดูลข้อความ

ปัจจุบัน รูปภาพแต่ละรูปในคอลัมน์ 1, 2 และ 3 มีระยะขอบบนที่กำหนดเองที่ 400px เมื่อวางเมาส์เหนือ ค่านี้ถูกกำหนดให้เท่ากับความสูงของความสูงที่กำหนดเองของคอลัมน์ อย่างไรก็ตาม เนื่องจากขณะนี้โมดูลข้อความใช้พื้นที่คอลัมน์บางส่วน (ความสูง 60px) เราจึงต้องปรับค่าโฮเวอร์ระยะขอบด้านบน

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

มาร์จิ้นที่กำหนดเอง (โฮเวอร์): 340px ด้านบน

ตอนนี้รูปภาพของคุณจะหยุดอย่างสมบูรณ์ที่ด้านล่างของคอลัมน์เมื่อสิ้นสุดสถานะโฮเวอร์

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของการออกแบบ

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

นี่คือลักษณะที่ปรากฏบนแท็บเล็ตและโทรศัพท์

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

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

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

ไชโย!