วิธีออกแบบนาฬิกาเคลื่อนไหวด้วยเอฟเฟกต์การเลื่อนของ Divi

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

ด้วยตัวเลือกการออกแบบในตัวทั้งหมดที่มีใน Divi เราจึงสามารถสร้างการออกแบบนาฬิกาเคลื่อนไหวที่ยอดเยี่ยมได้ตั้งแต่เริ่มต้น ในบทช่วยสอนนี้ เราจะสร้างนาฬิกาเคลื่อนไหวที่จะหมุนเข็มนาฬิกาเมื่อผู้ใช้เลื่อนหน้าลง

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงนาฬิกาเคลื่อนไหวได้ฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

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

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

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

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

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

ตอนที่ 1: การออกแบบหน้าปัดนาฬิกา

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

การตั้งค่าแถว

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

• สีพื้นหลัง: #003a5c

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 50vw
• ความกว้างสูงสุด: 500px
• ส่วนสูง: 50vw
• ความสูงสูงสุด: 500px

• มุมโค้งมน: 50%
• ความกว้างของเส้นขอบ: 15px
• สีเส้นขอบ: #ffffff

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 68px
• เงาสี: rgba(0,0,0,0.22)

ภายใต้แท็บ ขั้นสูง ให้อัปเดตตัวเลือกการมองเห็นดังนี้:

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

ส่วนที่ 2: การเพิ่มเครื่องหมายชั่วโมง

เมื่อแถวได้รับการออกแบบเป็นหน้าปัดนาฬิกา เราก็พร้อมที่จะเพิ่มตำแหน่งชั่วโมงที่แสดงเวลาสิบสองนาฬิกา 0 นาฬิกา 0 นาฬิกา 0 นาฬิกา 6 นาฬิกา และ 0 นาฬิกา 9 นาฬิกา มาร์กเกอร์แต่ละตัวจะถูกสร้างขึ้นโดยใช้โมดูลตัวแบ่ง

เครื่องหมาย 12 นาฬิกา

เริ่มต้นด้วยการเพิ่มโมดูลตัวแบ่งใหม่ภายในแถว

จากนั้นอัปเดตสีพื้นหลังดังนี้:

• สีพื้นหลัง: #78acf4

• ความกว้าง: 10vw
• ความกว้างสูงสุด: 150px
• ส่วนสูง: 3px
• มุมโค้งมน : 8px
• เปลี่ยนแกนหมุน Z: 90deg

ใต้แท็บขั้นสูง กำหนดตำแหน่งที่แน่นอนให้กับตัวแบ่ง:

• ตำแหน่ง: Absolute
• ที่ตั้ง: top center

ป้ายบอกเวลา 6 โมงเย็น

ในการสร้างตำแหน่ง 3 นาฬิกา ให้ทำซ้ำตัวแบ่งที่ใช้สร้างเครื่องหมาย 12 0'clock (ณ จุดนี้ เป็นความคิดที่ดีที่จะติดป้ายกำกับโมดูลของคุณภายในโมดอล Layers) จากนั้นเปิดตัวแบ่งที่ซ้ำกันและอัปเดตตำแหน่งตำแหน่งดังนี้:

• ที่ตั้ง: ตรงกลางด้านล่าง

เครื่องหมาย 3 นาฬิกา

ในการสร้างตำแหน่ง 3 นาฬิกา ให้ทำซ้ำตำแหน่ง 6 นาฬิกา จากนั้นเปิดการตั้งค่าสำหรับรายการที่ซ้ำกันใหม่ (ตรวจสอบให้แน่ใจว่าได้ติดป้ายกำกับว่า "3 นาฬิกา") และเปลี่ยนสิ่งต่อไปนี้:

• ที่ตั้ง: right center

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

ใต้แท็บแปล…

• แปลงแกน X แปล: 50%

ใต้แท็บการหมุน

• เปลี่ยนแกนหมุน Z: 0deg

เครื่องหมาย 9 นาฬิกา

ในการสร้างตำแหน่ง 3 นาฬิกา ให้ทำซ้ำตำแหน่ง 6 นาฬิกา จากนั้นเปิดการตั้งค่าสำหรับรายการที่ซ้ำกันใหม่ (ตรวจสอบให้แน่ใจว่าได้ติดป้ายกำกับว่า "9 นาฬิกา") และเปลี่ยนแปลงสิ่งต่อไปนี้:

• ที่ตั้ง: left center

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

ใต้แท็บแปล…

• แปลงแกน X แปล: -50%

ตอนที่ 3: การสร้างเข็มนาฬิกา (วินาที นาที และชั่วโมง)

เมื่อตำแหน่งบอกชั่วโมงพร้อมแล้ว เราก็พร้อมที่จะเริ่มสร้างเข็มนาฬิกา เราจะเริ่มด้วยมือสอง

มือสอง

