วิธีการสร้างตัวนับวงกลมที่มีชีวิตขึ้นมาในขณะที่เลื่อนด้วย Divi

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

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

ผลลัพธ์ที่เป็นไปได้

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

การสร้างตัวนับวงกลมทั้งสี่ที่มีชีวิตชีวาเมื่อเลื่อนด้วย Divi

ส่วนและการกำหนดค่าสาย

ขั้นแรกให้เพิ่มแถวสี่คอลัมน์ในส่วนเริ่มต้น

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

มาร์จิ้น: สูง 85vh, ต่ำ 85vh

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

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

ใช้มุมมองเลเยอร์

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

เนื่องจากเราจะสร้างองค์ประกอบที่ทับซ้อนกัน (หรือเลเยอร์) จำนวนมากกล่องเลเยอร์จะมีประโยชน์สำหรับการจัดการเลเยอร์ของเราในอนาคตอย่างแน่นอน

การสร้างตัวนับวงกลมเคลื่อนไหว # 1 (25%)

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

วงกลมด้านหลัง

ในการสร้างวงกลมด้านหลังเราจะใช้โมดูลตัวคั่นซึ่งเราจะสร้างเป็นวงกลมและให้สีพื้นหลัง

เพิ่มโมดูลแยก

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

แสดงตัวแบ่ง: NO
สีพื้นหลัง: # c3e0e5

อัพเดตพารามิเตอร์การออกแบบดังนี้:

ความกว้าง: 250px
ความสูง: 250px
ระยะขอบ: 25 พิกเซลที่ด้านบน, 25 พิกเซลที่ด้านล่าง, 25 พิกเซลทางด้านซ้าย
มุมโค้งมน: 50%

แถบสีที่กำลังหมุน

ส่วนถัดไปของตัวนับวงกลมจะเป็นแถบสีที่หมุนได้ ทำซ้ำตัวคั่นก่อนหน้า (วงกลมด้านหลัง) เพื่อเปิดการออกแบบใหม่ จากนั้นอัปเดตตัวคั่นใหม่ด้วยป้ายกำกับ "colorbar"

ในการสร้างเอฟเฟกต์แถบสีที่หมุนได้เราต้องเปลี่ยนเส้นแบ่งนี้เป็นครึ่งวงกลมด้วยสีที่เราต้องการใช้สำหรับแถบ

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

สีพื้นหลัง: ไม่มี
พื้นหลังไล่ระดับสีด้านซ้าย: # 121b55
สีพื้นหลังไล่ระดับสีด้านขวา: rgba (255,255,255,0)
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 50%
อันดับสุดท้าย: 0%

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

ความกว้าง: 248px
ความสูง: 248px

ในการทำให้วงกลมของแถบสีทับซ้อนกับวงกลมด้านหลังให้แบ่งตำแหน่งอย่างแน่นอนดังนี้:

ตำแหน่ง: สัมบูรณ์
ออฟเซตแนวตั้ง: 26 พิกเซล
ชดเชยแนวนอน: 26 พิกเซล

จากนั้นเพิ่มเอฟเฟกต์การเลื่อนต่อไปนี้เพื่อหมุนแถบวงกลม 90 องศา (หรือ 25% ของวงกลม)

ภายใต้แท็บ Rotary Effects ...

การหมุนเริ่มต้น: 0deg (ที่ 15% ของหน้าต่าง)
การหมุนเฉลี่ย: 90 องศา (ที่ 20% -25% ของวิวพอร์ต)
สิ้นสุดการหมุน: 90 องศา (ที่ 30% ของวิวพอร์ต)

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

โล่

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

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