Hi I want to make a bar which scrolls the text like this one in the news. I have a text which is too long for its maximal width and its overflow property is set to overflow-x: auto; so it's cutted. But I'm looking for such a bar which automatically scrolls my text (to the right) and when he finish, scrolls back in other direction (left). This is my text in css:

#text {
  display: block;
  color: white;
  position: absolute;
  width: 50%;
  left: 0%;
  text-align: center;
  font-size: 8vw;
  margin-top: 8.5%;
  font-variant: small-caps;
  text-shadow: 0 0 20px #000;
  text-align: center;
  z-index: 2;
  overflow-x: auto;
  white-space: nowrap;
  line-height: 100%;
}

Any ideas? Actually answer can be in css, js or jquery. It doesn't matter.

Hi I want to make a bar which scrolls the text like this one in the news. I have a text which is too long for its maximal width and its overflow property is set to overflow-x: auto; so it's cutted. But I'm looking for such a bar which automatically scrolls my text (to the right) and when he finish, scrolls back in other direction (left). This is my text in css:

#text {
  display: block;
  color: white;
  position: absolute;
  width: 50%;
  left: 0%;
  text-align: center;
  font-size: 8vw;
  margin-top: 8.5%;
  font-variant: small-caps;
  text-shadow: 0 0 20px #000;
  text-align: center;
  z-index: 2;
  overflow-x: auto;
  white-space: nowrap;
  line-height: 100%;
}

Any ideas? Actually answer can be in css, js or jquery. It doesn't matter.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jan 31, 2017 at 12:50 kupkolkupkol 23111 gold badge33 silver badges1313 bronze badges 5

• 3 Use <marquee> Your div block</marquee> – Nitin Dhomse Commented Jan 31, 2017 at 12:52
• You can use jQuery Marquee DEMO Example Source Code : remysharp./2008/09/10/the-silky-smooth-marquee Works in all browsers and very smooth. Works very well. – Muhammad Saqlain Commented Jan 31, 2017 at 12:54
• <marquee>!! Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes inpatibilités entre les implémentations et son portement peut être modifié dans le futur. – Zakaria Acharki Commented Jan 31, 2017 at 12:55
• Please don't use the <marquee>, it works but this is a bad habit (see the doc). Better D.I.Y. or use a Framework. – AymDev Commented Jan 31, 2017 at 12:56
• Possible duplicate of Seamless scrolling text – ssc-hrep3 Commented Jan 31, 2017 at 13:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

The <maerquee>tag is obsolete as you can see here: https://developer.mozilla/de/docs/Web/HTML/Element/marquee

You can use pure css, here is a fiddle:

.marquee {
    width: 450px;
    background-color: yellow;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
    text-transform: uppercase;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

<div class="marquee">
	<p>Lorem Ipsum</p>
</div>

Some of these CodePen examples may be useful to you or others:

http://codepen.io/search/pens?q=marquee&limit=all&type=type-pens

One I think may match most of what you are looking for is: http://codepen.io/jaredkc/pen/bmAph It uses very simple jQuery to achieve the scrolling and on-hover pause

$('.twitter-scroll').marquee({
  duration: 15000,
  pauseOnHover: true
});

The only exception is that it doesn't 'bounce back' when i hits the left side.

as mentioned before there is the native marquee element:

<marquee scrollamount="2" behavior="alternate" direction="right" width="350">TEXT TO SCROLL</marquee>

& there is the jQuery Marquee plugin that can be configured to run the text infinitely without a gap. [example: https://codepen.io/aamirafridi/pen/qgutw ]

$('.marquee').marquee({
    gap: 50,
    duplicated: true
});

you can also use any carousel plugin to make use of a list & not a one line string. something as this one