วิธีเพิ่มเอฟเฟกต์ Ken Burns Hover ให้กับรูปภาพ โมดูล และแถวใน Divi

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

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

ด้วยเอฟเฟกต์ Transform ที่ปล่อยออกมาใน Divi Builder การนำเอฟเฟกต์ ken burns hover มาสู่รูปภาพของคุณไม่เคยง่ายอย่างนี้มาก่อน ตัวเลือกการแปลงรูปแบบเหล่านี้ช่วยให้คุณสามารถปรับขนาด (ซูม) ย้าย (หรือเลื่อน) และหมุนภาพได้ตามที่คุณต้องการ และเนื่องจากคุณสามารถใช้การแปลงเหล่านี้กับสถานะโฮเวอร์ของรูปภาพ ความเป็นไปได้ในการออกแบบจึงค่อนข้างไม่มีที่สิ้นสุด

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

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของเอฟเฟกต์ ken burns hover ที่สามารถทำได้ง่ายด้วยตัวเลือกการแปลงของ Divi

อธิบายแนวคิดพื้นฐาน

แนวคิดพื้นฐานสำหรับการสร้างเอฟเฟกต์โฮเวอร์ Ken Burns นั้นเกี่ยวข้องกับการใช้ตัวเลือกการแปลงรูปแบบใหม่ของ Divi เพื่อปรับขนาด วางตำแหน่ง และหมุนรูปภาพเมื่อวางเมาส์เหนือรูปภาพนั้น คุณสามารถเพิ่มคุณสมบัติการแปลงมาตราส่วนได้เป็นเปอร์เซ็นต์เพื่อทำให้รูปภาพใหญ่ขึ้นเมื่อวางเมาส์ไว้ คุณสามารถใช้คุณสมบัติการแปลงการแปลงเพื่อย้ายรูปภาพไปตามแกน x และ y และคุณสามารถหมุนภาพได้โดยใช้คุณสมบัติการหมุนเปลี่ยนรูปแบบโดยการตั้งค่าองศาเฉพาะ (ในกรณีนี้คือค่าองศาสำหรับการหมุนบนแกน x) สุดท้าย คุณสามารถควบคุมระยะเวลาการเปลี่ยนภาพ (ความเร็ว) และเส้นโค้งความเร็วเพื่อควบคุมความเร็วที่เอฟเฟกต์โฮเวอร์ของเคนเบิร์นได้ คุณสมบัติการแปลงภาพสามแบบและคุณสมบัติการเปลี่ยนภาพทำงานร่วมกันเพื่อสร้างเอฟเฟ็กต์โฮเวอร์เคนเบิร์นที่ทำให้ภาพถ่ายของคุณมีชีวิตชีวา

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

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

ดาวน์โหลดตัวอย่างเอฟเฟกต์ Ken Burns Hover ฟรี

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

เมื่อคุณดาวน์โหลดไฟล์ zip แล้ว ให้เปิดเครื่องรูดโฟลเดอร์ ถัดไป นำเข้าเค้าโครง .json โดยใช้คุณสมบัติ Divi Builder Portability หรือคุณสามารถลากไฟล์ไปยัง Divi Builder โดยใช้ฟังก์ชันการลากและวางของ Divi แค่นั้นแหละ!

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

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

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

ดาวน์โหลด

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

เริ่มต้นกับเพจใหม่

สิ่งแรกที่คุณต้องทำคือสร้างหน้าใหม่ จากนั้นให้ชื่อหน้าและปรับใช้ Divi Builder ที่ส่วนหน้า จากนั้นเลือกตัวเลือกเพื่อ "สร้างตั้งแต่เริ่มต้น"

การเพิ่มเอฟเฟกต์ Ken Burns ให้กับรูปภาพในแถวหนึ่งคอลัมน์

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

ขั้นแรก ให้สร้างส่วนใหม่ที่มีแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลรูปภาพในแถว

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

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

overflow: hidden;

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

บันทึกการตั้งค่าแถว

การเพิ่มรูปภาพของคุณ

ตอนนี้เราสามารถเพิ่มรูปภาพลงในโมดูลรูปภาพได้ เปิดการตั้งค่าโมดูลรูปภาพและเพิ่มรูปภาพ

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

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

การเพิ่มเอฟเฟกต์โฮเวอร์แปลง