ในการสร้างเข็มวินาที ให้ทำซ้ำตัวแบ่งเวลา 12 นาฬิกาแล้วลากไปด้านล่างตัวแบ่งที่เหลือในคอลัมน์โดยใช้โมดอล Layers

จากนั้นติดป้ายกำกับ "วินาที" ที่ซ้ำกันใหม่

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

• ที่ตั้ง: center center

ใต้แท็บออกแบบ ให้อัปเดตขนาดดังนี้:

• ความกว้าง: 20vw
• ความกว้างสูงสุด: 200px
• ส่วนสูง: 0.5vw
• ความสูงสูงสุด: 7.5px

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

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

ใต้แท็บแปล…

• แปลงแกน X แปล: 0% (นี่เป็นขั้นตอนสำคัญ)

ภายใต้แท็บการหมุน...

• เปลี่ยนแกนหมุน Z: -90deg

ใต้แท็บ Origin…

• กำเนิดการแปลง: ศูนย์ซ้าย

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

• สีพื้นหลัง: rgba(175,175,175,0.12)

เข็มนาที

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

• พื้นหลังไล่ระดับสีซ้าย: #78acf4
• ไล่สีพื้นหลังด้านขวา: #b0b9ff
• ทิศทางการไล่ระดับสี: 90deg

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

• ความกว้าง: 15w
• ความกว้างสูงสุด: 150px
• ส่วนสูง: 1vw
• ความสูงสูงสุด: 15px

เข็มชั่วโมง

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

• สีพื้นหลัง: #ffffff

จากนั้นอัปเดตขนาดภายใต้แท็บออกแบบดังนี้:

• ความกว้าง: 10vw
• ความกว้างสูงสุด: 100px

ณ จุดนี้ คุณจะมีเข็มนาฬิกาทั้งสามพร้อมสำหรับเอฟเฟกต์การเลื่อน!

ตอนที่ 4: การเพิ่มเอฟเฟกต์การเลื่อนการหมุนไปยังเข็มนาฬิกาแต่ละอัน

ในการหมุนเข็มนาฬิกา เราจะเพิ่มเอฟเฟกต์การเลื่อนการหมุนให้กับเข็มนาฬิกาทั้งสามแต่ละเข็ม เนื่องจากเรากำลังทำงานกับการออกแบบนาฬิกา สิ่งสำคัญคือต้องจำไว้ว่าเราสามารถใช้องศาการหมุนบนเข็มนาฬิกาแต่ละข้างเพื่อแสดงเวลาจริงได้ ตัวอย่างเช่น การหมุนเข็มชั่วโมง 30 องศาจะแทน 1 นาฬิกา 60 องศาจะเป็น 2 นาฬิกา เป็นต้น

เอฟเฟกต์การเลื่อนเข็มชั่วโมง

ขั้นแรก เราจะเพิ่มเอฟเฟกต์การเลื่อนการหมุนไปที่เข็มชั่วโมง เปิดการตั้งค่าตัวแบ่งเข็มชั่วโมงและเพิ่มเอฟเฟกต์การแปลงต่อไปนี้:

ภายใต้แท็บการหมุน...

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0deg (ที่ 10%)
• การหมุนกลาง: 15deg (ที่ 50%)
• สิ้นสุดการหมุน: 30deg (ที่ 90%)

เอฟเฟกต์การเลื่อนเข็มนาที

ต่อไป เราจะเพิ่มเอฟเฟกต์การเลื่อนการหมุนให้กับเข็มนาที เปิดการตั้งค่าตัวแบ่งเข็มนาทีและเพิ่มเอฟเฟกต์การแปลงต่อไปนี้:

ภายใต้แท็บการหมุน...

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0deg (ที่ 10%)
• การหมุนกลาง: 180deg (ที่ 50%)
• สิ้นสุดการหมุน: 360deg (ที่ 90%)

เอฟเฟกต์เลื่อนการหมุนมือสอง

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

ภายใต้แท็บการหมุน...

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0deg (ที่ 10%)
• การหมุนกลาง: 5400deg (ที่ 50%)
• สิ้นสุดการหมุน: 10800deg (ที่ 90%)

หมายเหตุ: การหมุนที่แม่นยำสำหรับเข็มวินาทีถึง 1 ชั่วโมงจะต้องหมุน 21600 องศา แต่เนื่องจากมันเร็วเกินไป ฉันคิดว่าควรผ่าครึ่งนั้นดีที่สุด ท้ายที่สุดนี้มีไว้สำหรับการออกแบบ

ผลลัพธ์สุดท้าย

นี่คือการออกแบบขั้นสุดท้าย

และนี่คือผลลัพธ์สุดท้ายของเอฟเฟกต์การเลื่อน สังเกตว่าเวลาผ่านไปหนึ่งชั่วโมงเมื่อเลื่อนลงมาอย่างไร

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

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

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

ไชโย!