טקסט ותמונה נגללים באמצעות התגית marquee

התגית <marquee> מאפשרת יצירת אפקט טקסט נגלל או תמונות נגללות כמו בדוגמה:

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

<marquee>
  <p>...<b>marquee</b> טקסט ותמונות נגללות באמצעות תגית ההטמ"ל</p>
</marquee>

אם אתם רוצים להריץ תמונה, אתם יכולים להחליף את ההטמ"ל בין תגיות ה-marquee בתגית img. לדוגמה:

אתם יכולים להשתמש בקוד HTML שדומה לקוד הבא:

<marquee>
  <img src='images/marquee.png' >
</marquee>

שינוי אפשרויות האפקט באמצעות ה-HTML

שינוי ההתנהגות של marquee באמצעות behavior

אם רוצים לשנות ממצב של גלילה למצב של שהאלמנט מחליק פעם אחת ונעצר או למצב שאלמנט נע בלי להיעלם אפשר להשתמש בתכונה behavior , בתוך תגית ההטמ"ל. נראה את הדוגמאות הבאות. בדוגמה הראשונה behavior=slide :

<marquee behavior='slide'> <p>...<b>marquee</b> טקסט ותמונות נגללות באמצעות תגית ההטמ"ל</p> </marquee>

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

האפשרות של behavior=scroll משאירה את ההתנהגות הרגילה של החלקת האלמנט.

שינוי כיוון ה- marquee באמצעות direction

ניתן לשנות את כיוון התנועה של האלמנטים באמצעות direction. לדוגמה:

<marquee direction="right">

ובאותו אופן קיימת האפשרות של direction=left

עד כה ראינו גלילה של אלמנט באופן אופקי, אבל יש אפשרות לגלול את האלמנט באופן אנכי באמצעות direction=up
נראה את הדוגמה הבאה:

ובאופן דומה, direction=down גולל את האלמנט כלפי מטה.

שליטה במהירות marquee ובהשהיה

scrollamount שולט במהירות האפקט, ככל שהמספר (מספרים שלמים וחיוביים) גבוה יותר, כך האפקט מהיר יותר. לדוגמה:

< marquee scrollamount='2' >

לעומת:

< marquee scrollamount='200' >

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

< marquee scrolldelay='100' >

< marquee scrolldelay='1000' >

קביעת מספר הפעמים שהאלמנט רץ

loop קובע את מספר הפעמים שהאלמנט רץ ואז מפסיק. ברירת המחדל שה-marquee ירוץ אינסוף פעמים, ואם משתמשים ב-behavior=slide, אז ברירת המחדל שירוץ פעם אחת ואז ייעצר. אבל אפשר לשנות את ההתנהגות ברירת המחדל, אם מגדירים את מספר הלופים. לדוגמה: loop= 6 .

תכונות CSS3 של marquee

ל-CSS3 נוספו תכונות שמאפשרות סגנון של התגית marquee. התכונות הן: marquee-direction ,marquee-style, ו- marquee-speed. התכונות נתמכות כרגע (ספטמבר 2012) בדפדפני Safari ו-Chrome.

אנחנו יכולים לשלוט בסגנון תנועת האלמנטים בדף (בדומה ל-behavior) באמצעות התכונה marquee-direction. האפשרויות הן:

-webkit-marquee-style: scroll;
-webkit-marquee-style: slide; 
-webkit-marquee-style: alternate; 

marquee-speed קובע כמה מהר התוכן נגלל. האפשרויות הן:

-webkit-marquee-speed: slow;
-webkit-marquee-speed: normal;
-webkit-marquee-speed: fast;

צריך לשים לב שכשמריצים את הקוד בדפדפנים התומכים (safari ו-chrome), ההתנהגות ברירת המחדל כשמשתמשים ב-CSS לקבוע את התנהגות האפקט, היא של גלילה אנכית (מלמעלה - למטה או הפוך), וכדי להפוך את ההתנהגות הזו לגלילה אופקית משתמשים בשורה הבאה:

-webkit-marquee-direction: forward;

לסיכום חלק ה-CSS, הקוד הבא גורם לגלילה אופקית במהירות אטית בדפדפנים תומכים בלבד:

<style>
marquee {
  -webkit-marquee-style: scroll;
  -webkit-marquee-direction: forward;
  -webkit-marquee-speed: slow;
}
</style>

לסיכום

תגית ה-marquee נתמכת בכל הדפדפנים המודרניים (Chrome, Safari, Firefox ואפילו IE9), ומספקת פונקציונליות מועילה לאתר ללא צורך ב-JavaScript. עם זאת, בגלל שהשימוש ב-CSS3 לסגנון ה-marquee מוגבל כרגע לדפדפני chrome ו-safari בלבד, ומאפשר פחות גמישות בשליטה באפקט מ-HTML, אני משתמש בפרויקטים שלי בעיקר בתכונות שמספק HTML.

לכל מדריכי ה-CSS

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים