สุดยอดคู่มือการใช้ Parallax กับ Divi

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

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

ไปกันเถอะ

Parallax คืออะไร?

ในส่วนที่เกี่ยวกับการออกแบบเว็บ พารัลแลกซ์เป็นคำที่ใช้อธิบายเอฟเฟกต์ที่ให้การรับรู้ระยะทางและการเคลื่อนไหวที่เหมือนจริงโดยใช้แอนิเมชั่นสองมิติ ทำได้โดยการเปลี่ยนความเร็วในการเลื่อนขององค์ประกอบต่างๆ บนเว็บเพจเพื่อสร้างภาพลวงตาของระยะทางขณะดูจุดคงที่ เทคนิคนี้มีมานานแล้วในสถานที่อื่นที่ไม่ใช่เว็บ จำ Super Mario Brothers ได้ไหม? หากคุณเคยเล่นวิดีโอเกมในยุค 80 (Nintendo NES) เกมส่วนใหญ่ใช้เทคนิคนี้เพื่อสร้างความประทับใจให้กับการเคลื่อนไหวโดยใช้ภาพ 2 มิติเท่านั้น รายการในแถวหน้าเคลื่อนที่เร็วกว่าต้นไม้/ภูเขา/เมฆในพื้นหลัง จึงทำให้เกิดการเคลื่อนไหวที่เหมือนมีชีวิตมากขึ้น

เอฟเฟกต์นี้เหมือนกับวิธี True Parallax ใน Divi ยกเว้นการเคลื่อนไหวในแนวตั้งแทนที่จะเป็นแนวนอน

ทำความเข้าใจว่า Parallax ทำงานอย่างไรกับ Divi

ด้วย Divi ทำให้ Parallax ใช้งานได้ง่ายบนภาพพื้นหลังใดๆ ภายในส่วน แถว คอลัมน์ หรือโมดูล สิ่งที่คุณต้องทำคือตั้งค่าตัวเลือก Parallax Effect เป็น "YES" จากนั้นเลือกวิธี Parallax (CSS หรือ True Parallax)

วิธีการ CSS

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

วิธีพารัลแลกซ์ที่แท้จริง

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

จะเกิดอะไรขึ้นเมื่อเปิดใช้งาน Parallax ใน Divi

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

จะเกิดอะไรขึ้นเมื่อเลือกวิธี CSS?

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

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

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

ลองนึกภาพว่านี่เป็นภาพพื้นหลังปกติที่เพิ่มลงในโมดูลส่วนหัวที่ด้านบนของหน้า

อัตราส่วนกว้างยาวของภาพถูกต้อง (1920×1080) และขนาดของภาพครอบคลุมและพอดีกับส่วนนี้อย่างดีโดยไม่มีการทับซ้อนกันเมื่อดูบนขนาดหน้าจอ 1366×766 พื้นที่สีขาวด้านล่างรูปภาพคือเนื้อหาที่เหลือในหน้า

นี่คือสิ่งที่จะเกิดขึ้นเมื่อคุณเลือกพารัลแลกซ์สำหรับรูปภาพของคุณ

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

จะเกิดอะไรขึ้นเมื่อเลือกวิธี True Parallax?

หากคุณมีการตั้งค่า True Parallax รูปภาพจะถูกห่อใน div ใหม่ที่มีคลาส CSS เดียวกัน:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

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

นี่คือรหัสที่แทรกลงในแท็กรูปภาพของภาพพื้นหลังพารัลแลกซ์ของฉันโดยที่หน้าต่างเบราว์เซอร์ของฉันมีขนาด 1366×766:

    height: 960.8px;
    transform: translate(0px, 220.5px);

สังเกตตัวเลขสองตัวในคุณสมบัติการแปลง ตัวเลขสองตัวนี้ควบคุมตำแหน่งของภาพพื้นหลัง ตัวเลขแรก (0px) จะวางตำแหน่งรูปภาพตามแนวแกน x (ในแนวนอน) เนื่องจากตั้งค่าเป็น 0px รูปภาพจะไม่ถูกย้าย ตัวเลขที่สองจะจัดตำแหน่งรูปภาพตามแกน y (แนวตั้ง) เนื่องจากปัจจุบันมีขนาด 220.5px นั่นหมายความว่ารูปภาพถูกผลักลงมาที่หน้า 220.5px

