วิธีรวมเอฟเฟกต์โฮเวอร์กับพื้นหลัง CSS Parallax ใน Divi

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

ในบทช่วยสอนนี้ เราจะแสดงให้คุณเห็นว่าคุณสามารถออกแบบเอฟเฟกต์ CSS Parallax background hover ได้อย่างรวดเร็วและง่ายดายใน Divi ไม่จำเป็นต้องใช้ปลั๊กอินหรือการเข้ารหัสที่กำหนดเอง!

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของเอฟเฟกต์โฮเวอร์พื้นหลัง css Parallax ที่เราจะออกแบบในบทช่วยสอนนี้

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

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

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

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

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

ดาวน์โหลด

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

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

ไปที่บทช่วยสอนกันไหม

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

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

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. รูปภาพที่จะใช้สำหรับเนื้อหาจำลอง

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

ส่วนที่ 1: การสร้างเอฟเฟ็กต์โฮเวอร์ Breakout Parallax ใน Divi

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

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

ตรวจสอบว่ารูปภาพมีความกว้างอย่างน้อย 1920px การออกแบบใช้งานได้ดีกับภาพพื้นหลังที่เข้มกว่าและมีพื้นผิวจำนวนมาก ฉันใช้จาก Coffee Shop Layout Pack ซึ่งหาได้จาก Divi Builder

จากนั้นเพิ่มช่องว่างภายในส่วนดังนี้:

Padding: บน 10vw, 10vw ด้านล่าง

เพิ่มโมดูล Blurb

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

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

จากนั้นคลิกเพื่อใช้ไอคอนและเลือกไอคอนกาแฟสำหรับการนำเสนอ

หลังจากเนื้อหาพร้อมแล้ว ให้อัปเดตการตั้งค่าการออกแบบดังนี้:

สีไอคอน: #ffffff
ขนาดตัวอักษรของไอคอน: 50px
การจัดตำแหน่งข้อความ: center
แบบอักษรของชื่อเรื่อง: Oswald
รูปแบบตัวอักษรของชื่อเรื่อง TT
สีข้อความของชื่อเรื่อง: #ffffff
ระยะห่างของตัวอักษรชื่อเรื่อง: 2px
แบบอักษรของร่างกาย: Nunito
สีข้อความ: #ffffff
ระยะห่างระหว่างตัวอักษร: 1px
ช่องว่างภายใน: บน 30px ล่าง 30px ซ้าย 30px ขวา 30px

ปรับความกว้างของแถว

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

ความกว้างสูงสุด: 80%

การตั้งค่าคอลัมน์

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

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

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

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

อัปเดตการตั้งค่าการออกแบบคอลัมน์ต่อไปดังนี้:

Padding: บน 4vw, 4vw ล่าง
มุมโค้งมน: 10px

จากนั้นให้คอลัมน์เป็นเงาของกล่องที่แสดงเฉพาะเมื่อวางเมาส์ไว้ดังนี้:

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความชัดเจนของเงากล่อง: 36px
สีเงา (ค่าเริ่มต้น): rgba(0,0,0,0)
สีเงา (โฮเวอร์): rgba(0,0,0,0.72)

ตอนนี้ ไปที่ตัวเลือกการแปลงและอัปเดตรูปแบบการแปลงต่อไปนี้บนโฮเวอร์:

มาตราส่วนการแปลง (โฮเวอร์): 105%

การทำเช่นนี้จะขยายคอลัมน์ (และเนื้อหา) เล็กน้อยเพื่อสร้างเอฟเฟกต์ที่โผล่ออกมาจากภาพพื้นหลังเล็กน้อย

แปลงแกนแปล Y (โฮเวอร์): -2.5%

สิ่งนี้จะย้ายคอลัมน์ขึ้นเล็กน้อยเมื่อวางเมาส์เหนือเพื่อสร้างการกระจัดที่ไม่สมมาตรเล็กน้อย

กำเนิดการแปลง: 100% 50% (กลางล่าง)

สิ่งนี้จะเริ่มต้นเอฟเฟกต์การปรับขนาดจากจุดศูนย์กลางด้านล่าง ซึ่งเมื่อรวมกับค่าการแปล จะคล้ายกับเอฟเฟกต์บานพับที่ละเอียดอ่อน

