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

את הקוד הבא תכניסו לקובץ הפונקציות

var width, containerwidth, left, way = 0;

$(document).ready(function(e){

  width = $('.ticker-text').width();
  containerwidth = $('.ticker-container').width();
  left = containerwidth;

  tick();
});

function tick() {
  
  if (way) {    
    if (--left < -width){
      left = containerwidth;
    }
  } else {
    if (++left > containerwidth){
      left = -width;
     }
  }

  $(".ticker-text").css("margin-left", left + "px");
  setTimeout(tick, 8);
}

function toggle () {
  way = (way+1)%2;
}Code language: JavaScript (javascript)

את החלק הבא תכניסו לקובץ CSS כללי באתר.

body{
  margin: 0 auto;
}
.ticker-container {
  background: tomato;
    width: 100%;
    overflow: hidden;
  margin: 0 auto;
}
.ticker-text {
    height: 150%;
  color: #fafafa;
  white-space:nowrap;
  display:inline-block;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}Code language: CSS (css)

ואת החלק האחרון בקוד מותאם של אלמנטור לתחילת המסמך. איפה שכתוב <h3>Hello! Welcome to my website.</h3> את הטקסט שם תחליפו למה שאתם רוצים

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class = "ticker-container">
    <div class = "ticker-text">
    <h3>Hello! Welcome to my website.</h3>
    </div>
</div>
<button onclick="toggle();">Change direction</button>Code language: HTML, XML (xml)

ראו קישור לפרטים נוספים