วิธีเพิ่มแอนิเมชั่น SVG เส้นทางข้อความวงกลมให้กับการออกแบบ Divi ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

สร้างการออกแบบฮีโร่

เพิ่มมาตราใหม่

สีพื้นหลัง

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

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

ระยะห่าง

ไปที่การตั้งค่าระยะห่างถัดไป และแก้ไขค่าการเติมด้านบนและด้านล่าง

• ช่องว่างภายในด้านบน: 30px
• ช่องว่างภายในด้านล่าง: 30px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ขนาด

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

• ความกว้าง: 95%
• ความกว้างสูงสุด: 2580px

คอลัมน์ 1 การตั้งค่า

เมื่อตั้งค่าแถวทั่วไปแล้ว คุณสามารถเปิดการตั้งค่าของคอลัมน์แรกได้

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2

เพิ่มเนื้อหา H1

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกในคอลัมน์ 2 เพิ่มเนื้อหา H1 ที่คุณเลือกหากคุณใช้ส่วนนี้เป็นฮีโร่ หรือเนื้อหา H2 หากคุณใช้งานส่วนอื่นในหน้าของคุณ

การตั้งค่าข้อความ H1

จัดรูปแบบการตั้งค่าข้อความส่วนหัวของโมดูลนี้ต่อไป

• แบบอักษรของหัวข้อ: Playfair Display
• หัวเรื่องข้อความสี: #212121
• ขนาดข้อความหัวเรื่อง:
  • เดสก์ท็อป: 100px
  • แท็บเล็ต: 60px
  • โทรศัพท์: 45px

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและใช้ความกว้างสูงสุด

• ความกว้างสูงสุด: 600px

เพิ่มโมดูลข้อความ #2 ลงในคอลัมน์ 2

เพิ่มเนื้อหา

ด้านล่างโมดูลข้อความแรก เราจะเพิ่มโมดูลข้อความอื่น คราวนี้เราจะรวมเนื้อหาคำอธิบายบางส่วน

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• ขนาดตัวอักษร: 15px
• ความสูงของบรรทัดข้อความ: 2em

ขนาด

ใช้ความกว้างสูงสุดในการตั้งค่าการปรับขนาดด้วย

• ความกว้างสูงสุด: 520px

ระยะห่าง

จากนั้นไปที่การตั้งค่าการเว้นวรรคและใช้ค่าที่ตอบสนอง

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: 20vh
  • แท็บเล็ตและโทรศัพท์: 50px
• ช่องว่างภายในด้านซ้าย: 5%

ชายแดน

เรากำลังรวมเส้นขอบด้านซ้ายในการตั้งค่าเส้นขอบด้วย

• ความกว้างของเส้นขอบด้านซ้าย: 2px
• สีขอบซ้าย: #000000

เพิ่มข้อความวงกลม SVG นิเมชั่น

เพิ่มโมดูลโค้ดลงในคอลัมน์ 1

ตอนนี้เราได้สร้างพื้นฐานของการออกแบบส่วนของเราแล้ว เราสามารถมุ่งเน้นไปที่การสร้างแอนิเมชั่น SVG ของข้อความวงกลม ในการเพิ่มแอนิเมชั่น SVG ของข้อความวงกลม เราจะใช้โมดูลโค้ดในคอลัมน์ 1 เพิ่มเข้าไป

เพิ่มลิงค์

หากคุณต้องการให้แอนิเมชั่น SVG ของข้อความวงกลมนี้สามารถคลิกได้ คุณสามารถเพิ่ม URL ที่คุณเลือกได้ในการตั้งค่าลิงก์ของโมดูล

ขนาด

ตรวจสอบให้แน่ใจว่าความกว้างของโมดูลถูกตั้งค่าเป็น "100%" ในการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 100%

เพิ่ม Circle & Text SVG ลงใน Code Box

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

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

จัดรูปแบบ SVG ด้วย CSS

แน่นอน เราจะต้องจัดรูปแบบเส้นทางข้อความ SVG เพื่อให้ตรงกับการออกแบบของเรา เรากำลังตรวจสอบให้แน่ใจว่า SVG ถูกตั้งค่าเป็น “100%” เช่นกัน วางบรรทัดของโค้ด CSS ต่อไปนี้ในกล่องโค้ด ระหว่างแท็กสไตล์:

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

เพิ่มแท็ก HTML AnimateTransform

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

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

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

แก้ไขเส้นทางข้อความสำหรับใช้เอง

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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