6:["$","div",null,{"className":"container-lg mt-3","style":{"height":"auto!important"},"children":["$","div",null,{"className":"row","style":{"height":"auto!important"},"children":[["$","div",null,{"className":"col-12 col-md-7 col-lg-8 col-xl-8 mb-3 m-0","style":{"height":"auto!important"},"children":["$","article",null,{"className":"blog-post","style":{"height":"auto!important"},"children":[["$","h1",null,{"dir":"auto","className":"blog-post-title h4 mt-2","children":[" ","CSS-Only Marquee Effect"]}],["$","img",null,{"className":"rounded","loading":"eager","title":"CSS-Only Marquee Effect","src":"https://api.facepy.com/null","width":"100%","height":"auto","alt":"CSS-Only Marquee Effect"}],["$","p",null,{"dir":"auto","className":"text-left h6 text-muted fw-bold mt-2","children":[" ","At ","3/31/2024"," "]}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"

You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.

You’ll probably want to aria-hidden all but one of them if you need to duplicate the text. Or, you could use a very clever CSS trick to “duplicate” the text using text-shadow.

Nice to see prefers-reduced-motion in there stopping the effect when it should be.

\n\n Direct Link →\n \n

"}}]]}]}],["$","div",null,{"className":"col-12 col-md-5 col-lg-4 col-xl-4 position-relative mb-3","style":{"height":"auto!important"},"children":"$L17"}]]}]}]