הוסף אנימציות ממשק משתמש לאתר שלך

תוֹכֶן

• בנה את הניווט
• צור והנפיש לחצנים בעומס
• מעבר צבע רקע ואלמנט

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

• גלה את הגבול החדש של אנימציית CSS

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

נשתמש בשילוב של CSS ו- GreenSock (GSAP). כולנו מודעים ל- CSS אך יתכן וחלקכם לא מודעים לפלטפורמת GreenSock. GreenSock היא מסגרת JavaScript המאפשרת ליצור בקלות אנימציות מדהימות עם אלמנטים HTML תוך שימוש בכמה שורות קוד.

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

בנה את הניווט

קודם כל, ניצור קובץ index.html חדש ונקבע את אזור הניווט שלנו יחד עם שישה קישורים. כל קישור יורכב מאייקון שנלקח מ- Ionicons. נצטרך להקצות כיתה לכל אחד.

div class = “סרגל ניווט”> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> a href = "#"> / a> / div>

לא נסקור את מסמך ה- HTML או CSS המלא בפירוט, אך תוכל לקבל את רישום הקוד המלא מ- GitHub.

בשלב הבא נצטרך ליצור קובץ CSS שנקרא style.css ואז להכניס את שורת הקוד הבאה לייבוא ​​יונים:

כתובת url @ (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

כעת נקבע את הכיתה נאבלוגו לתמונות הניווט שלנו בגליון הסגנונות. כאן נקבע את המיקום, הגובה, גודל הגופן וכו '.

.navlogo {עמדה: קרוב משפחה; גודל גופן: 40 פיקסלים; רוחב: 75 פיקסלים; שוליים: 40 פיקסלים; גובה: 75 פיקסלים; קו גובה: 75 פיקסלים; תצוגה: בלוק מוטבע; צבע: #fff; } .navlogo: אחרי {position: מוחלט; למעלה: 0; תחתון: 0; משמאל: 0; מימין: 0; גבול: 2px מוצק # e6e6e6; תוכן: ''; אינדקס z: -1; גבול-רדיוס: 50%; }

לאחר מכן, עלינו להגדיר את האנימציה עבור שלנו .navlogo אֵלֵמֶנט. כאן ניצור את האפקטים של הסיבוב והמעבר, כמו כן נשנה את צבע האלמנט ברחף.

.navlogo: לפני, .navlogo: אחרי {-webkit-transit: כל 0.45s קלות-ב-אאוט; מעבר: כל 0.45s קלות-ב-אאוט; } .navlogo: רחף, .navlogo: פעיל, .navlogo.hover {color: # c0392b; } .navlogo: רחף: אחרי, .navlogo: פעיל: אחרי, .navlogo.hover: אחרי {גבול-צבע: שקוף # c0392b; -webkit-transform: סובב (360deg); להפוך: לסובב (360 מעלות); }

לבסוף, נצטרך להוסיף אירוע שיסיר את מחלקת הרחף כאשר העכבר כבר לא מרחף מעל הלוגואים שלנו. זאת בכדי לוודא שהלוגו שלנו יוצא מהאנימציה שלו. צור קובץ JavaScript חדש בשם main.js והזן את הקוד הבא:

$ (". רחף"). Mouseleave (פונקציה () {$ (זה) .removeClass ("רחף");});

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

צור והנפיש לחצנים בעומס

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

ראשית, נצטרך לפתוח מחדש את קובץ index.html וליצור את קטע הכפתורים שלנו באמצעות הקוד שלהלן:

div id = “buttonarea”> כפתור> שינוי צבע רקע / כפתור> כפתור> אפשרות 1 / כפתור> כפתור> אפשרות 2 / כפתור> כפתור> אפשרות 3 / כפתור> / div>

לאחר מכן עלינו להגדיר הפניה לספריית GreenSock בתוך החלק> head.

script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"> / script>

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

TweenMax.staggerFrom ('. Anibutton', 1, {opacity: 0}, 1);

מעבר צבע רקע ואלמנט

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

ודא שיש לך צבע רקע ומוגדרים צבע גבול וטקסט לדף שלך בקובץ style.css.

.anibutton {גבול: 2px מוצק # 000; צבע: # 000; }

לאחר מכן, ניצור פונקציית JavaScript להגדרת מעברי הצבע השונים של GreenSock.

function changeBackground () {TweenMax.to ("body", 3, {backgroundImage: "linear-gradient (to left, # 646580, # 212121)"}); TweenMax.to (". anibutton", 3, {color: "#fff"}); TweenMax.to (". Anibutton", 3, {border: "2px solid #fff"});}

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

לבסוף, נצטרך להתקשר ל- שנה רקע() פונקציה מאחד הלחצנים שלנו שנמצא בקובץ index.html.

כפתור onclick = "changeBackground ()"> שנה רקע / כפתור>

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

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