นี่คือเอฟเฟกต์โฮเวอร์ css parallax จนถึงตอนนี้

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

ผลสุดท้าย

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

การเพิ่มการหมุนให้กับเอฟเฟกต์โฮเวอร์

นอกจากนี้เรายังสามารถเพิ่มการหมุนให้กับเอฟเฟกต์ css parallax hover ซึ่งเพิ่มสัมผัสที่ดีให้กับการออกแบบ เพียงเปิดการตั้งค่าแต่ละคอลัมน์และอัปเดตสิ่งต่อไปนี้:

แปลงแกน Z หมุน (เมื่อโฮเวอร์): 5deg

ถ้าคุณต้องการผสม คุณสามารถให้คอลัมน์กลางหมุน -5deg

นี่คือผลลัพธ์สุดท้าย

และนี่คือการออกแบบเดียวกันกับภาพพื้นหลังที่สว่างกว่าและข้อความที่เข้มกว่า

ส่วนที่ 2: การสร้างเอฟเฟกต์ Parallax Hover แบบแว่นขยายใน Divi

ทำซ้ำส่วนจากการออกแบบแรก จากนั้นเปิดการตั้งค่าส่วนและแทนที่รูปภาพพื้นหลังด้วยรูปใหม่ ฉันใช้อันจาก Video Game Layout Pack เพราะมันเน้นเอฟเฟกต์โฮเวอร์พารัลแลกซ์กำลังขยาย

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

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

ความกว้างของรางน้ำ: 1
ความกว้าง: 100%
ความกว้างสูงสุด: 98%

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

การตั้งค่าคอลัมน์

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

อัปเดตโมดูลประกาศ

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

ขนาด

ในการสร้างโมดูลทรงกลม ก่อนอื่นเราต้องกำหนดความกว้างและความสูงที่ตรงกันดังนี้:

ความกว้าง: 300px
การจัดตำแหน่งโมดูล: ศูนย์
ความสูง: 300px

ชายแดน

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

มุมโค้งมน: 50%
ความกว้างของเส้นขอบ: 1px
เส้นขอบสี: rgba(255,255,255,0.12)

เอฟเฟกต์โฮเวอร์กล่องเงา

ถัดไป กำหนดเงาของกล่องประกาศเมื่อวางเมาส์ไว้ดังนี้:

กล่องเงา: ดูภาพหน้าจอ
ความชัดเจนของเงากล่อง: 36px
สีเงา (ค่าเริ่มต้น): rgba(0,0,0,0)
สีเงา (โฮเวอร์): rgba(0,0,0,0.7)

เปลี่ยนเอฟเฟกต์โฮเวอร์

เมื่อกล่องเงาของคุณเข้าที่แล้ว ให้อัปเดตตัวเลือกการแปลงดังนี้:

Transform Origin (ค่าเริ่มต้น): 50% 0% (กลางซ้าย)

เพื่อให้แน่ใจว่าคำประกาศจะไม่ขยายออกไปนอกหน้าเมื่อวางไว้ทางด้านซ้ายสุดของแถวสามคอลัมน์

มาตราส่วนการแปลง (โฮเวอร์): 130%

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

ทำซ้ำคอลัมน์

เมื่อการนำเสนอเสร็จสิ้น เราสามารถทำซ้ำคอลัมน์เพื่อสร้างสามคอลัมน์ แต่ละคอลัมน์มีโมดูลการนำเสนอเดียวกัน

เปิดการตั้งค่าแถวและทำซ้ำคอลัมน์สองครั้งรวมเป็นสามคอลัมน์

อัปเดต Transformer Origin

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

เปิดการตั้งค่าสำหรับโมดูลการนำเสนอในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

กำเนิดการเปลี่ยนแปลง: 50% 50% (ศูนย์กลาง)

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

กำเนิดการแปลง: 50% 100% (กลางขวา)

ผลสุดท้าย

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

อันที่จริง วิธีนี้เจ๋งมาก เราอาจต้องการปล่อยให้มันเป็นสไตล์เริ่มต้นแทนที่จะอยู่ในสถานะโฮเวอร์

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

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

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

ไชโย!