תוֹכֶן
ישנן מספר דרכים ליצור אנימציה תלת ממדית באינטרנט, רובן דורשות ידע טוב ב- JavaScript וב- WebGL, או בשימוש בתוסף כמו Flash. הודות לתמורות CSS 3D, ניתן ליצור תלת מימד באמצעות HTML ו- CSS בלבד, אך זה לא קל לעשות זאת. Tridiv, האפליקציה המקוונת החינמית שלי, מפשט את התהליך ומציע ממשק WYSIWYG פשוט ואינטואיטיבי המאפשר למשתמשים ליצור אובייקטים תלת ממדיים מבלי לכתוב שורת קוד אחת.
במדריך זה, אנו הולכים ליצור ולהנפיש לוגו עבור 'Tridiv Records', חברת תקליטים בדיונית, תוך שימוש ב- HTML ו- CSS בלבד. החזותית העיקרית של הלוגו תיווצר בתלת ממד באמצעות Tridiv. לאחר מכן נוסיף את האלמנטים הטיפוגרפיים באמצעות HTML ו- CSS רגילים.
אתה יכול לראות את האנימציה הסופית ואת הקוד שמייצר אותה כאן.
מתחילים
נתחיל ביצירת הפטיפון בתלת ממד באמצעות Tridiv. עבור אל tridiv.com והפעל את האפליקציה. יהיה עליך להשתמש ב- Chrome, Safari או Opera 15 (ואילך).
לפני שמתחילים, חשוב להבין את ממשק Tridiv. החלק הראשי של העורך מורכב מארבע תצוגות: בצד שמאל למעלה תצוגת התלת מימד, המספקת תצוגה מלאה של הסצנה. שלושת התצוגות האחרות מראות זאת מלמעלה, מהצד הקדמי. באמצעות שלוש תצוגות אלה, תוכל ליצור, לערוך ולהעביר צורות תלת מימד.
סרגל הכלים האופקי מחולק לשני חלקים: החלק השמאלי מציג מידע הנוגע למסמך שלך; החלק הימני מכיל כלים ליצירה ועריכה של צורות. ה מהלך לזוז לעבור בחירה ו לַעֲרוֹך לחצני הבחירה עוברים בין מצבי העריכה השונים.
חלונית המאפיינים (סרגל הצד) מציגה הגדרות מסמך כגון זום והצמד לרשת, ואת מאפייני הצורה שנבחרה (גודל, מיקום, סיבוב, צבע וכן הלאה). היחידה המשמשת למידות ומיקום היא ems; זוויות הסיבוב הן במעלות.
כדי למנוע בלבול בהמשך ההדרכה, נשתמש בקיצור הבא:
w = רוחב h = גובה d = עומק קוטר = קוטר x deg = סיבוב בציר x y deg = סיבוב בציר y z deg = סיבוב בציר z
יצירת בסיס הפטיפון
התחל בהגדרת ערך הזום ל 200. כדי לעזור לשרטט את הצורות, הפעל את הגדרת הצמד לרשת בסמל הגדרות מסמך קטע בסרגל הצד. הגדר את ערך הצמד ל 0.125.
בסיס הפטיפון מורכב מקובואיד פשוט, אז לחץ על מוסיפים קובואיד כפתור בסרגל הכלים העליון. אתה אמור לראות את הקוביד מופיע בכל ארבע התצוגות בעורך.
שנה את שם הצורה ל בסיס באמצעות שדה השם של חלונית המאפיינים (תחת מאפייני צורה). שם הצורה חייב להיות שם מחלקה CSS תקף מכיוון שהוא ישמש בקוד שנוצר על ידי העורך. אנו נשתמש בשמות הכיתות הללו מאוחר יותר בעת הנפשת הלוגו, לכן ודא שאתה שם לכל צורה חדשה שתיצור כראוי.
לאחר שמו של הקובואיד, וודא שהוא נבחר בתצוגה העליונה (עליו להיות מודגש בכחול, סביבו טבעת כלים עגולה), ואז לחץ על לַעֲרוֹך כפתור בחלק העליון של הטבעת כדי להציג את ידיות העריכה. גרור את ידיות השליטה בצידי הקובואיד, עד שהרוחב והעומק מגיעים w = 10 ו d = 8 בתוך ה מאפייני צורה.
לחץ על הצורה בתוך התצוגה הצדדית. זה יציג את ידיות העריכה בתצוגה זו, ומאפשר לנו לשנות את גובהו. התאם את הגובה עד שהוא מגיע h = 2. ניתן גם להקליד ערכים ישירות בחלונית המאפיינים. כדי לעגל את פינות הקוביד, שנה את ערכי הפינות בחלונית המאפיינים ל 1.75ואז לחץ על [להיכנס] מפתח ליישום השינויים. יהיה לך משהו כזה.
יצירת הרגליים
לרגליים של הפטיפון, אנו הולכים להשתמש בצילינדרים. הוסף גליל ואז שנה את קוטרו ל קוטר = 1.75 וגובהו ל h = 0.5. הקלק על ה מהלך לזוז לעבור כפתור הבחירה בסרגל הכלים העליון כדי להציג את האזור הניתן לגרירה על הצורה. העבירו את הגליל מתחת לבסיס והניחו אותו באחת הפינות. (ייתכן שיהיה עליך להזיז אותו בתצוגה העליונה, הצדדית והחזיתית.)
שכפל את הגליל (לחץ על לְשַׁכְפֵּל כפתור בטבעת הכלים העגולה, או לחץ על ד מפתח) ולהעביר את הגליל החדש לפינה אחרת בבסיס. חזור על התהליך עד שכל ארבע הרגליים ממוקמות כהלכה. אל תשכח למנות את הצילינדרים (למשל, רגליים-שמאל-עליון, רגליים-ימין-עליון, רגליים-שמאל-תחתון, רגליים-שמאל-עליון). לאחר שתעשה זאת, התוצאה אמורה להיראות כך.
נבחן כעת יצירת מגש, דיסק, ציר זרוע וכפתור. תהליך יצירת הצורות הבאות דומה לזה של כפות הרגליים. להלן המידות המשמשות לגלילים השונים:
מגש: קוטר = 7; h = 0,5 דיסק: קוטר = 6.75; h = 0,25 כפתור: diam = 1.5; h = 0,25 בסיס ציר זרוע: קוטר = 2.25; h = 0,25 ציר זרוע: קוטר = 1.375; h = 1
כדי לחדד את דפנות הגלילים, תוכלו להגדיל את מספר הפרצופים בכל אחד מהם, באמצעות שדה הצדדים בחלונית המאפיינים. אל תוסיף יותר מדי צדדים מכיוון שהדבר יכול להשפיע לרעה על הביצועים הגלובליים של העורך ועל האנימציה הסופית. במקרה זה, הייתי ממליץ לך לא להשתמש ביותר מ -32 צדדים לפלטה ולדיסק. כדאי שיהיה לך משהו כזה.
הזרוע והראש
לזרוע וראש הפטיפון, אנחנו הולכים להשתמש בקובואידים. עבור הזרוע, צור קובואיד (w = 0.25; h = 0.25; d = 4), ואז החל סיבוב של -33° על ציר y. לראש, צור קובואיד (w = 0.5; h = 0.5; d = 1), ואז החל סיבוב של -33° על ציר y. יישר את שתי הצורות עם גליל ציר הזרוע. התוצאה צריכה להיראות ככה.
צבעים ומרקמים
כמעט סיימנו עם הפטיפון. השלב האחרון הוא להקצות צבעים ולהחיל מרקם על הוויניל (תמונה המייצגת את פני התקליט). להקצאת צבעים, בחר צורה ולחץ על צבעים שדה בחלונית המאפיינים. Tridiv מאפשר לך לציין צבעים בודדים עבור כל פנים של צורה, אך, בדוגמה זו, עלינו להשתמש בשדה all כדי לשנות את צבע כל הפנים. לשם כך פשוט הזן קוד צבע משושה בשדה ואז אשר בלחיצה להיכנס.
להלן הצבעים המשמשים בדוגמה זו:
בסיס: # 0099FF רגליים, כפתור, ציר, זרוע וראש: # F2EEE5 דיסק: # fa7f7a
למרקם הוויניל, התהליך דומה להקצאת צבעים. בחר את גליל הדיסק ולחץ על תמונות שדה בחלונית המאפיינים. הדבק את כתובת האתר של התמונה שברצונך להחיל על הוויניל בשדה העליון ואשר בלחיצה להיכנס. אתה יכול להשתמש בתמונה משלך, או להוריד את התמונה המשמשת בדוגמה זו.
עכשיו צריך שיהיה לך משהו שנראה ככה.
טיוח וייצוא
כעת, לאחר שהפטיפון נעשה, אנו נעבוד על דרך ביצועו לפני ייצואו. לחץ על תצוגה מקדימה כפתור בחלק העליון של חלונית המאפיינים. הגדר את ערך הזום ל 200 כדי להציג את הפטיפון גדול יותר. כדי להסיר את הגבולות השחורים של הצורות, עבור אל גבולות קטע של החלונית והגדר את האטימות ל- 0. התוצאה אמורה להיראות ככה.
אנו רוצים שהפטיפון יהיה מואר מלמעלה. לשם כך, סובב את הסצנה בצורה כזו שפסגת הפטיפון פונה אליך. הבסיס צריך להראות מלבני לחלוטין. שינוי ערכי האור והחושך בקטע tridiv.com/d/4k6 בחלונית המאפיינים יחדש את הצללים בסצנה. שנה את ערך האור ל 0.
הפטיפון מוכן כעת לייצוא!
גימור הלוגו
אנו מוכנים להוסיף את הטקסט ללוגו וליצור את אנימציית הלוגו. לחץ על לַעֲרוֹך על כפתור CodePen בפינה השמאלית התחתונה של תצוגה מקדימה תצוגה לייצוא הקוד ל- CodePen. חשוב לציין שקוד ה- CSS שנוצר על ידי Tridiv אינו משתמש בקידומות ספק, ולכן יהיה עליכם להשתמש בכלים כמו prefixr.com או leaverou.github.io/prefixfree על מנת להפוך את הקוד לתפקודי בכל דפדפן. התחל על ידי סגירת חלונית JavaScript מכיוון שאנחנו לא הולכים להשתמש בה. בחלונית HTML, הסר את תג הסגנון שהוחל על ה- .סְצֵינָה div.
הרחב את חלונית CSS והוסף בסוף את הקוד הבא:
.scene {transform: translateY (-140px) rotateX (-55deg); }
הנה ה תרגם Y (-140 פיקסלים) מזיז את הפטיפון 140 פיקסלים כלפי מעלה ומשאיר מקום לטקסט שמתחתיו. אז ה rotateX (-55deg) קובע את הנטייה האנכית של הפטיפון.
כדי להוסיף את הטקסט, עליך להוסיף א .כותרת div לאחר הפתיחה #tridiv div בחלונית HTML. בפנים, הוסף שניים משתרע> (כותרת ראשית וכותרת משנה), מופרדים על ידי hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div> ...
לאחר מכן עליך להחיל את הגופנים והסגנונות הנכונים. בחלונית CSS, ייבא את הגופן Open Sans המשמש בלוגו והוסף את הסגנונות הבסיסיים עבור רכיבי הטקסט.
url @ import (http://fonts.googleapis.com/css?family=Open+Sans:300); / * מרכז בלוק טקסט + סגנונות גופן בסיסיים * / כותרת {מיקום: מוחלט; עליון: 50%; עזבו: 50%; שוליים: 0 0 0 -165 פיקסלים; רוחב: 330 פיקסלים; גובה: 5em; font-family: 'Open Sans', sans-serif; משקל גופן: 300; גודל גופן: 24 פיקסלים; יישור טקסט: מרכז; ריווח אותיות: 1.5em; צבע: # 0099FF; } כותרת hr {border: 1px solid # fa7f7a; שוליים: .75em 0; } טווח כותרות {display: block; }. main-title {font-size: 2.15em; }. כותרת משנה {טקסט כניסה: .25em; }
וואלה! הלוגו שלך שלם. זה צריך להיראות כמו התמונה למטה. לאחר סיום המודל התלת-ממדי שלך, תוכל להשתמש בכוחו של CSS כדי להפוך אותו לשיפור עוד יותר על ידי הוספת סגנונות, אנימציות או אירועי עכבר: פשוט התייחס למודל התלת-ממדי כמו לכל רכיב HTML אחר.
הנפיש את הלוגו
ראה אנימציה באמצעות הלוגו כאן. כאשר החלקים של הפטיפון 'נופלים' פנימה, כל אחד מהם חולק את אותה הנפשת keyframe עם עיכובים שונים. התכונות העליונות מוגדרות לצורות 50%. כדי ליצור את האפקט הנופל, אנו מנפשים את התכונה העליונה מ- -400 פיקסלים ל 50%:
@ keyframes נופלים {0% {top: -400px; } / * אנו מתחילים את האנימציה במיקום הצורה לגובה של 400 פיקסלים * / 100% {למעלה: 50%; } / * ואז נסיים אותו במיקום המקורי * /}
תוכל להוסיף אנימציה זו לכל הצורות, באופן הבא:
. צורה {למעלה: -400 פיקסלים; אנימציה: סתיו 1 להקל על 0 קדימה; }
הגדר את התכונה העליונה ל- -400 פיקסלים והוסף עיכוב:
. מגש {עיכוב אנימציה: 1.05 שניות; }. דיסק {עיכוב אנימציה: 1.35 שניות; }. כפתור {עיכוב אנימציה: 1.5 שניות; } ...
צור את אפקט ה'הקפצה 'הסופי באמצעות rotateX תְכוּנָה:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
כך יצרנו את הגרסה המסוימת הזו, אבל זכרו: אין גבולות!
מילים: ג'וליאן גרנייה
מאמר זה הופיע במקור בגיליון 248 של כתב העת נטו.