นอกจากนี้ สังเกตว่าค่าความสูง (960.8px) มากกว่าความสูงของหน้าต่างเบราว์เซอร์ของฉัน (766px) ประมาณ 200px เพื่อรองรับรูปภาพที่ถูกผลัก 220.5px ผ่านด้านล่างของหน้าต่างเบราว์เซอร์

เมื่อเลือกวิธี True Parallax คุณอาจสังเกตเห็นว่าภาพของคุณถูกเป่ามากกว่าวิธี CSS เนื่องจากตำแหน่งของรูปภาพถูกขยายเพิ่มเติมอีก 30% ของความสูงของเบราว์เซอร์

จำภาพประกอบพื้นหลังปกติของเราได้ไหม

นี่คือสิ่งที่เกิดขึ้นกับรูปภาพหลังจากเลือก True Parallax (ก่อนที่คุณจะเริ่มเลื่อนแน่นอน):

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

ทำไม True Parallax ถึงยืดภาพออกไปได้ไกล?

การเดาที่ดีที่สุดของฉันคือการรองรับขนาดหน้าจอที่ใหญ่ขึ้น เมื่อหน้าต่างเบราว์เซอร์มีขนาดหน้าจอ 1920×1080 ภาพพื้นหลังจะไม่ขยายผ่านด้านล่างของหน้าต่างอีกต่อไปและเข้ากันได้ดี

ทำไม True Parallax ใช้ JavaScript?

สาเหตุหลักที่ทำให้ True Parallax ต้องใช้ JavaScript เป็นเพราะภาพพื้นหลังจำเป็นต้องเคลื่อนที่ด้วยความเร็วที่แตกต่างจากองค์ประกอบอื่นๆ เมื่อเลื่อน จำ Mario Brothers ได้ไหม?

ด้วย True Parallax ถ้าฉันเพิ่มขนาดของเบราว์เซอร์ ค่าความสูงก็จะเพิ่มขึ้นแบบไดนามิกผ่าน JavaScript เพื่อให้แน่ใจว่ารูปภาพของฉันจะใหญ่เพียงพอสำหรับเบราว์เซอร์เสมอ

ถ้าฉันเลื่อนหน้าลง ค่าตำแหน่งการแปล (220.5px ในตัวอย่างด้านบน) จะเพิ่มขึ้น โดยย้ายตำแหน่งแนวตั้ง (แกน y) ของรูปภาพลงมาที่หน้า

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

ฉันควรใช้รูปภาพประเภทใด

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

ต่อไปนี้เป็นเคล็ดลับทั่วไป 5 ข้อในการเลือกประเภทภาพที่เหมาะสมสำหรับ Parallax

1. หลีกเลี่ยงรูปภาพที่ทำให้เสียสมาธิ รูปภาพที่มีมากเกินไปทำให้เกิดความสับสนและเบี่ยงเบนความสนใจจากเนื้อหา
2. ตรวจสอบให้แน่ใจว่ารูปภาพของคุณตรงกับธีมของไซต์ของคุณ ไซต์ของคุณควรบอกเล่าเรื่องราว รูปภาพพารัลแลกซ์นี้ (เช่นเดียวกับรูปภาพที่เหลือของคุณ) ควรเข้ากับธีม
3. ให้มันใหญ่และเรียบง่าย โปรดจำไว้ว่า ภาพพารัลแลกซ์ของคุณจะถูกแสดงบนขนาดหน้าจอที่เล็กกว่าเช่นกัน ตรวจสอบให้แน่ใจว่ารายละเอียดของรูปภาพนั้นไม่เล็กจนไม่สามารถจดจำได้บนอุปกรณ์ขนาดเล็ก
4. เพิ่มสีซ้อนทับเมื่อจำเป็น บางครั้งภาพพารัลแลกซ์ที่ดีอาจมีทั้งด้านมืดและด้านสว่าง ซึ่งอาจปิดบังข้อความของคุณเมื่อเลื่อน การเพิ่มการซ้อนทับที่มืดหรือสว่างจะช่วยรับประกันว่าข้อความของคุณสามารถอ่านได้ทุกที่บนรูปภาพ
   
5. ทำให้มันน่าสนใจ มีวิธีที่จะถ่ายภาพออกมาเพื่อจัดการกับสิ่งที่น่าเบื่อ ใช้เวลาเพื่อค้นหาสิ่งที่ดึงดูดผู้ชมของคุณและดึงดูดความสนใจจากพวกเขา

