Create Marque Like Effect In A Table Column Using Css

Question

I have table like this:

Column1 Static

Column2 Static

Column3 with some lon

Solution 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();

    functiongo() {
      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;
}

<scriptsrc="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><divclass="marquee">Column3 with some long moving text</div></td></tr></table>

Hope this helps,

Solution 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: 40016px/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: ' 🡄';
}

.scrolla {
  color: gold
}


/* Required for complex CSS animation */@keyframes rightToLeft {
  0% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<tableclass='table'><tbody><tr><td>15%<b>⟺</b></td><td>15%<b>⟺</b></td><td><figureclass='marquee'><figcaptionclass='scroll'>You should read <i>“how to ask”</i>:&nbsp;<ahref="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><figureclass='marquee'><figcaptionclass='scroll'>🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠🎠</figcaption></figure></td></tr></tbody></table>

Html5 Tech

Create Marque Like Effect In A Table Column Using Css

Solution 1:

Solution 2:

Post a Comment for "Create Marque Like Effect In A Table Column Using Css"