jaburns / golfcolumn

JS golf rotating column

Golf Column

Classic rotating column effect in a 293 byte HTML file.

View it live

Final source

<b id=A></b><b id=B><style onload="q=t=9;setInterval(_=>[Z=A.style,B.style].map((x,i)=>x.width=200*C
((t+=!i*.008*C(q/4))%(P=1.57)-i*P,x.background=`#f${5+(0|t/P+i)%4}3`),Z.marginLeft=350*(C=Math.cos)(
q-=.004)),5)">*{margin:0;text-align:center;height:100%;background:#144}b{display:inline-block

Source with whitespace

HTML

<b id=A></b><b id=B>

CSS

* {
    margin: 0;
    text-align: center;
    height: 100%;
    background: #144
}
b {
    display: inline-block

Javascript

q = t = 9;

setInterval(_ =>
    [Z=A.style,B.style].map((x,i) =>
        x.width = 200 * C(
            (t += !i * .008 * C(q / 4)) % (P=1.57) - i*P
        ,
            x.background = `#f${ 5+(0|t/P+i)%4 }3`
        )
    ,
        Z.marginLeft = 350 * (C=Math.cos)(q-=.004)
    )
,
    5
)