แกลเลอรีรูปภาพเป็นจุดหมายโปรดในเว็บไซต์ส่วนใหญ่ และในหลาย ๆ กรณีอาจเป็นการดีที่สุดที่จะทำให้แกลเลอรีภาพเหล่านั้นมีชีวิตชีวาและคงที่อยู่เสมอปล่อยให้ภาพทำงานอย่างมหัศจรรย์
แต่เพิ่มเอฟเฟกต์การเลื่อนตัวต่อแบบเลื่อนให้ คลังภาพ (ตามที่เราจะทำในบทช่วยสอนนี้) สามารถให้ความรู้สึกสดชื่นกับคลาสสิกเหนือกาลเวลา
ในบทช่วยสอนนี้เราจะแสดงวิธีสร้างเลย์เอาต์ง่ายๆที่แสดงแกลเลอรีภาพที่มีเอฟเฟกต์การเลื่อนปริศนาเลื่อนบน Divi
กุญแจสำคัญคือการทำความเข้าใจว่าขนาดของรูปภาพเกี่ยวข้องกับค่าออฟเซ็ตแนวตั้งและแนวนอนของเอฟเฟกต์การเลื่อนแต่ละครั้งอย่างไรเพื่อย้ายรูปภาพไปทีละจุด แต่เมื่อเสร็จสิ้นเอฟเฟกต์การเคลื่อนไหวที่ได้จะมีความคมชัดและแม่นยำเมื่อค่อยๆประกอบและเผยให้เห็นแกลเลอรีภาพในลักษณะที่ไม่เหมือนใคร
ผลลัพธ์ที่เป็นไปได้
นี่คือภาพรวมของเลย์เอาต์แกลเลอรีรูปภาพพร้อมเอฟเฟกต์การเลื่อนตัวต่อแบบเลื่อนที่เราจะสร้างในบทช่วยสอนนี้
การสร้างส่วนหัว
ในการเริ่มต้นเรามาสร้างส่วนหัวด่วนที่จะบอกให้ผู้ใช้เลื่อนหน้าเพื่อดูแกลเลอรีและเอฟเฟกต์การเลื่อนที่ยอดเยี่ยม
เพิ่มแถว
เพิ่มแถวหนึ่งคอลัมน์ในส่วนเริ่มต้น
เพิ่มโมดูลข้อความ
ภายในคอลัมน์ / แถวให้เพิ่มโมดูลข้อความใหม่
ในการตั้งค่าข้อความให้อัปเดตเนื้อหาของร่างกายด้วยสิ่งต่อไปนี้:
<h1>Image Gallery</h1>
การตั้งค่าโมดูลข้อความ
บนแท็บออกแบบอัปเดตการออกแบบข้อความดังต่อไปนี้:
- แบบอักษรของชื่อเรื่อง: Roboto
- น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
- ลักษณะแบบอักษรของชื่อเรื่อง: TT
- การจัดตำแหน่งข้อความส่วนหัว: กึ่งกลาง
- ขนาดข้อความส่วนหัว: 50px (เดสก์ท็อป), 40px (แท็บเล็ตและโทรศัพท์)
- การเว้นวรรคตัวอักษรชื่อเรื่อง: 4px
เพิ่มไอคอนโมดูล Blurb
เมื่อมีข้อความเข้าแทนที่โมดูลข้อความการนำเสนอใหม่ภายใต้โมดูลข้อความ
จากนั้นลบชื่อและเนื้อหาทั้งหมดออกจากเนื้อหาเริ่มต้นแล้วเลือกใช้ไอคอนลูกศรลง
การตั้งค่าข้อความนำเสนอ
จากนั้นอัปเดตการตั้งค่าข้อความนำเสนอด้วยสีใหม่และภาพเคลื่อนไหวสไลด์ซ้ำ
- สีไอคอน: # ffb500
- รูปแบบภาพเคลื่อนไหว: สไลด์
- ทิศทางของภาพเคลื่อนไหว: ลง
- ความเข้มของภาพเคลื่อนไหว: 20%
- การทำซ้ำของภาพเคลื่อนไหว: วนซ้ำ
มาตราช่องว่างภายใน
หากต้องการให้พื้นที่ส่วนสำหรับการเลื่อนอัปเดตช่องว่างดังต่อไปนี้:
- Padding: 20vh ด้านบน 50vh ด้านล่าง
ในที่นี้เรากำลังใช้หน่วยความยาว vh ซึ่งสัมพันธ์กับความสูงของหน้าต่างเบราว์เซอร์เพื่อให้ระยะห่างปรับอย่างสม่ำเสมอในทุกขนาดเบราว์เซอร์
การสร้างแกลเลอรีรูปภาพพร้อมเอฟเฟกต์การเลื่อน
ตอนนี้ส่วนหัวของเราเสร็จสมบูรณ์แล้วเราก็พร้อมที่จะสร้างแกลเลอรีรูปภาพจริงด้วยเอฟเฟกต์เลื่อนปริศนาเลื่อน แกลเลอรีทั้งหมดจะประกอบด้วยสามแถว 4 ภาพ / คอลัมน์ในแต่ละแถวเพื่อให้ได้ภาพทั้งหมด 12 ภาพ อย่างไรก็ตามคุณสามารถเพิ่มเส้นและรูปภาพลงในเค้าโครงได้อย่างง่ายดายเมื่อเสร็จสิ้น
การสร้างส่วนและบรรทัด
เพิ่มหัวข้อใหม่
เริ่มต้นด้วยการเพิ่มหัวข้อปกติใหม่ภายใต้หัวข้อ
เพิ่มแถว
จากนั้นเพิ่มแถวที่มีสี่คอลัมน์ในส่วน
การตั้งค่าสาย
ภายใต้การตั้งค่าบรรทัดอัปเดตต่อไปนี้:
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 100%
- ความกว้างสูงสุด: 1200 px (เดสก์ท็อป), 600 px (แท็บเล็ต), 300 px (โทรศัพท์)
ความกว้างของเส้นกำหนดขนาดภาพอย่างไร
ความกว้างของแถวมีความสำคัญมากสำหรับการออกแบบนี้เนื่องจากจะกำหนดความกว้างของแต่ละคอลัมน์ทั้งสี่คอลัมน์ เมื่อเราตั้งค่าความกว้างของรางน้ำเป็น 1 แล้วจะไม่มีระยะห่างระหว่างภาพอีกต่อไป
และเมื่อเราตั้งค่าความกว้างสูงสุดเป็น 1200px เค้าโครงคอลัมน์สี่คอลัมน์จะทำให้แต่ละคอลัมน์ / ภาพมีความกว้าง 300px (1200px / 4 = 300px)
นอกจากนี้เนื่องจากแต่ละภาพเป็นสี่เหลี่ยมจัตุรัสเราจึงทราบว่าความสูงของแต่ละภาพจะเป็น 300 พิกเซลด้วย เราไม่จำเป็นต้องเก็บไว้แบบนั้นถ้าเราไม่ต้องการ
ตัวอย่างเช่นเราสามารถเลือกที่จะมีเค้าโครงสามคอลัมน์ที่มีรูปภาพ 400 x 400 พิกเซล การรู้ความกว้างของรูปภาพ (300px) และความสูง (เช่นกัน 300px) จะเป็นกุญแจสำคัญในการสร้างเอฟเฟกต์การเลื่อนในภายหลัง
กำลังเพิ่มรูปภาพ
เพิ่มภาพ 1
Image 1 เอฟเฟกต์เลื่อน
ความสัมพันธ์ระหว่างขนาดภาพและการชดเชยเอฟเฟกต์การเลื่อน
เมื่อใช้เอฟเฟกต์การเลื่อนแนวตั้งและแนวนอนสิ่งสำคัญคือต้องเข้าใจว่าค่าตัวเลขที่ป้อนหมายถึงอะไร ในตัวอย่างนี้เรามีค่าชดเชยเริ่มต้นการย้ายแนวตั้งที่ -3 -3 นี่คือ -300px (หรือลง 300px) ซึ่งเป็นความกว้างของรูปภาพ
จากนั้นออฟเซ็ตจะถึง 0 (ตำแหน่งหลัก) เมื่อผู้ใช้เลื่อน นี่คือสิ่งที่สร้างเอฟเฟกต์การเลื่อนที่ย้ายรูปภาพไปยังบล็อก / เฟรมเดียว การเคลื่อนไหวในแนวนอนเริ่มต้นที่ 3 (300 พิกเซลจากทางขวา) และหยุดในตำแหน่งเริ่มต้น เอฟเฟกต์ทั้งสองนี้รวมกันเพื่อสร้างเอฟเฟกต์การเลื่อนสองส่วนที่ไม่เหมือนใคร
เพิ่มภาพ 2
หลังจากเพิ่มเอฟเฟกต์การเลื่อนลงในรูปภาพแล้ว 1. เพิ่มรูปภาพใหม่ในคอลัมน์ 2
เราจะปล่อยให้ภาพนิ่งนี้ไม่มีเอฟเฟกต์การเลื่อน
เพิ่มภาพ 3
จากนั้นเพิ่มโมดูลรูปภาพอื่นในคอลัมน์ 3 และอัปเดตโมดูลด้วยรูปภาพใหม่
Image 3 เอฟเฟกต์เลื่อน
ภายใต้การตั้งค่าภาพอัพเดตเอฟเฟกต์การเลื่อนต่อไปนี้:
ภายใต้แท็บการเคลื่อนไหวในแนวนอน ...
- เปิดใช้งานการเคลื่อนไหวแนวนอน: ใช่
- เริ่มการชดเชย: -3 (ที่ 0% ของหน้าต่าง)
- ค่าชดเชยเฉลี่ย: 0 (ที่ 15% ของวิวพอร์ต)
- สิ้นสุดการชดเชย: 0 (ที่ 100% ของวิวพอร์ต)
เพิ่มภาพ 4
ในการสร้างภาพสุดท้ายให้คัดลอกรูปภาพ 1 แล้ววางในคอลัมน์ 4
อัปโหลดรูปภาพใหม่ในการตั้งค่ารูปภาพ
Image 4 เอฟเฟกต์เลื่อน
จากนั้นอัปเดตเอฟเฟกต์การเลื่อนต่อไปนี้:
ใต้แท็บการเคลื่อนไหวแนวตั้ง ...
- เปิดใช้งานการเคลื่อนไหวแนวตั้ง: ใช่
- เริ่มการชดเชย: 3 (ที่ 0% ของหน้าต่าง)
- ออฟเซ็ตเฉลี่ย: 0 (ที่ 15% -28% ของวิวพอร์ต)
- สิ้นสุดการชดเชย: 0 (ที่ 40% ของวิวพอร์ต)
ภายใต้แท็บการเคลื่อนไหวในแนวนอน ...
- เปิดใช้งานการเคลื่อนไหวแนวนอน: ใช่
- เริ่มการชดเชย: 3 (ที่ 0% ของหน้าต่าง)
- ค่าชดเชยเฉลี่ย: 3 (ที่ 28% ของวิวพอร์ต)
- สิ้นสุดการชดเชย: 0 (ที่ 40% ของวิวพอร์ต)
บรรทัดที่ซ้ำกัน
ตอนนี้เอฟเฟกต์การเลื่อนภาพเสร็จสิ้นสำหรับแถวแรกแล้วสิ่งที่เราต้องทำคือทำซ้ำแถวเพื่อสร้างภาพเพิ่มเติมและเอฟเฟกต์การเลื่อนที่สอดคล้องกัน สำหรับตัวอย่างนี้ลองทำซ้ำแถวสองครั้งเพื่อสร้างทั้งหมดสามแถว
แทนที่และจัดเรียงรูปภาพใหม่ตามต้องการ
จากนั้นเราสามารถย้ายภาพโดยใช้ฟังก์ชันลากและวางได้ทุกที่ที่เราต้องการ นี่คือที่ที่คุณสามารถสร้างสรรค์และดูว่าภาพเคลื่อนไหวจะเลื่อนไปมาอย่างไร และเมื่อรูปภาพเข้าที่แล้ว คุณสามารถแทนที่เนื้อหาของโมดูลรูปภาพด้วยรูปภาพใหม่ที่ตรงกับความต้องการของ เว็บไซต์เว็บ.
สัมผัสสุดท้าย
การมองเห็นส่วน
เนื่องจากรูปภาพของเราอาจจะขยายออกไปนอกส่วน / หน้าต่างเรามาซ่อนส่วนที่เกินเพื่อล้างข้อมูลเล็กน้อย เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:
- ล้นแนวนอน: ซ่อน
- แนวตั้งล้น: ซ่อน
มาตราช่องว่างภายใน
เราต้องการให้เอฟเฟกต์การเลื่อนในแนวตั้งของรูปภาพด้านบน (ซึ่งขยายอยู่เหนือส่วนนั้น) สามารถมองเห็นได้แม้จะมีการซ่อนมากเกินไป ลองเพิ่มช่องว่างด้านบนและด้านล่างให้เท่ากับความสูงของภาพ (300 พิกเซล)
ผลลัพธ์จนถึงตอนนี้
ตอนนี้เราสามารถหยุดที่นี่ได้หากคุณต้องการคงการออกแบบแกลเลอรีไว้โดยไม่เว้นระยะห่างระหว่างรูปภาพ นี่คือผลลัพธ์ที่ออกมาจนถึงตอนนี้ สังเกตว่าภาพเคลื่อนไหวในแนวตั้งและแนวนอนได้อย่างไรในหนึ่งบล็อก / เฟรม
การเพิ่มช่องว่างระหว่างภาพ
เนื่องจากเราตั้งค่าความกว้างของรางน้ำเป็น 1 เราจึงไม่มีระยะห่างระหว่างคอลัมน์หรือรูปภาพของเราอีกต่อไป ในการสร้างระยะห่างที่คล้ายกันขึ้นใหม่เราสามารถเพิ่มการเติมลงในแต่ละเฟรมได้
สิ่งนี้จะช่วยให้เราสามารถสร้างระยะห่างที่เราต้องการได้โดยไม่กระทบต่อการทำงานของเอฟเฟกต์การเลื่อน เป็นไปได้เนื่องจากการเพิ่มช่องว่างภายในรูปภาพจะไม่เพิ่มความกว้างหรือความสูงของคอนเทนเนอร์รูปภาพ คุณยังสามารถสร้างเอฟเฟกต์ที่คล้ายกันโดยใช้เส้นขอบได้เช่นกัน
Image 1 Padding
เปิดการตั้งค่าสำหรับรูปภาพ 1 และอัปเดตสิ่งต่อไปนี้:
- การขยาย: 10 พิกเซลที่ด้านบน, 10 พิกเซลที่ด้านล่าง, 10 พิกเซลทางด้านซ้าย, 10 พิกเซลทางด้านขวา
ขยายภาพให้เต็มทุกภาพ
ก่อนบันทึกให้คลิกขวาที่ตัวเลือกช่องว่างภายในแล้วเลือก "ขยายช่องว่างภายใน" ในหน้าต่างป็อปอัพขยายสไตล์ให้คลิกปุ่มขยายเพื่อขยายการเติมนี้ให้กับรูปภาพทั้งหมดในเพจ
ผลสุดท้าย
นี่คือผลลัพธ์ของงานทั้งหมดที่เราได้ทำไปแล้ว
คิดสุดท้าย
เอฟเฟกต์การเลื่อนปริศนาการเลื่อนที่แสดงในบทความนี้ให้มากกว่าการออกแบบที่ไม่เหมือนใครสำหรับแกลเลอรีรูปภาพ นอกจากนี้ยังชี้ให้เห็นว่าสามารถใช้การชดเชยการเคลื่อนที่ในแนวนอนและแนวตั้งเพื่อให้ได้เอฟเฟกต์การเลื่อนที่แม่นยำยิ่งขึ้น
อย่าลังเลที่จะสำรวจรูปแบบต่างๆของเลย์เอาต์นี้โดยการเปลี่ยนออฟเซ็ตและผสมตำแหน่งของรูปภาพ
คุณยังสามารถเปลี่ยนจำนวนคอลัมน์ได้ตราบเท่าที่คุณเข้าใจว่าขนาดคอลัมน์ / รูปภาพจะเปลี่ยนไปอย่างไรจากนั้นจะอัปเดตเอฟเฟกต์การเลื่อนที่ชดเชยด้วยค่าที่สอดคล้องกัน
ทรัพยากรที่แนะนำ
คุณอาจจะพบสิ่งเหล่านี้ บริการสารสนเทศ น่าสนใจเพราะมันจะช่วยให้คุณสร้างแกลเลอรี่ภาพบนของคุณ บล็อก WordPress.
- 10 ปลั๊กอินเพื่อสร้างคลังภาพบน WordPress
- วิธีสร้างแกลเลอรี่รูปภาพด้วยปลั๊กอิน Envira
- ปลั๊กอิน WordPress 5 เพื่อสร้างคลังภาพ
- วิธีใช้โมดูลแกลเลอรีรูปภาพบน Divi
