JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<div class='marquee' style='margin-top:1px;background-color:#6ec1f8;'>
        <p>text</p>
    </div>

CSS

.marquee
  {
    overflow: hidden;
    position: relative;
    background: #fefefe;
    color: #333;

}

.marquee p {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        text-align: center;
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -moz-animation: scroll-left 2s linear infinite;
        -webkit-animation: scroll-left 2s linear infinite;
        animation: scroll-left 10s linear infinite;
}

    @-moz-keyframes scroll-left {
        0% {
            -moz-transform: translateX(100%);
        }
        100% {
            -moz-transform: translateX(-100%);
        }
    }
    
    @-webkit-keyframes scroll-left {
        0% {
            -webkit-transform: translateX(100%);
        }
        100% {
            -webkit-transform: translateX(-100%);
        }
    }
    
    @keyframes scroll-left {
        0% {
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }
        100% {
            -moz-transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

JavaScript

var myVar=setInterval
   (function()
    {myTimer()},2000
   );
function myTimer()
  {
   var pos=$( ".marquee" ).scrollTop();
   $.ajax({type: "GET",
           url: "",
           data: '',
           cache: true,
           success: function(data)
              {
               var $response=$(data);
               var oneval = $response.find('#main_view').html();
               $('#main_view').html(oneval);
               $(".marquee").scrollTop(pos);
              }});
      }