เนื้อหา
- เริ่มต้นใช้งาน
- การสร้างฐานของจานเสียง
- การสร้างเท้า
- ที่แขนและศีรษะ
- สีและพื้นผิว
- การแสดงผลและการส่งออก
- การตกแต่งโลโก้
- ทำให้โลโก้เคลื่อนไหว
มีหลายวิธีในการสร้างภาพเคลื่อนไหว 3 มิติบนเว็บโดยส่วนใหญ่ต้องการความรู้เกี่ยวกับ JavaScript และ WebGL เป็นอย่างดีหรือการใช้ปลั๊กอินเช่น Flash ด้วยการแปลง CSS 3D ทำให้สามารถสร้าง 3 มิติได้โดยใช้ HTML และ CSS เท่านั้น แต่ก็ไม่ง่ายที่จะทำเช่นนั้น Tridiv แอปออนไลน์ฟรีของฉันช่วยลดความซับซ้อนของกระบวนการโดยนำเสนออินเทอร์เฟซ WYSIWYG ที่เรียบง่ายและใช้งานง่ายซึ่งช่วยให้ผู้ใช้สามารถสร้างวัตถุ 3 มิติได้โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว
ในบทแนะนำนี้เราจะสร้างและทำให้โลโก้เคลื่อนไหวสำหรับ "Tridiv Records" ซึ่งเป็นค่ายเพลงสมมติโดยใช้ HTML และ CSS เท่านั้น ภาพหลักสำหรับโลโก้จะถูกสร้างขึ้นในรูปแบบ 3 มิติโดยใช้ Tridiv จากนั้นเราจะเพิ่มองค์ประกอบการพิมพ์โดยใช้ HTML และ CSS ปกติ
คุณสามารถดูภาพเคลื่อนไหวสุดท้ายและรหัสที่สร้างขึ้นได้ที่นี่
เริ่มต้นใช้งาน
เราจะเริ่มต้นด้วยการสร้างเครื่องเล่นแผ่นเสียงในรูปแบบ 3 มิติโดยใช้ Tridiv ไปที่ tridiv.com และเปิดแอป คุณจะต้องใช้ Chrome, Safari หรือ Opera 15 (หรือใหม่กว่า)
ก่อนเริ่มต้นสิ่งสำคัญคือต้องเข้าใจอินเทอร์เฟซของ Tridiv ส่วนหลักของโปรแกรมแก้ไขประกอบด้วยสี่มุมมอง: ด้านบนซ้ายคือมุมมอง 3 มิติซึ่งให้มุมมองที่สมบูรณ์ของฉาก อีกสามมุมมองจะแสดงจากด้านบนด้านข้างและด้านหน้า ด้วยการใช้มุมมองทั้งสามนี้คุณสามารถสร้างแก้ไขและย้ายรูปร่าง 3 มิติได้
แถบเครื่องมือแนวนอนแบ่งออกเป็นสองส่วนคือส่วนด้านซ้ายแสดงข้อมูลที่เกี่ยวข้องกับเอกสารของคุณ ส่วนด้านขวาประกอบด้วยเครื่องมือสำหรับสร้างและแก้ไขรูปร่าง ย้าย การเลือกและ แก้ไข ปุ่มเลือกจะสลับไปมาระหว่างโหมดการแก้ไขต่างๆ
บานหน้าต่างคุณสมบัติ (แถบด้านข้าง) จะแสดงการตั้งค่าเอกสารเช่นการซูมและสแนปไปยังเส้นตารางและคุณสมบัติของรูปร่างที่เลือก (ขนาดตำแหน่งการหมุนสีและอื่น ๆ ) หน่วยที่ใช้สำหรับขนาดและตำแหน่งคือ ems; มุมการหมุนเป็นองศา
เพื่อหลีกเลี่ยงความสับสนในบทช่วยสอนในภายหลังเราจะใช้ชวเลขต่อไปนี้:
w = ความกว้าง h = ความสูง d = diam ความลึก = เส้นผ่านศูนย์กลาง x deg = การหมุนในแกน x y deg = การหมุนในแกน y z deg = การหมุนในแกน z
การสร้างฐานของจานเสียง
เริ่มต้นด้วยการตั้งค่าการซูมเป็น 200 ในการช่วยวาดรูปร่างให้เปิดใช้งานการตั้งค่า snap to grid ในไฟล์ การตั้งค่าเอกสาร ส่วนของแถบด้านข้าง ตั้งค่าสแน็ปเป็น 0.125.
ฐานของแผ่นเสียงประกอบด้วยรูปทรงสี่เหลี่ยมเรียบๆดังนั้นให้คลิกที่ไฟล์ เพิ่มทรงลูกบาศก์ ในแถบเครื่องมือด้านบน คุณควรเห็นรูปสี่เหลี่ยมขนมเปียกปูนปรากฏในทั้งสี่มุมมองในตัวแก้ไข
เปลี่ยนชื่อรูปร่างเป็น ฐาน โดยใช้ฟิลด์ชื่อของบานหน้าต่างคุณสมบัติ (ภายใต้ คุณสมบัติของรูปร่าง). ชื่อของรูปร่างต้องเป็นชื่อคลาส CSS ที่ถูกต้องเนื่องจากจะถูกใช้ในโค้ดที่สร้างโดยโปรแกรมแก้ไข เราจะใช้ชื่อคลาสเหล่านี้ในภายหลังเมื่อทำให้โลโก้เคลื่อนไหวดังนั้นโปรดตรวจสอบให้แน่ใจว่าคุณตั้งชื่อรูปร่างใหม่ทุกรูปแบบที่คุณสร้างอย่างถูกต้อง
เมื่อตั้งชื่อลูกบาศก์แล้วตรวจสอบให้แน่ใจว่าได้เลือกไว้ในมุมมองด้านบน (ควรไฮไลต์เป็นสีน้ำเงินโดยมีวงแหวนวงกลมรอบ ๆ เครื่องมือ) จากนั้นคลิกที่ แก้ไข ปุ่มที่ด้านบนสุดของวงแหวนเพื่อแสดงแฮนเดิลแก้ไข ลากที่จับควบคุมที่ด้านข้างของทรงลูกบาศก์จนกระทั่งถึงความกว้างและความลึก w = 10 และ d = 8 ใน คุณสมบัติของรูปร่าง.
คลิกที่รูปร่างภายในมุมมองด้านข้าง ซึ่งจะแสดงแฮนเดิลการแก้ไขในมุมมองนี้ทำให้เราสามารถเปลี่ยนความสูงได้ ปรับความสูงจนกว่าจะถึง h = 2. คุณยังสามารถพิมพ์ค่าลงในบานหน้าต่างคุณสมบัติได้โดยตรง หากต้องการปัดเศษมุมของลูกบาศก์ให้เปลี่ยนค่ามุมในบานหน้าต่างคุณสมบัติเป็น 1.75จากนั้นกดปุ่ม [Enter] กุญแจสำคัญในการใช้การเปลี่ยนแปลง คุณจะมีสิ่งนี้
การสร้างเท้า
สำหรับเท้าของจานหมุนเราจะใช้กระบอกสูบ เพิ่มกระบอกสูบจากนั้นเปลี่ยนเส้นผ่านศูนย์กลางเป็น diam = 1.75 และความสูงถึง h = 0.5. คลิกที่ ย้าย ปุ่มเลือกในแถบเครื่องมือด้านบนเพื่อแสดงพื้นที่ที่ลากได้บนรูปร่าง ย้ายกระบอกสูบไปไว้ใต้ฐานวางไว้ที่มุมใดมุมหนึ่ง (คุณอาจต้องย้ายไปที่มุมมองด้านบนด้านข้างและด้านหน้า)
ทำซ้ำกระบอกสูบ (กดปุ่ม ทำซ้ำ ในวงแหวนวงกลมของเครื่องมือหรือกดปุ่ม ง คีย์) และเพื่อย้ายกระบอกสูบใหม่ไปยังอีกมุมหนึ่งของฐาน ทำซ้ำขั้นตอนนี้จนกว่าเท้าทั้งสี่จะอยู่ในตำแหน่งที่ถูกต้อง อย่าลืมตั้งชื่อกระบอกสูบ (ตัวอย่างเช่น ฟุตซ้ายบน, ฟุตขวาบน, ฟุตซ้ายล่าง, ฟุตซ้ายบน). เมื่อคุณทำเสร็จแล้วผลลัพธ์ควรมีลักษณะดังนี้
ตอนนี้เราจะดูการสร้างแผ่นเสียงดิสก์แกนแขนและปุ่ม ขั้นตอนการสร้างรูปทรงถัดไปคล้ายกับเท้า นี่คือขนาดที่ใช้สำหรับกระบอกสูบต่างๆ:
แผ่นเสียง: diam = 7; h = 0,5 แผ่น: diam = 6.75; h = ปุ่ม 0,25: diam = 1.5; h = 0,25 แขนแกน - ฐาน: diam = 2.25; h = 0,25 แกนแขน: diam = 1.375; h = 1
ในการปรับแต่งด้านข้างของกระบอกสูบคุณสามารถเพิ่มจำนวนใบหน้าในแต่ละอันได้โดยใช้ฟิลด์ด้านข้างในบานหน้าต่างคุณสมบัติ อย่าใส่ด้านข้างมากเกินไปเพราะอาจส่งผลเสียต่อประสิทธิภาพทั่วโลกของตัวแก้ไขและภาพเคลื่อนไหวขั้นสุดท้าย ในกรณีนี้ขอแนะนำว่าอย่าใช้แผ่นเสียงและแผ่นดิสก์เกิน 32 ด้าน คุณควรมีสิ่งนี้
ที่แขนและศีรษะ
สำหรับแขนและส่วนหัวของจานหมุนเราจะใช้ลูกบาศก์ สำหรับแขนให้สร้างทรงลูกบาศก์ (w = 0.25; ชั่วโมง = 0.25; d = 4) จากนั้นใช้การหมุนของ -33° บน แกน y. สำหรับส่วนหัวให้สร้างทรงลูกบาศก์ (w = 0.5; ชั่วโมง = 0.5; d = 1) จากนั้นใช้การหมุนของ -33° บน แกน y. จัดรูปทรงทั้งสองให้ตรงกับกระบอกสูบแกนแขน ผลลัพธ์ควรมีลักษณะดังนี้
สีและพื้นผิว
เกือบจะเสร็จแล้วกับเครื่องเล่นแผ่นเสียง ขั้นตอนสุดท้ายคือการกำหนดสีและใช้พื้นผิวกับไวนิล (ภาพที่แสดงถึงพื้นผิวของบันทึก) ในการกำหนดสีให้เลือกรูปร่างและคลิกที่ไฟล์ สี ในบานหน้าต่างคุณสมบัติ Tridiv ช่วยให้คุณสามารถระบุสีแต่ละสีสำหรับแต่ละใบหน้าของรูปร่างได้ แต่ในตัวอย่างนี้เราจำเป็นต้องใช้ฟิลด์ทั้งหมดเพื่อเปลี่ยนสีของใบหน้าทั้งหมด ในการดำเนินการนี้เพียงป้อนรหัสสีฐานสิบหกในช่องจากนั้นยืนยันโดยการกด ป้อน.
นี่คือสีที่ใช้ในตัวอย่างนี้:
ฐาน: # 0099FF ฟุตปุ่มแกนแขนและหัว: # F2EEE5 ดิสก์: # fa7f7a
สำหรับพื้นผิวของไวนิลนั้นมีขั้นตอนคล้ายกับการกำหนดสี เลือกกระบอกสูบของดิสก์จากนั้นคลิกที่ไฟล์ ภาพ ในบานหน้าต่างคุณสมบัติ วาง URL ของรูปภาพที่คุณต้องการใช้กับไวนิลในช่องด้านบนและยืนยันโดยการกด ป้อน. คุณสามารถใช้ภาพของคุณเองหรือดาวน์โหลดภาพที่ใช้ในตัวอย่างนี้
ตอนนี้คุณควรมีบางอย่างที่มีลักษณะเช่นนี้
การแสดงผลและการส่งออก
เมื่อเสร็จสิ้นการหมุนแผ่นเสียงแล้วเรากำลังดำเนินการตามวิธีการแสดงผลก่อนที่จะส่งออก คลิก ดูตัวอย่าง ที่ด้านบนของบานหน้าต่างคุณสมบัติ ตั้งค่าการซูมเป็น 200 เพื่อแสดงแผ่นเสียงให้ใหญ่ขึ้น หากต้องการลบเส้นขอบสีดำของรูปร่างให้ไปที่ไฟล์ พรมแดน ส่วนของบานหน้าต่างและตั้งค่าความทึบเป็น 0. ผลลัพธ์ควรมีลักษณะดังนี้
เราต้องการให้จานหมุนสว่างจากด้านบน ในการดำเนินการนี้ให้หมุนฉากในลักษณะที่ด้านบนของแผ่นเสียงหันเข้าหาคุณ ฐานควรมีลักษณะเป็นรูปสี่เหลี่ยมผืนผ้าอย่างสมบูรณ์ การเปลี่ยนค่าแสงและความมืดในส่วน tridiv.com/d/4k6 ของบานหน้าต่างคุณสมบัติจะสร้างเงาขึ้นใหม่ภายในฉาก เปลี่ยนค่าแสงเป็น 0.
ขณะนี้แผ่นเสียงพร้อมที่จะส่งออกแล้ว!
การตกแต่งโลโก้
เราพร้อมที่จะเพิ่มข้อความลงในโลโก้และสร้างภาพเคลื่อนไหวของโลโก้ คลิก แก้ไข บนปุ่ม CodePen ที่ด้านล่างซ้ายของไฟล์ ดูตัวอย่าง ดูเพื่อส่งออกรหัสไปยัง CodePen โปรดทราบว่าโค้ด CSS ที่สร้างโดย Tridiv ไม่ได้ใช้คำนำหน้าผู้ขายดังนั้นคุณจะต้องใช้เครื่องมือเช่น prefixr.com หรือ leaverou.github.io/prefixfree เพื่อให้โค้ดทำงานได้ในทุกเบราว์เซอร์ เริ่มต้นด้วยการปิดบานหน้าต่าง JavaScript เนื่องจากเราจะไม่ใช้มัน ในบานหน้าต่าง HTML ลบแท็กสไตล์ที่ใช้กับ .scene div.
ขยายบานหน้าต่าง CSS และเพิ่มโค้ดต่อไปนี้ในตอนท้าย:
.scene {แปลง: translateY (-140px) หมุน X (-55deg); }
ที่นี่ แปล Y (-140px) เลื่อนแผ่นเสียง 140px ขึ้นไปโดยเว้นที่ว่างไว้สำหรับข้อความที่อยู่ด้านล่าง จากนั้นไฟล์ หมุน X (-55deg) ตั้งค่าความเอียงในแนวตั้งของเครื่องเล่นแผ่นเสียง
ในการเพิ่มข้อความคุณต้องเพิ่มไฟล์ .หัวข้อ div หลังการเปิด #tridiv div ในบานหน้าต่าง HTML ข้างในเพิ่มสอง ช่วง> (.main-title และ. sub-title) คั่นด้วย ชม. />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div> …
จากนั้นคุณต้องใช้แบบอักษรและสไตล์ที่ถูกต้อง ในบานหน้าต่าง CSS ให้นำเข้าแบบอักษร Open Sans ที่ใช้ในโลโก้และเพิ่มสไตล์พื้นฐานสำหรับองค์ประกอบข้อความ
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * การจัดกึ่งกลางบล็อกข้อความ + รูปแบบตัวอักษรพื้นฐาน * / ชื่อ {ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ระยะขอบ: 0 0 0 -165px; ความกว้าง: 330px; ความสูง: 5em; font-family: 'Open Sans', sans-serif; น้ำหนักตัวอักษร: 300; ขนาดตัวอักษร: 24px; จัดข้อความ: ศูนย์; ระยะห่างตัวอักษร: 1.5em; สี: # 0099FF; } title hr {border: 1px solid # fa7f7a; ระยะขอบ: .75em 0; } ช่วงหัวเรื่อง {display: block; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
โวล่า! โลโก้ของคุณเสร็จสมบูรณ์ ควรมีลักษณะคล้ายกับภาพด้านล่าง เมื่อโมเดล 3 มิติของคุณเสร็จสิ้นคุณสามารถใช้พลังของ CSS เพื่อทำให้ดียิ่งขึ้นได้โดยการเพิ่มสไตล์ภาพเคลื่อนไหวหรือเหตุการณ์ของเมาส์เพียงแค่ปฏิบัติต่อโมเดล 3 มิติเหมือนกับองค์ประกอบ HTML อื่น ๆ
ทำให้โลโก้เคลื่อนไหว
ดูภาพเคลื่อนไหวโดยใช้โลโก้ที่นี่ ในขณะที่ "ตกอยู่ใน" ของเครื่องเล่นแผ่นเสียงแต่ละส่วนจะแชร์ภาพเคลื่อนไหวคีย์เฟรมเดียวกันโดยมีความล่าช้าที่แตกต่างกัน รูปร่างมีแอตทริบิวต์ด้านบนที่ตั้งค่าเป็น 50%. ในการสร้างเอฟเฟกต์ที่ลดลงเราจะทำให้แอตทริบิวต์ด้านบนจาก -400px ถึง 50%:
@keyframes ตก {0% {ด้านบน: -400px; } / * เราเริ่มแอนิเมชั่นโดยวางตำแหน่งรูปร่างให้มีความสูง 400px * / 100% {ด้านบน: 50%; } / * จากนั้นเราก็จบลงที่ตำแหน่งเดิม * /}
คุณสามารถเพิ่มแอนิเมชั่นนี้ให้กับรูปร่างทั้งหมดได้ดังนี้:
.shape {ด้านบน: -400px; แอนิเมชั่น: ลดลง 1 วินาทีทำให้ 0 วินาทีไปข้างหน้า; }
ตั้งค่าแอตทริบิวต์ด้านบนเป็น -400px และเพิ่มความล่าช้า:
.platter {animation-delay: 1.05s; } .disc {animation-delay: 1.35s; } .button {animation-delay: 1.5s; } ...
สร้างเอฟเฟกต์ "ตีกลับ" ขั้นสุดท้ายโดยใช้ หมุน X แอตทริบิวต์:
90% {แปลง: translateY (-5em) หมุน X (780deg) หมุน Y (0deg); } 95% {แปลง: translateY (-4em) หมุน X (620deg) หมุน Y (0deg); } 100% {แปลง: translateY (-4.5em) หมุน X (660deg) หมุน Y (0deg); }
นั่นคือวิธีที่เราสร้างเวอร์ชันนี้ขึ้นมาโดยเฉพาะ แต่อย่าลืมว่าไม่มีข้อ จำกัด !
คำ: Julian Garnier
บทความนี้เคยปรากฏในนิตยสาร net ฉบับ 248