ตอนนี้เรามีภาพของเราแล้ว ถึงเวลาที่จะใช้ตัวเลือกการแปลงเหล่านี้เพื่อสร้างเอฟเฟ็กต์โฮเวอร์ของ Ken Burns ข้ามไปที่แท็บการออกแบบ สลับเปิดตัวเลือกการแปลง เปิดใช้งานเอฟเฟกต์โฮเวอร์และเลือกแท็บโฮเวอร์ ตอนนี้การปรับแต่งเอฟเฟกต์การแปลงใดๆ จะใช้กับสถานะโฮเวอร์ของโมดูลรูปภาพเท่านั้น จากนั้นภายใต้แท็บ Transform Scale ให้อัปเดตสิ่งต่อไปนี้:

Transform Scale แกน x (โฮเวอร์): 136%
Transform Scale แกน y (โฮเวอร์): 136%

จากนั้นคลิกแท็บ Transform Translate และอัปเดตสิ่งต่อไปนี้:

Transform Translate แกน x (โฮเวอร์): 3%
แปลงแปลแกน y (โฮเวอร์): 9%

ซึ่งจะย้ายรูปภาพไปทางซ้าย 3% และลง 9% สำหรับรูปภาพเฉพาะนี้ ฉันกำลังมองหาเอฟเฟกต์ที่จะซูมเข้าและนำคู่รักมาที่กึ่งกลางของวิวพอร์ตของคอลัมน์

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

ถัดไป คลิกแท็บ Transform Rotate และอัปเดตสิ่งต่อไปนี้:

Transform หมุนแกน x (โฮเวอร์): 6deg

อัปเดตตัวเลือกการเปลี่ยน

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

ระยะเวลาการเปลี่ยนภาพ: 2000ms (หรือ 2 วินาที)
Transition Speed ​​Curve: เชิงเส้น (เพื่อให้แน่ใจว่าความเร็วของการเปลี่ยนแปลงจะไม่เปลี่ยนแปลงในระยะเวลา)

ผลสุดท้าย

ตอนนี้เรามาดูผลสุดท้ายกัน อย่าหลงเชื่อความเปลี่ยนแปลงของ gif ด้านล่าง การเปลี่ยนแปลงนั้นราบรื่นมากบนไซต์สด

การเพิ่มเอฟเฟกต์ Ken Burns Hover ให้กับรูปภาพหลายภาพในแถวสามคอลัมน์

หากคุณต้องการเพิ่มเอฟเฟ็กต์โฮเวอร์เคนเบิร์นให้กับรูปภาพในหลายคอลัมน์ กระบวนการเดียวกันจะมีผลบังคับใช้ สิ่งสำคัญที่คุณต้องทำคือตรวจสอบให้แน่ใจและเพิ่มข้อมูลโค้ด css “overflow:hidden” ลงในคอลัมน์แต่ละคอลัมน์ที่มีรูปภาพของคุณ

ใช้ตัวอย่างก่อนหน้าของเราด้านบน เปลี่ยนโครงสร้างคอลัมน์ของแถวเป็นแบบสามคอลัมน์

ถัดไป อัปเดตการตั้งค่าแถวด้วยข้อมูลโค้ด CSS ที่กำหนดเองซึ่งจะซ่อนการล้นของแต่ละคอลัมน์

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

overflow:hidden;

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

overflow:hidden;

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

overflow:hidden;

ถัดไป คัดลอกโมดูลรูปภาพแล้ววางลงในคอลัมน์ 2 และคอลัมน์ 3

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

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

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

ระยะเวลาการเปลี่ยนภาพ: 500ms

นี่คือระยะเวลาการเปลี่ยนแปลงใหม่ที่มีผลบังคับใช้

การเพิ่มเอฟเฟกต์ Ken Burns Hover ให้กับโมดูลใดๆ ที่มีภาพพื้นหลัง

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

นี่คือวิธีการเพิ่มเอฟเฟกต์ Ken Burns ให้กับโมดูลข้อความ

ขั้นแรกให้สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์ จากนั้นเพิ่มโมดูลข้อความในแถว

อัปเดตโมดูลข้อความด้วยเนื้อหาต่อไปนี้:

<h1>We're Engaged!</h1>

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

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

แบบอักษรของหัวเรื่อง: Prata
ขนาดข้อความหัวเรื่อง: 6vw
Custom Padding: บน 10vw, 10vw ล่าง, 3vw ซ้าย

ระยะเวลาการเปลี่ยนภาพ: 5000ms

ตอนนี้เพิ่มการตั้งค่าการแปลงต่อไปนี้ในโมดูลข้อความ

