I want to build a scrolling ticker on the bottom of the screen that scrolls right to left.

What is the best way to approach this? I'm using reactjs, and I read that react doesn't play well with jQuery, and most of the examples I've found, use jQuery.

I want to build a scrolling ticker on the bottom of the screen that scrolls right to left.

What is the best way to approach this? I'm using reactjs, and I read that react doesn't play well with jQuery, and most of the examples I've found, use jQuery.

• javascript
• html
• css
• reactjs

• Have you tried anything? – Kyeotic Commented Dec 7, 2015 at 23:24
• I've tried googling around, but I can't seem to find anything that's not heavily using jquery – clarity Commented Dec 7, 2015 at 23:25
• Would a CSS solution work? – Kyeotic Commented Dec 7, 2015 at 23:32
• If there is a pure css solution, I'd be happy to use it! – clarity Commented Dec 7, 2015 at 23:36

3 Answers 3

You can create a side-scrolling effect purely with css. Here is a demo fiddle.

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Based on

Tyrsius

solution, I have modified a little bit the keyframe animation, so now it will stop for a while in the middle of the way, so user can read the content in a confortable way:

 @keyframes marquee {
0%   { transform: translate(0,0);
       font-style:italic;
       opacity:0;}
5%   { opacity:0;}
14%  { opacity:0.8;}
15%  { transform: translate(-46%, 0);
       opacity:1;
       font-style:normal;}
85%  { transform: translate(-54%, 0);
       opacity:1;
       font-style:normal;}
86%  { opacity:0.8;}
96%  { opacity:0;}  
100% { transform: translate(-100%, 0);
       opacity:0;}}

Check out the react-scroll directive:

https://www.npmjs./package/react-scroll