נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

מחבר:
בתאריך:

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

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

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

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

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

תמונה שרצה על המסך באמצעות marquee

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

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

 

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

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

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

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

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

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

 

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

 

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

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

<marquee direction="right">

 

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

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

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

 

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

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

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

 

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

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

< marquee scrollamount='2' >

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

לעומת:

< marquee scrollamount='200' >

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

 

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

< marquee scrolldelay='100' >

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

< marquee scrolldelay='1000' >

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

 

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

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

הוסף תגובה חדשה

 

= 7 + 9

תמונת המגיב

אריאל בתאריך: 15.09.2013

איך קובעים מתי הטקסט\התמונה יחזרו לאיפה שהם התחילו?

תמונת המגיב

יוסי בן הרוש בתאריך: 16.09.2013

האפשרויות שמציע marquee, מתמצות במה שכתוב פה.
אם אתה רוצה משהו מתוחכם יותר, תוכל להיעזר ב-
javascript.

תמונת המגיב

יוגב בתאריך: 31.12.2013

תשמע כל הכבוד!

תמונת המגיב

אופק בתאריך: 01.02.2015

אל תשתמשו בתגית הזאת יותר! הוציאו אותה מהתקן של התגיות......

תמונת המגיב

יוסי בן הרוש בתאריך: 18.02.2015

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

תמונת המגיב

שבת היום בתאריך: 02.11.2015

איך משנים את הכיוון לאלכסון?