Create marque like effect in a table column using CSS - html

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>: https://stackoverflow.com/help/how-to-ask</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>