Scrolling div ticker

Question

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.

Answer 1

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); }
}

Answer 2

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;}}