צור אפקט טקסט תלת ממדי מונפש

תוֹכֶן

• 01. יזם את מסמך ה- HTML
• 02. תוכן HTML גלוי
• 03. ייזום CSS
• 04. מיכל אנימציה
• 05. ייזום אנימציה
• 06. הנפשה למבט
• 07. סיום האנימציה

Love Lost by Jam3 של קנדה הוא שיר אינטראקטיבי כהה להפליא, מוכן לנייד עם לב אמיתי על הרגשות המתמשכים סביב אהבה אבודה. פריסת האתר נבנתה באמצעות HTML5 כשספריית GSAP מפעילה את האנימציה שלה, אחד המאפיינים הבולטים ביותר מבחינה ויזואלית הוא הטקסט התלת-ממדי המונפש שלה שבאמת מביא לחיים את השירה של Love Lost.

• הפוך אפקטים אינטראקטיביים של טיפוגרפיה תלת ממדית

זה נראה מרשים כמו לעזאזל, ולא קשה לשלב בעבודה שלך כדי ליצור חווית משתמש מרתקת; הנה איך זה נעשה.

רוצה ליצור אתר מרתק משלך? נסה כלי לבניית אתרים, והפעל את הדברים בצורה חלקה על ידי בחירת שירות אירוח אתרים הנכון.

01. יזם את מסמך ה- HTML

השלב הראשון הוא הגדרת מבנה מסמך ה- HTML. זה כולל את מיכל ה- HTML היוזם את המסמך, המכיל את קטעי הראש והגוף. בעוד שקטע הראש משמש בעיקר לטעינת קובץ ה- CSS החיצוני, החלק בגוף יאחסן את תוכן העמוד הגלוי שנוצר בשלב 2.

! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 HERE / body> / html>

02. תוכן HTML גלוי

תוכן ה- HTML הגלוי מורכב ממיכל מאמרים המכיל את הטקסט הגלוי. החלק החשוב במיכל המאמרים הוא המאפיין 'נתונים-אנימציה', אליו יופנה על ידי ה- CSS ליישום האפקטים הוויזואליים. הטקסט שבתוך המאמר עשוי מתג h1 כדי לציין שהתוכן הוא הכותרת הראשית של הדף.

מאמר data-animate = "לעבור"> h1> שלום לך! / h1> / מאמר>

03. ייזום CSS

צור קובץ חדש בשם 'styles.css'. מערך ההוראות הראשון מגדיר את מיכל ה- HTML והגוף של הדף שיהיה להם רקע שחור, כמו גם ללא מרווח גבולות גלוי. הלבן מוגדר גם כצבע הטקסט המוגדר כברירת מחדל עבור כל רכיבי הצאצא בדף שירשו; הימנעות מהצבע השחור המוגדר כברירת מחדל של יצירת טקסט נראה בלתי נראה.

html, body {רקע: # 000; ריפוד: 0; שוליים: 0; צבע: #fff; }

04. מיכל אנימציה

מיכל התוכן שהוזכר בתכונה 'נתונים-אנימציה' הוחל על סגנונות ספציפיים. גודלו מוגדר כך שיתאים לגודל המלא של המסך באמצעות יחידות מדידה פולקסווגן ו- vh, כמו גם להיות מסובב מעט. מוחלת אנימציה הנקראת 'moveIn' שתמשך למשך 20 שניות ותחזור על עצמה לאין שיעור.

[data-animate = "מעבר לגור"] {position: relative; רוחב: 100 וולט; גובה: 100vh; אטימות: 1; אנימציה: moveIn 20s אינסופי; יישור טקסט: מרכז; להפוך: לסובב (20deg); }

05. ייזום אנימציה

אנימציית ה- 'moveIn' שהופנה בשלב הקודם דורשת הגדרה באמצעות @ keyframes. המסגרת הראשונה שמתחילה ב -0% מהאנימציה מגדירה את גודל הגופן המוגדר כברירת מחדל, את מיקום הטקסט ואת הצל הגלוי. בנוסף, הפריט מוגדר עם אטימות אפסית כך שהוא נראה לעין - כלומר. מוצג מחוץ לעין.

@ keyframes moveIn {0% {font-size: 1em; משמאל: 0; אטימות: 0; טקסט-צל: אין; } * * * שלב 6 כאן}

06. הנפשה למבט

המסגרת הבאה ממוקמת ב -10% דרך האנימציה. מסגרת זו מגדירה את האטימות לגלויה לחלוטין, וכתוצאה מכך הטקסט מונפח בהדרגה לתצוגה.בנוסף, מספר צללים מתווספים עם ערכי צבע כחולים וירידות כדי לתת אשליות של עומק תלת ממדי לטקסט.

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 היצירתי לעיצוב אתרים. קנה את גיליון 273 כאן אוֹ הירשם ל- Web Designer כאן.