תוֹכֶן
- 01. אפקט טקסט של גלגול
- 02. צור CSS
- 03. מקם את המילה
- 04. מעלה ומעלה
- 05. מרחף למטה
- 06. אוטומטי לעם
- 07. הוסף שיעורים מתחלפים
קישורי גלגול הם דרך נהדרת למשוך את תשומת ליבו של המשתמש, במיוחד אם הם עושים משהו חריג או מקורי. לילד האמצעי יש השפעה רבה, שרואים לעתים רחוקות במקומות אחרים, שלוכדת כל אות ומפצלת אותם באנימציה, שנכנסת פנימה כאשר המבקר מרחף מעל המילה. האנימציה עוזרת להעביר את אופיו השובב של מותג הכריכים.
במאמר זה אנו מראים לך כיצד ליצור מחדש את ההשפעה על האתר שלך. לקבלת השראה נוספת, עיין במדריך שלנו לדוגמאות האנימציה הטובות ביותר ב- CSS (עם הוראות כיצד לבצע קידוד). לקבלת משהו קצת אחר, נסה לבנות אתרים מובילים או לבחור את אחסון הענן הטוב ביותר. ואם אתה הופך את האתר שלך למורכב יותר, ודא שאירוח האתרים שלך נמצא במקום.
01. אפקט טקסט של גלגול
אחת מהאפקטים הטקסטיים הגדולים באתר Middle Child היא לאפקטים של גלגול בתפריט, שם האותיות מתפצלות על הטקסט ומסתובבות מעט. התחל זאת בכמה תגי HTML פשוטים.
div> div> ארוחת בוקר / div> / div>
02. צור CSS
השתמש בקובץ CSS או בתגי סגנון נפרדים כדי להוסיף את כללי CSS הבאים ולגרום לדף למלא את הגודל המלא של הדפדפן על ידי כך שהגוף והעטיפה לוקחים את הגובה המלא הזמין.
גוף {רוחב: 100%; גובה: 100%; שוליים: 0; ריפוד: 0; }. עוטף {תצוגה: רשת; גובה: 100%; }
03. מקם את המילה
ה מִלָה מחלקה מרכזת את המילה ברשת. כל טקסט שמקבל את מִלָה בכיתה יכול להחיל את זה. ה לְמַעלָה הכיתה תוחל על כל אות אחרת ואלה ינועו כלפי מעלה.
.word {font-size: 3em; שוליים: אוטומטי אוטומטי; } .word .up {display: inline-block; להפוך: translate3d (0px, 0px, 0px) לסובב (0deg); מעבר: כל 0.5s קלות-ב-אאוט; }
04. מעלה ומעלה
עכשיו ה מטה מחלקה חולקת הגדרות דומות מאוד ל- לְמַעלָה אבל הרחף מראה את התנועה כלפי מעלה עבור לְמַעלָה להתגלגל. כלפי מעלה מסובב מעט גם כדי לשפר את המראה.
.word .down {display: inline-block; להפוך: translate3d (0px, 0px, 0px) לסובב (0deg); מעבר: כל 0.5s קלות-ב-אאוט; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); צבע: # 058b05}
05. מרחף למטה
כאשר המשתמש מרחף מעל הטקסט, המחלקה למטה מזיזה את הטקסט כלפי מטה. בהמשך JavaScript הטקסט יתחלק לטווחים נפרדים כאשר הכיתות יתווספו אוטומטית לטווחים חלופיים.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); צבע: # 058b05; }
06. אוטומטי לעם
זה קצת טרחה שצריך להכניס כל אות לטווחים מתחלפים עם מחלקות שונות, ולכן נבצע אוטומציה של התהליך על ידי כך ש- JavaScript ישאיל את הבורר וניקח כל אות. הנה ה str משתנה תופס את האות הנוכחית כשהוא עובר דרך הטקסט.
סקריפט> var elements = document.querySelectorAll (’.word’); עבור (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; אלמנטים [i] .innerHTML = ’’;
07. הוסף שיעורים מתחלפים
כעת לולאה אחרת ממקמת כל אות באלמנט הטווח שלה ומוסיפה את ה- לְמַעלָה אוֹ מטה כיתה לטווחים. אם תסתכל על זה בדפדפן תראה את הטקסט מפוצל בכל אות למעלה ולמטה, תוך סיבוב קל.
תוכלו לראות את ההשפעה בפעולה באתר Middle Child.
עבור (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); אלמנטים [i] .appendChild (spn); spn.textContent = str [j]; תן pos = (j% 2)? 'למעלה למטה'; spn.classList.add (pos); }} / סקריפט>
מאמר זה פורסם במקור במגזין יצירתי לעיצוב אתרים מעצב אינטרנט.קנה גליון 286 אוֹ הירשם כמנוי.
