הנפשה של ירידת שורות ב-CSS

[איש נחמד]

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

[chocolate]

https://codepen.io/Murtaxa/pen/egrRbN

[master]

@איש-נחמד
זה מתבצע באמצעות תגית HTML

<marquee behavior='slide'>
  <p>...<b>marquee</b>  דוגמא</p>
</marquee>

ניתן לשלוט בכיוון לדוגמא

<marquee direction="up">

[איש נחמד]

@master
זה עובד רק עד שהאובייקט (במקרה שלך: טקסט) מגיע למקום. אני צריך שזה יעבוד בלולאה כל הזמן.

@chocolate
אני צריך שזה ירוץ מלמעלה למטה.

[master]

@איש-נחמד
חשבתי שזה מה שאתה רוצה
אם אתה רוצה שזה ירוץ כל הזמן פשוט תוריד את

behavior='slide'

או לחלופין אפשר לקבוע כמה פעמים אתה רוצה שזה ירוץ באמצעות

loop= 8

[איש נחמד]

@master האם אפשר להגדיר את המהירות ?

[chocolate]

@איש-נחמד אמר בהנפשה של ירידת שורות ב-CSS:

@master האם אפשר להגדיר את המהירות ?

scrollamount="8"

[master]

@chocolate אמר בהנפשה של ירידת שורות ב-CSS:

@איש-נחמד אמר בהנפשה של ירידת שורות ב-CSS:

@master האם אפשר להגדיר את המהירות ?

scrollamount="8"

מספר יותר גבוה יותר מהר.

כמו כן אפשר להגדיר גם את זמן ההמתנה בין המופעים

< marquee scrolldelay='150' >

מספר יותר גבוה זמן המתנה יותר גבוה (במילי שניות)

[איש נחמד]

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

[master]

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

[interes]

נכון ומתאים יותר לעשות את זה באמצעות אנימציה של CSS, כמו כאן: https://codepen.io/shawnk/pen/yGvxB
marquee הוצא משימוש בhtml5

[איש נחמד]

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

[interes]

@איש-נחמד אז יש את הספריה animate.css
פשוט להטמיע בפרויקט, ולהוסיף class לdiv הרצוי (במקרה שלך כנראה animated slideInRight)

[איש נחמד]

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

overflow-y:hidden;