2

Hi I want to make a bar which scrolls the text like this one in the news. photo 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.

Community
  • 1
  • 1
kupkol
  • 221
  • 1
  • 3
  • 13
  • 3
    Use Your div block – Nitin Dhomse Jan 31 '17 at 12:52
  • ``!! _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 incompatibilités entre les implémentations et son comportement peut être modifié dans le futur._ – Zakaria Acharki Jan 31 '17 at 12:55
  • Please don't use the ``, it works but this is a bad habit ([see the doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee)). Better D.I.Y. or use a Framework. – AymDev Jan 31 '17 at 12:56
  • Possible duplicate of [Seamless scrolling text](http://stackoverflow.com/questions/33207215/seamless-scrolling-text) – ssc-hrep3 Jan 31 '17 at 13:00
  • You can use jQuery Marquee [DEMO](http://download.remysharp.com/marquee.html) Example Source Code : https://remysharp.com/2008/09/10/the-silky-smooth-marquee/ Works in all browsers and very smooth. Works very well. – Muhammad Saqlain Jan 31 '17 at 12:54

3 Answers3

6

The <maerquee>tag is obsolete as you can see here: https://developer.mozilla.org/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>
Sebastian
  • 951
  • 6
  • 21
0

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.

Jimmyb_1991
  • 346
  • 5
  • 12
0

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

AceDesigns
  • 26
  • 5