Create marque like effect in a table column using CSS

Question

I have table like this:

<table>
    <tr>
        <td>Column1 Static</td>
        <td>Column2 Static</td>
        <td>Column3 with some long moving text</td>
    </tr>
</table>

How can I create a marquee-like effect for the third column using CSS?

Answer 1

With some additional styling placed on the table, @Tats_innit's post on a javascript <marquee/>'s provides a great solution (JQuery).

(function($) {
  $.fn.textWidth = function() {
    var calc = '<span style="display:none">' + $(this).text() + '</span>';
    $('body').append(calc);
    var width = $('body').find('span:last').width();
    $('body').find('span:last').remove();
    return width;
  };

  $.fn.marquee = function(args) {
    var that = $(this);
    var textWidth = that.textWidth(),
      offset = that.width(),
      width = offset,
      css = {
        'text-indent': that.css('text-indent'),
        'overflow': that.css('overflow'),
        'white-space': that.css('white-space')
      },
      marqueeCss = {
        'text-indent': width,
        'overflow': 'hidden',
        'white-space': 'nowrap'
      },
      args = $.extend(true, {
        count: -1,
        speed: 1e1,
        leftToRight: false
      }, args),
      i = 0,
      stop = textWidth * -1,
      dfd = $.Deferred();

    function go() {
      if (!that.length) return dfd.reject();
      if (width == stop) {
        i++;
        if (i == args.count) {
          that.css(css);
          return dfd.resolve();
        }
        if (args.leftToRight) {
          width = textWidth * -1;
        } else {
          width = offset;
        }
      }
      that.css('text-indent', width + 'px');
      if (args.leftToRight) {
        width++;
      } else {
        width--;
      }
      setTimeout(go, args.speed);
    };
    if (args.leftToRight) {
      width = textWidth * -1;
      width++;
      stop = offset;
    } else {
      width--;
    }
    that.css(marqueeCss);
    go();
    return dfd.promise();
  };
})(jQuery);

$('.marquee').marquee();

td {
  min-width: 150px;
  max-width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Column1 Static</td>
    <td>Column2 Static</td>
    <td>
      <div class="marquee">Column3 with some long moving text</div>
    </td>
  </tr>
</table>

Hope this helps,

Answer 2

Here's a pure CSS solution. The CSS property transform: translateX(), @keyframes, and CSS animation is used in the demo. If for some inconceivable reason your browser is pre-2017, a JavaScript prefix function is provided.

var animation = false,
    animationstring = 'animation',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
    pfx  = '',
    elem = document.createElement('div');

if( elem.style.animationName !== undefined ) { animation = true; }    

if( animation === false ) {
  for( var i = 0; i < domPrefixes.length; i++ ) {
    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
      pfx = domPrefixes[ i ];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}

:root {
  font: 400 16px/1.5 Verdana;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

.table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 90%;
  margin: 5px auto;
}

td {
  width: 15%;
  text-align: center;
  border: 3px solid rgba(233, 233, 233, 0.3);
}

td:last-of-type {
  width: 70%;
}

td>b {
  display: block;
  margin: -15px auto 0;
  font-size: 1.5rem;
  color: tomato;
}

.marquee {
  width: 90%;
  /* Required on Parent */
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  padding-left: 15px;
  margin: 20px auto;
  font-size: 2rem;
}

.scroll {
  /* Required on Child*/
  white-space: nowrap;
  display: table-cell;
  color: cyan;
  vertical-align: baseline;
  /* Infinite Loops */
  animation: rightToLeft 12s linear infinite;
  /* Right to left direction */
  animation-fill-mode: backwards;
  /* Set to 0s in order to have a point of reference */
  animation-delay: 0s;
}

.scroll::before {
  content: ' ';
}

.scroll::after {
  content: ' ';
}

.scroll a {
  color: gold
}


/* Required for complex CSS animation */

@keyframes rightToLeft {
  0% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<table class='table'>
  <tbody>
    <tr>
      <td>15%<b>⟺</b></td>
      <td>15%<b>⟺</b></td>
      <td>
        <figure class='marquee'>
          <figcaption class='scroll'>You should read <i>“how to ask”</i>:&nbsp;<a href="https://stackoverflow.com/help/how-to-ask">https://stackoverflow.com/help/how-to-ask</a></figcaption>
        </figure>
      </td>
    </tr>
    <tr>
      <td>15%<b>⟺</b></td>
      <td>15%<b>⟺</b></td>
      <td>
        <figure class='marquee'>
          <figcaption class='scroll'></figcaption>
        </figure>
      </td>
    </tr>
  </tbody>
</table>