יצירת מתקדם Marquee עם CSS3 אנימציה

מאמר זה הוא חלק שלנו "HTML5 / CSS3 סדרת הדרכות" - ייעודי כדי לעזור לך לעשות מעצב טוב יותר ו / או מפתח. לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה.

היום אנחנו הולכים להעיף מבט “מארק” שוב פעם. אנחנו למעשה יש מכוסה על זה בפוסט הקודם שלנו, אשר דיבר על השימוש -webkit-marqueee רכוש, אבל הפעם אנחנו ניקח את הנושא קצת יותר.

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

אם אינך מכיר את מודול CSS3 Animation, מומלץ לעיין בהפניות הבאות לפני שתמשיך בתיעוד זה:

• CSS3 אנימציות - W3School
• אנימציות CSS - Mozilla Dev. רשת

כמו כן, שים לב כי כרגע, CSS3 הנפשה יכולה לעבוד רק ב- Firefox 8+, Chrome 12+ ו- Safari 5.0+ עם הגרסה המקודמת (-moz- ו -WebKit-). עם זאת, אנו נשתמש רק בגרסה הרשמית מ- W3C ללא הקידומת, כדי למנוע הצטברות של מאמר זה עם קודים מיותרים.

טיפול בגיליון מארקי

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

לוח התכנון (סוג של)

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

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

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

סימון ה- HTML

מאז האנימציה שלנו תהיה פשוטה, סימון ה- HTML יהיה גם פשוט כמו:

 
 
כיצד להוסיף וורדפרס הודעות קשורות ללא Plugins
 
אוטומציה קבצי Dropbox שלך עם פעולות
 
 

סגנונות בסיסיים

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

 html background: url ('... /images/skewed_print.png'); 

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

 .מרקי רוחב: 500px; גובה: 50px; שוליים: 25px אוטומטי; overflow: hidden; מקומות קרובים border: 1px solid # 000; שוליים: 25px אוטומטי; צבע רקע: # 222; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: Inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: Inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); 

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

 .מרקי p position: מוחלט; משפחת גופן: Tahoma, Arial, sans-serif; רוחב: 100%; גובה: 100%; שוליים: 0; line-height: 50px; text-align: center; צבע: #fff; text-shadow: 1px 1px 0px # 000000; מסנן: dropshadow (color = # 000000, offx = 1, offy = 1); 

בואו נסתכל על התוצאה במשך זמן מה.

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

האנימציה

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

• כאשר האובייקט מתחיל לנוע?
• כמה זמן לוקח לאובייקט לעבור מנקודה לנקודה?
• מתי וכמה זמן יישאר האובייקט בנקודה נתונה?

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

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

 .מארק p transform: translateX (100%); 

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

מסגרות

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

לחץ כאן כדי לראות את הגרסה גדולה יותר.

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

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

והנה כל קודי keyframe שאנחנו צריכים להחיל להפעיל את האנימציה.

 @keyframes שמאלה-אחת 0% transform: translateX (100%);  10% transform: translateX (0);  40% transform: translateX (0);  50% transform: translateX (-100%);  100% transform: translateX (-100%);  @keyframes שמאלה-שתיים 0% transform: translateX (100%);  50% transform: translateX (100%);  60% transform: translateX (0);  90% transform: translateX (0);  100% transform: translateX (-100%); 

ה השמאלי keyframes יגדיר את הרצף הראשון של האנימציה, בעוד משמאל keyframes יגדיר את הרצף השני.

החלת אנימציה על אלמנטים

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

 .אוהל p: nth-child (1) אנימציה: שמאל אחד 20s קל אינסופי;  .התעמלות p: nth-child (2) הנפשה: שמאל-שני ה -20 נוח לאינסוף; 

כולנו נעשה עם האנימציה שלנו; בוא נראה את התוצאות בדפדפן.

• הדגמה
• הורד מקור

בונוס

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

 .מארק p transform: translateY (-100%);  @keyframes down-one 0% transform: translateY (-100%);  10% transform: translateY (0);  40% transform: translateY (0);  50% transform: translateY (100%);  100% transform: translateY (100%);  @keyframes למטה שני 0% transform: translateY (-100%);  50% transform: translateY (-100%);  60% transform: translateY (0);  90% transform: translateY (0);  100% transform: translateY (100%); 

שימו לב כי שינינו את X- ציר ל Y- ציר ולהפוך את כל תרגום ערך שלילי לחיובי ולהיפך.

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

 .אוהל p: nth-child (1) אנימציה: למטה-אחד 20s קל אינסופי;  .התעמלות p: nth-child (2) הנפשה: למטה-שני ה -20 נוח לאינסוף; 

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

 .marquee.up p transform: translateY (100%); . mqueeee.up p: nth-child (1) הנפשה: למעלה מ -20 s בקלות אינסופית; . mqueeee.up p: nth-child (2) הנפשה: למעלה מ -20 s בקלות אינסופית;  @keyframes למעלה 0% transform: translateY (100%);  10% transform: translateY (0);  40% transform: translateY (0);  50% transform: translateY (-100%);  100% transform: translateY (-100%);  @keyframes עד שני 0% transform: translateY (100%);  50% transform: translateY (100%);  60% transform: translateY (0);  90% transform: translateY (0);  100% transform: translateY (-100%); 

• הדגמה
• הורד מקור

סיכום

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

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