תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

טקסט ותמונה נגללים באמצעות התגית 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

 

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

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

 

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך אומרים בעברית אינטרנט?

 

תמונת המגיב

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

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

תמונת המגיב

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

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

תמונת המגיב

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

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

תמונת המגיב

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

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

תמונת המגיב

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

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

תמונת המגיב

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

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