Transform Scale แกน x (โฮเวอร์): 118%
Transform Scale แกน y (โฮเวอร์): 118%

Transform Translate แกน x (โฮเวอร์): 6%
แปลงแปลแกน y (โฮเวอร์): 6%

ตอนนี้ อัปเดตการตั้งค่าแถวด้วย CSS แบบกำหนดเองต่อไปนี้สำหรับคอลัมน์

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

overflow:hidden;

ตอนนี้ตรวจสอบผลลัพธ์

สังเกตว่าข้อความและภาพพื้นหลังจะเปลี่ยนไปอย่างไรเมื่อวางเมาส์เหนือ

การรวมเอฟเฟกต์ Ken Burns Hover เข้ากับเอฟเฟกต์ Hover เพิ่มเติม

คุณยังสามารถรวมเอฟเฟกต์ Ken Burns Hover ที่นำไปใช้กับโมดูลด้วยเอฟเฟกต์เพิ่มเติมเพื่อความสร้างสรรค์ที่มากยิ่งขึ้น

การรวมเอฟเฟกต์ Ken Burns Hover เข้ากับเอฟเฟกต์ฟิลเตอร์

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

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

เปิดการตั้งค่าโมดูลข้อความและอัปเดตตัวเลือกตัวกรองต่อไปนี้:

ความอิ่มตัว (ค่าเริ่มต้น): 0%
ความอิ่มตัว (โฮเวอร์): 100%

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

นี่คือเอฟเฟกต์สุดท้ายของเอฟเฟกต์ฟิลเตอร์รวมกับเอฟเฟกต์โฮเวอร์เคนเบิร์น

การรวมเอฟเฟกต์ Ken Burns Hover เข้ากับเอฟเฟกต์การแปลงแถว

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

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

ในการทำเช่นนี้ เราจะใช้การออกแบบโมดูลข้อความปัจจุบันของเราซึ่งได้รวมเอฟเฟกต์ ken burns hover เข้ากับเอฟเฟกต์ฟิลเตอร์เพิ่มเติม นี่เป็นเอฟเฟกต์โฮเวอร์สามตัว!

เปิดการตั้งค่าของแถวที่มีโมดูลข้อความ จากนั้นอัปเดตสิ่งต่อไปนี้:

ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง, 0px ซ้าย, 0px ขวา

เพื่อให้แน่ใจว่าไม่มีการเว้นวรรคเพิ่มเติมระหว่างโมดูลข้อความและแถว

ต่อไปเราจะเพิ่มกล่องเงาในแถวดังนี้:

กล่องเงา: ดูภาพหน้าจอ
ความชัดเจนของเงากล่อง: 36px
เงาสี: rgba(0,0,0,0.17)

เพิ่มเอฟเฟกต์การแปลงต่อไปนี้:

Transform Scale แกน x (ค่าเริ่มต้น): 70%
Transform Scale แกน x (โฮเวอร์): 100%
Transform Scale แกน y (ค่าเริ่มต้น): 70%
Transform Scale แกน y (โฮเวอร์): 100%

Transform หมุนแกน y (ค่าเริ่มต้น): 19deg
แปลง หมุนแกน y (โฮเวอร์): 0deg
Transform หมุนแกน z (ค่าเริ่มต้น): 23deg
แปลง หมุนแกน z (โฮเวอร์): 0deg

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

การเพิ่มเอฟเฟกต์ Ken Burns Hover ให้กับเนื้อหาทั้งแถว

ในกรณีที่คุณสงสัย เอฟเฟ็กต์โฮเวอร์ของ Ken Burns สามารถใช้เพื่อทำให้เนื้อหาทั้งแถวมีชีวิตชีวาเมื่อวางเมาส์ไว้ วิธีนี้ใช้ไม่ได้ผลสำหรับแถวที่มีเนื้อหาจำนวนมาก เนื่องจากจะทำให้ผู้เข้าชมสับสนหรือเสียสมาธิ แต่สำหรับสิ่งต่างๆ เช่น ส่วนหัว นี่อาจเป็นเทคนิคการออกแบบที่มีประโยชน์ เคล็ดลับคือการเพิ่มข้อมูลโค้ด CSS แบบกำหนดเอง “overflow:hidden” ลงในส่วน จากนั้นคุณสามารถเพิ่มเอฟเฟกต์การแปลงลงในแถวได้

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

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

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

ไชโย!