ชื่อของคุณเป็นส่วนที่สำคัญที่สุดส่วนหนึ่งของหน้าแรกของคุณ โดยปกติจะเป็นสิ่งที่คุณเห็นเป็นอันดับแรกและด้วยเหตุนี้สิ่งที่กำหนดความประทับใจแรก เช่นเดียวกับความประทับใจแรกอื่น ๆ คุณต้องการให้เป็นสิ่งที่ดี ตอนนี้หากคุณกำลังมองหาวิธีที่สร้างสรรค์ในการนำเสนอชื่อของคุณคุณจะเพลิดเพลินไปกับบทช่วยสอนนี้เพราะเราจะแสดงวิธีเพิ่มภาพเคลื่อนไหวบล็อกข้อความ CSS ลงในชื่อของคุณและคุณยังสามารถดาวน์โหลดไฟล์ JSON เค้าโครงได้ฟรี!
การสำรวจ
ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูผลลัพธ์ของขนาดหน้าจอที่แตกต่างกัน
เริ่มการออกแบบกันเถอะ
เพิ่มส่วน # 1
พื้นหลังไล่ระดับสี
เริ่มต้นด้วยการเพิ่มส่วนปกติลงในเพจใหม่หรือในเพจที่คุณกำลังดำเนินการ เปิดการตั้งค่าส่วนและใช้พื้นหลังไล่ระดับสีต่อไปนี้:
- สี 1: # f0f2b
- สี 2: # c10b1a
- ประเภทการไล่ระดับสี: เชิงเส้น
- ทิศทางการไล่ระดับสี: 63deg
การเว้นวรรค
สลับไปที่แท็บออกแบบส่วนและใช้ค่าการเติมด้านบนและด้านล่างที่กำหนดเองต่อไปนี้กับขนาดหน้าจอต่างๆ:
- การเสริมด้านบน: 7vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)
- ช่องว่างด้านล่าง: 7vw (โต๊ะทำงาน), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)
ชายแดน
นอกจากนี้ยังเพิ่มเส้นขอบให้กับส่วน
- ความกว้างชายแดน: 2vw (บน, ซ้าย, ขวา)
- ความกว้างชายแดนด้านล่าง: 0vw
- สีเส้นขอบ: #ffffff
เพิ่มบรรทัดใหม่
โครงสร้างคอลัมน์
เพิ่มบรรทัดใหม่ไปยังส่วนต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
เปิดพารามิเตอร์ line และแก้ไขพารามิเตอร์การกำหนดขนาดตาม:
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
เพิ่มโมดูลข้อความในคอลัมน์
เพิ่มเนื้อหา H1
จากนั้นเพิ่มโมดูลข้อความที่มีชื่อ H1 ที่คุณเลือก
เพิ่มแท็ก Div ให้กับแต่ละคำในชื่อ H1
สลับไปที่แท็บข้อความของสำเนาชื่อเรื่องของคุณและเพิ่ม div ที่แตกต่างกันให้กับแต่ละคำในชื่อเรื่องของคุณ รหัส CSS ต้องแตกต่างกันสำหรับแต่ละคำ
พร้อม
ที่
สร้าง
สวย
เว็บไซต์?
การตั้งค่าข้อความ H1
เปลี่ยนไปที่แท็บออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H1 ตาม:
- แบบอักษรของชื่อ: งาน Sans
- น้ำหนักแบบอักษรของชื่อเรื่อง: ปานกลาง
- สีข้อความส่วนหัว: #ffffff
- ขนาดข้อความส่วนหัว: 4vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)
- ความสูงของบรรทัดหัว: 1,4 em
การเว้นวรรค
จากนั้นเปลี่ยนค่าระยะขอบบนหน้าจอขนาดต่างๆ
- ระยะขอบซ้าย: 20vw (โต๊ะและแท็บเล็ต), 15vw (โทรศัพท์)
- ระยะขอบขวา: 35vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 15vw (โทรศัพท์)
เพิ่มโมดูลรหัสลงในคอลัมน์
ใส่รหัส CSS
เพื่อให้แอนิเมชั่นบล็อกข้อความใช้กับชื่อของเราเราจำเป็นต้องมีโค้ด CSS เราจะเพิ่มโค้ด CSS นี้ในโมดูลโค้ดใหม่
<style>
.display-state {display: inline
!important;}
#word-1
{-webkit-animation: slide-right
0.5s linear
0.3s both;animation: slide-right
0.5s linear
0.3s both;}
#word-2
{-webkit-animation: slide-right
0.5s linear
0.6s both;animation: slide-right
0.5s linear
0.6s both;}
#word-3
{-webkit-animation: slide-right
0.5s linear
0.9s both;animation: slide-right
0.5s linear
0.9s both;}
#word-4
{-webkit-animation: slide-right
0.5s linear
1.2s both;animation: slide-right
0.5s linear
1.2s both;}#word-5
{-webkit-animation: slide-right
0.5s linear
1.5s both;animation: slide-right
0.5s linear
1.5s both;}
@-webkit-keyframes slide-right
{0%
{background-color: #000;opacity: 0.5;color: transparent;}
1%
{opacity: 1;}}
</style>
การเว้นวรรค
สลับไปที่แท็บการออกแบบโมดูลและลบช่องว่างด้านล่างเริ่มต้นทั้งหมด
- ขอบล่าง: 0px
เพิ่มโมดูลปุ่มในคอลัมน์
เพิ่มสำเนา
โมดูลต่อไปที่เราต้องการคือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก
การตั้งค่าปุ่ม
เปลี่ยนไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าปุ่มตาม:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
- สีข้อความปุ่ม: #ffffff
- สีพื้นหลังของปุ่ม: # 000000
- ความกว้างเส้นขอบของปุ่ม: 0px
- แบบอักษรของปุ่ม: Sans ทำงาน
การเว้นวรรค
จากนั้นไปที่การตั้งค่าระยะห่างและใช้ค่าระยะขอบและช่องว่างที่กำหนดเองกับขนาดหน้าจอที่แตกต่างกัน
- อัตรากำไรขั้นต้นสูงสุด: 3vw (สำนักงาน)
- ระยะขอบซ้าย: 20vw (โต๊ะและแท็บเล็ต), 15vw (โทรศัพท์)
- การเสริมด้านบน: 1.2vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 4vw (โทรศัพท์)
- ช่องว่างด้านล่าง: 1.2vw (โต๊ะทำงาน), 2vw (แท็บเล็ต), 4vw (โทรศัพท์)
- ช่องว่างด้านซ้าย: 1.8vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 6vw (โทรศัพท์)
- ช่องว่างภายในขวา: 1.8vw (โต๊ะทำงาน), 3vw (แท็บเล็ต), 6vw (โทรศัพท์)
นิเมชั่น
ปรับแต่งการตั้งค่าภาพเคลื่อนไหวด้วย
- รูปแบบภาพเคลื่อนไหว: พลิก
- ทิศทางของภาพเคลื่อนไหว: ลง
- ความล่าช้าของภาพเคลื่อนไหว: 2000 มิลลิวินาที
- ความเข้มของภาพเคลื่อนไหว: 100%
- ความทึบของภาพเคลื่อนไหวเริ่มต้น: 100%
- เส้นโค้งความเร็วของภาพเคลื่อนไหว: เข้า - ออกได้ง่าย
- ภาพเคลื่อนไหวซ้ำ: หนึ่งครั้ง
เพิ่มส่วน # 2
ดำเนินการต่อโดยเพิ่มหัวข้อปกติใหม่ด้านล่างของหัวข้อก่อนหน้า
การเว้นวรรค
เปิดการตั้งค่าส่วนและลบการเติมด้านบนเริ่มต้น
- การเสริมด้านบน: 0px
เพิ่มบรรทัดใหม่
โครงสร้างคอลัมน์
เพิ่มแถวใหม่ต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์บรรทัดและปล่อยให้บรรทัดใช้ความกว้างทั้งหมดของคอนเทนเนอร์ส่วน
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
เพิ่มโมดูลข้อความในคอลัมน์
เพิ่มเนื้อหา
ถัดไป เพิ่มโมดูลข้อความด้วย เนื้อหา คำอธิบายที่คุณเลือก
สีพื้นหลัง
เพิ่มสีพื้นหลังสีขาว
- สีพื้นหลัง: #ffffff
การตั้งค่าข้อความ
สลับไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความตาม:
- แบบอักษรข้อความ: Sans ทำงาน
- สีข้อความ: # 9b9b9b
- ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
- ความสูงของบรรทัดข้อความ: 2.6em
การเว้นวรรค
เพิ่มค่าระยะห่างที่กำหนดเองบนหน้าจอขนาดต่างๆ
- ระยะขอบด้านบน: -5vw (เดสก์ท็อป), -20vw (แท็บเล็ต), -27vw (โทรศัพท์)
- ขอบซ้าย: 20vw (โต๊ะทำงาน), 13vw (แท็บเล็ต), 8vw (โทรศัพท์)
- ระยะขอบขวา: 20vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 8vw (โทรศัพท์)
- การเสริมด้านบน: 5vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)
- ช่องว่างด้านล่าง: 5vw (โต๊ะทำงาน), 7vw (แท็บเล็ตและโทรศัพท์)
- ช่องว่างด้านซ้าย: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)
- ช่องว่างภายในขวา: 3vw (โต๊ะทำงาน), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)
กล่องเงา
และดำเนินการตั้งค่าโมดูลให้สมบูรณ์โดยใช้เงากล่องที่ละเอียดอ่อน แค่นั้นแหละ!
- ความแรงของกล่องเงาเบลอ: 50px
- สีเงา: rgba (0,0,0,0,1)
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
คิดสุดท้าย
ในบทความนี้เราได้แสดงวิธีเพิ่มภาพเคลื่อนไหวบล็อกข้อความ CSS ให้กับชื่อของคุณ สิ่งสำคัญคือต้องแน่ใจว่าชื่อของคุณสามารถมองเห็นได้และอ่านได้ตั้งแต่เริ่มต้นการเพิ่มภาพเคลื่อนไหวลงในชื่อของคุณสามารถช่วยได้อย่างแน่นอน! คุณยังสามารถดาวน์โหลดไฟล์ JSON เค้าโครงได้ฟรี หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
แปลจาก: ElegantThemes