คุณควรใช้ภาพพื้นหลังพารัลแลกซ์ขนาดใด

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

เนื่องจากขนาดหน้าจอที่ได้รับความนิยมมากที่สุดคือประมาณ 1366×766 ฉันจึงต้องแน่ใจว่ารูปภาพพารัลแลกซ์พื้นหลังทั้งหมดมีขนาดอย่างน้อยขนาดนี้ แต่เนื่องจากความนิยมของจอภาพที่ใหญ่กว่า ผมจึงเลือกใช้ขนาดที่ใหญ่กว่า เช่น 1920×1080 เพื่อให้แน่ใจว่าผู้ใช้เห็นภาพคุณภาพสูงบนเดสก์ท็อปขนาดใหญ่

ปัญหาของการมีภาพที่มีขนาด 1920×1080 คือคุณแทบจะไม่มีส่วนที่มองเห็นได้ซึ่งมีความสูง 1080px ดังนั้นคุณจึงสามารถเก็บซ่อนไว้ที่ด้านล่างของภาพเหล่านั้นได้

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

สำหรับส่วนหัวและส่วนยอดนิยม

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

Padding: 250px 0 250px;

ที่ควรพาคุณไปในทิศทางที่ถูกต้อง

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

นอกจากนี้ ให้พยายามเลือกรูปภาพที่มีเนื้อหาไม่สำคัญที่ด้านล่างของภาพและเนื้อหาที่สำคัญกว่าอยู่ด้านบน สำหรับส่วนหัว คุณควรคาดหวังว่าจะได้เห็นภาพพารัลแลกซ์บนสุดเพียง 700px

สำหรับภาคปกติ/ภาคกลาง

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

สำหรับส่วนล่าง/ส่วนท้าย

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

หากคุณใช้วิธี True Parallax คุณจะเห็นส่วนบนของรูปภาพเป็นส่วนใหญ่ ดังนั้นฉันจะถือว่าพวกเขาเป็นส่วนหัวของคุณ

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

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

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

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

Parallax Image Hacks: การเปลี่ยนตำแหน่งของรูปภาพด้วย Custom CSS

หากคุณต้องการเปลี่ยนตำแหน่งของพื้นหลังพารัลแลกซ์ คุณสามารถใช้ตัวเลือก css “.et_parallax_bg” นี่คือ css เริ่มต้นที่วางตำแหน่งรูปภาพสำหรับเอฟเฟกต์พารัลแลกซ์

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

หากคุณสังเกตเห็นโดยค่าเริ่มต้น คุณสมบัติตำแหน่งพื้นหลังสำหรับวิธีพารัลแลกซ์ css จะถูกตั้งค่าเป็น "ศูนย์กลางด้านบน" แต่ถ้าฉันต้องการเปลี่ยนตำแหน่งเดิมของภาพพื้นหลัง คุณสามารถปรับค่าคุณสมบัติตำแหน่งพื้นหลังได้

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

ไปที่การตั้งค่าส่วนภายใต้แท็บขั้นสูงและป้อน CSS Class ชื่อ "parahacks"
ตอนนี้ไปที่การตั้งค่าหน้าและเลือกแท็บขั้นสูง

จากนั้นใช้กล่อง CSS แบบกำหนดเองเพื่อป้อนตัวอย่างต่อไปนี้ของ Custom CSS:

หากใช้วิธี CSS คุณสามารถสร้างภาพพื้นหลังให้อยู่กึ่งกลางแนวตั้งโดยเพิ่ม css แบบกำหนดเองต่อไปนี้:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

ในการทำให้ภาพพื้นหลังอยู่ด้านล่างสุด ให้เพิ่ม css แบบกำหนดเองต่อไปนี้:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

ในการทำให้ภาพพื้นหลังเลื่อนขึ้นเป็นจำนวนพิกเซลที่กำหนด ให้เพิ่ม css แบบกำหนดเองต่อไปนี้:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

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

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

หากต้องการให้ภาพพื้นหลังอยู่ด้านล่างมากขึ้น ให้เพิ่ม css แบบกำหนดเองต่อไปนี้:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL;DR? นี่คือวิดีโอสรุปประเด็นหลัก

สมัครสมาชิกช่อง Youtube ของเรา

ในการปิด

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

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

ไชโย!