הוסף אפקט תקלה לאתר שלך

תוֹכֶן

• 01. הוסף קוד לתגית העמוד שלך
• 02. סטיילינג התצוגה
• 03. הצגת התקלה
• 04. החזק הכל
• 05. הפעלת התקלה
• 06. חזרה לנורמליות
• השג את הכרטיס שלך לגנרט ניו יורק עכשיו

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

• אנימציה באינטרנט: אין צורך בקוד

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

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

הורד את הקבצים להדרכה זו.

01. הוסף קוד לתגית העמוד שלך

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

div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>

02. סטיילינג התצוגה

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

גוף {רקע: # 000; font-family: 'Work Sans', sans-serif; צבע: #fff; } #holder {font-size: 6em; רוחב: 500 פיקסלים; גובה: 300 פיקסלים; שוליים: 0 אוטומטי; מיקום: קרוב משפחה; }

03. הצגת התקלה

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

# glitch {עמדה: מוחלט; למעלה: 0; משמאל: 0; אינדקס z: 10; רוחב: 100%; גובה: 100%; רקע: url (glitch.gif); אטימות: 0; }

04. החזק הכל

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

var gl = document.getElementById ("תקלה"); var over = false;

05. הפעלת התקלה

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

תקלת פונקציה () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}

06. חזרה לנורמליות

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

פונקציה רגילה () {gl.style.opacity = "0"; }

השג את הכרטיס שלך לגנרט ניו יורק עכשיו

אירוע לעיצוב אתרים בן שלושה ימים Generate New York חוזר. המתרחש בין התאריכים 25-27 באפריל 2018, הדוברים הראשיים כוללים את קניון דן של SuperFriendly, יועץ האנימציה לאינטרנט וואל הד, מפתח JavaScript מלא מחסנית ווס בוס ועוד. יש גם יום שלם של סדנאות והזדמנויות רשת חשובות - אל תפספסו את זה. השג את כרטיס ה- Generate שלך ​​עכשיו.

מאמר זה פורסם במקור בגיליון 270 של כתב העת יצירתי עיצוב אתרים. קנה את גיליון 270 כאן אוֹ הירשם ל- Web Designer כאן.