สร้างเอฟเฟกต์ข้อความ 3 มิติแบบเคลื่อนไหว

เนื้อหา

• 01. เริ่มต้นเอกสาร HTML
• 02. เนื้อหา HTML ที่มองเห็นได้
• 03. การเริ่มต้น CSS
• 04. คอนเทนเนอร์แอนิเมชั่น
• 05. การเริ่มต้นภาพเคลื่อนไหว
• 06. เคลื่อนไหวในมุมมอง
• 07. จบแอนิเมชั่น

Love Lost by Canada’s Jam3 เป็นบทกวีอินเทอร์แอคทีฟสีเข้มที่สวยงามและพร้อมใช้งานบนมือถือที่มีเนื้อหาเกี่ยวกับความรู้สึกที่ยั่งยืนเกี่ยวกับความรักที่หายไป เค้าโครงเว็บไซต์สร้างขึ้นโดยใช้ HTML5 พร้อมกับไลบรารี GSAP ที่เปิดใช้งานแอนิเมชั่นหนึ่งในคุณสมบัติที่โดดเด่นที่สุดคือข้อความ 3 มิติแบบเคลื่อนไหวที่ทำให้กวีนิพนธ์ของ Love Lost มีชีวิตขึ้นมา

• สร้างเอฟเฟกต์การพิมพ์ 3 มิติแบบโต้ตอบ

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

ต้องการสร้างเว็บไซต์ที่น่าสนใจของคุณเองหรือไม่? ลองใช้เครื่องมือสร้างเว็บไซต์และทำให้สิ่งต่างๆทำงานได้อย่างราบรื่นโดยเลือกบริการเว็บโฮสติ้งที่เหมาะสม

01. เริ่มต้นเอกสาร HTML

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

! DOCTYPE html> html> head> title> 3D Text Movement / title> ลิงก์ rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 ที่นี่ / body> / html>

02. เนื้อหา HTML ที่มองเห็นได้

เนื้อหา HTML ที่มองเห็นได้ประกอบด้วยที่เก็บบทความที่มีข้อความที่มองเห็นได้ ส่วนที่สำคัญของคอนเทนเนอร์บทความคือแอตทริบิวต์ "data-animate" ซึ่ง CSS จะอ้างอิงเพื่อใช้เอฟเฟ็กต์ภาพ ข้อความภายในบทความสร้างจากแท็ก h1 เพื่อระบุว่าเนื้อหาเป็นชื่อหลักของเพจ

article data-animate = "move in"> h1> Hello There! / h1> / article>

03. การเริ่มต้น CSS

สร้างไฟล์ใหม่ชื่อ "styles.css" ชุดคำสั่งแรกตั้งค่าคอนเทนเนอร์ HTML และเนื้อหาของหน้าให้มีพื้นหลังสีดำและไม่มีระยะห่างของเส้นขอบที่มองเห็นได้ นอกจากนี้ยังตั้งค่าสีขาวเป็นสีข้อความเริ่มต้นสำหรับองค์ประกอบลูกทั้งหมดในเพจที่จะสืบทอด หลีกเลี่ยงสีดำเริ่มต้นของเนื้อหาที่ทำให้ข้อความดูเหมือนจะมองไม่เห็น

html เนื้อความ {พื้นหลัง: # 000; ช่องว่างภายใน: 0; ระยะขอบ: 0; สี: #fff; }

04. คอนเทนเนอร์แอนิเมชั่น

คอนเทนเนอร์เนื้อหาที่อ้างอิงด้วยแอตทริบิวต์ "data-animate" มีการใช้รูปแบบเฉพาะ ขนาดของมันถูกกำหนดให้ตรงกับขนาดเต็มของหน้าจอโดยใช้หน่วยการวัด vw และ vh รวมทั้งมีการหมุนเล็กน้อย มีการใช้ภาพเคลื่อนไหวที่เรียกว่า "moveIn" ซึ่งจะคงอยู่เป็นระยะเวลา 20 วินาทีและจะเล่นซ้ำไปเรื่อย ๆ

[data-animate = "ย้ายเข้า"] {position: relative; ความกว้าง: 100vw; ความสูง: 100vh; ความทึบ: 1; ภาพเคลื่อนไหว: moveIn 20s infinite; จัดข้อความ: ศูนย์; แปลง: หมุน (20deg); }

05. การเริ่มต้นภาพเคลื่อนไหว

ภาพเคลื่อนไหว "moveIn" ที่อ้างถึงในขั้นตอนก่อนหน้านี้ต้องใช้คำจำกัดความโดยใช้ @keyframes เฟรมแรกเริ่มต้นที่ 0% ของภาพเคลื่อนไหวจะกำหนดขนาดฟอนต์เริ่มต้นการวางตำแหน่งข้อความและเงาที่มองเห็นได้ นอกจากนี้รายการยังถูกตั้งค่าด้วยความทึบเป็นศูนย์เพื่อให้มองไม่เห็นในตอนแรกนั่นคือ แสดงออกมาจากมุมมอง

@keyframes moveIn {0% {font-size: 1em; ซ้าย: 0; ความทึบ: 0; ข้อความเงา: ไม่มี; } * * * ขั้นตอนที่ 6 ที่นี่}

06. เคลื่อนไหวในมุมมอง

เฟรมถัดไปวางไว้ที่ 10% ผ่านภาพเคลื่อนไหว กรอบนี้ตั้งค่าความทึบให้มองเห็นได้เต็มที่ส่งผลให้ข้อความค่อยๆเคลื่อนไหวในมุมมองนอกจากนี้ยังมีการเพิ่มเงาหลาย ๆ สีด้วยสีน้ำเงินและลดค่าสีเพื่อให้ภาพลวงตาของความลึก 3 มิติให้กับข้อความ

10% {ความทึบ: 1; ข้อความเงา: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * ขั้นตอนที่ 7 ที่นี่

07. จบแอนิเมชั่น

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

80% {font-size: 8em; ซ้าย: -8em; ความทึบ: 1; } 100% {font-size: 10em; ซ้าย: -10em; ความทึบ: 0; ข้อความเงา: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *

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

บทความนี้ตีพิมพ์ครั้งแรกในฉบับที่ 273 ของนิตยสาร Web Designer Web Designer ซื้อฉบับ 273 ที่นี่ หรือ สมัครสมาชิก Web Designer ที่นี่.