วิธีเพิ่มแอนิเมชั่นข้อความขั้นสูงภายใน Divi ด้วย Letterize.js & Anime.js

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงข้อความแอนิเมชั่นขั้นสูงฟรี

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

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

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

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

ดาวน์โหลด

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

1. สร้างการออกแบบส่วนฮีโร่

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 180px (เดสก์ท็อป), 100px (แท็บเล็ต), 50px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 180px (เดสก์ท็อป), 100px (แท็บเล็ต), 50px (โทรศัพท์)

เพิ่มแถว #1

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

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

ระยะห่าง

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและลบช่องว่างภายในเริ่มต้นทั้งหมด

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

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

เพิ่ม H1 Copy

โมดูลเดียวที่เราต้องการในแถวนี้คือโมดูลข้อความ เพิ่มเนื้อหา H1 ที่คุณเลือก

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

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

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• หัวเรื่องข้อความสี: rgba(232,232,232,0.41)
• ขนาดข้อความหัวเรื่อง: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• ระยะห่างของตัวอักษรหัวเรื่อง: -10px (เดสก์ท็อป), -4px (แท็บเล็ต), -3px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 0.6em (เดสก์ท็อป), 0.7em (แท็บเล็ต), 0.8em (โทรศัพท์)

เพิ่มแถว #2

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

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

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนความกว้างสูงสุดในการตั้งค่าขนาด

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

ระยะห่าง

ลบระยะขอบด้านล่างทั้งหมดและช่องว่างภายในถัดไป

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

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดภาพประกอบ

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

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

เพิ่มระยะขอบด้านล่างติดลบต่อไป

• ขอบล่าง: -12%

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 3000ms

เพิ่มแถว #3

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

ไปยังแถวถัดไปและแถวสุดท้าย ใช้โครงสร้างคอลัมน์ต่อไปนี้:

ระยะห่าง

ไปที่แท็บการออกแบบของแถวและเพิ่มค่าช่องว่างภายในที่กำหนดเอง

• ช่องว่างภายในด้านบน: 10%
• แผ่นรองด้านล่าง: 5%
• ช่องว่างภายในด้านซ้าย: 3%
• ช่องว่างภายในด้านขวา: 3%

กล่องเงา

จากนั้นเปิดใช้งานเงากล่องที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.06)

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 3000ms

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

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

ถึงเวลาเพิ่มโมดูล โมดูลแรกที่เราต้องการคือโมดูลข้อความที่มีเนื้อหาคำอธิบาย

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

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษร: 18px
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 2.7em

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

เพิ่มสำเนา

โมดูลสุดท้ายที่เราต้องการคือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #171cff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px

• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

จากนั้น ใช้ค่าช่องว่างภายในต่อไปนี้ในการตั้งค่าระยะห่าง:

• ช่องว่างภายในด้านบน: 2%
• แผ่นรองด้านล่าง: 2%
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

กล่องเงา

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มเงาของกล่องต่อไปนี้:

• ตำแหน่งแนวตั้งเงาของกล่อง: 5px
• ความแรงของการกระจายเงาของกล่อง: -2px
• สีเงา: #171cff

2. เพิ่มคลาส CSS ให้กับพาดหัว

เปิดโมดูลข้อความ #1 & คลิกที่แท็บข้อความ

เมื่อเรามีองค์ประกอบการออกแบบทั้งหมดแล้ว ก็ถึงเวลาเพิ่มแอนิเมชั่นข้อความขั้นสูงในพาดหัวของเรา เปิดโมดูลข้อความที่มีสำเนา H1 และเลือกแท็บข้อความ

เพิ่ม CSS ID ลงในแท็ก H1

ภายใน H1 เพิ่มรหัส CSS ที่กำหนดเอง

• ID=”พาดหัวคัดลอก”

3. เพิ่ม Letterize & Anime Libaries

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

ในการสร้างแอนิเมชั่น เราใช้ไลบรารี letterize.js และ anime.js หากต้องการเพิ่มไลบรารีเหล่านี้ ให้แทรก Code Module ใหม่ในคอลัมน์ของแถวสุดท้าย

เพิ่มทั้งสองไลบรารี

จากนั้น เพิ่มแท็กสคริปต์สองแท็กที่มีแหล่งที่มาต่อไปนี้ซึ่งนำกลับไปยังไลบรารี:

• src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”
• src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

4. เพิ่มรหัสแอนิเมชั่น

แอนิเมชั่นสำหรับจดหมายในระดับบุคคล

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

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

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

แอนิเมชั่นสำหรับประโยค

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

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

เพิ่ม CSS ที่กำหนดเองสำหรับ Span

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

#headlineCopy span {
display: inline-block;
}

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

ในบทความนี้ เราได้แสดงวิธีสร้างแอนิเมชั่นข้อความขั้นสูงสำหรับพาดหัวของคุณ เราได้สร้างการออกแบบทั้งหมดภายใน Divi และรวมเฟรมเวิร์กเข้ากับไลบรารี letterize.js และ anime.js หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง!

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