cabl

something i've been thinking about is how to make vn-like scrolling text. at first blush this seems pretty easy: you can do it with background-clip and animating the background position of a gradient with a fixed size. but on cohost we can't define our own animations, so we're stuck with only transforms. for a block you can do all kinds of layering stuff, but this is a wrapping inline box, where transforms don't even apply. so this is the best i've got... so far. it kind of sucks and you can see what it does to the text wrapping.

#css crimes

You must log in to comment.

in reply to @lexyeevee's post:

necrose - glip @glitchedpuppet7/21/2023, 9:21 PM

i thought it was cheese

eevee @lexyeevee7/21/2023, 9:22 PM

🧀

necrose - glip @glitchedpuppet7/21/2023, 9:25 PM

thats a square

eevee @lexyeevee7/21/2023, 9:35 PM

slice of pizza

n.s.@reth7/21/2023, 9:23 PM

this chost lags the browser hard on safari

Mansa @Nekomansa7/21/2023, 9:24 PM

👀 Still very cool!

@strangeglyph7/21/2023, 10:51 PM

i ran into the inflexibility of cohost animations recently and my workaround was svg animations, would that work for this as well?

eevee @lexyeevee7/21/2023, 10:53 PM

ooh, as a background? they just might, though i've never actually cobbled one together before

@strangeglyph7/21/2023, 11:08 PM

the actual syntax isn't too bad, but getting the sizes right is pretty finicky.

for getting it cohost-compatible, there's tools like https://cloudwithlightning.net/random/chostin/prechoster/ that take svg elements with a data-background attribute and turn it into base64-encoded background-img attributes on the parent div.

eevee @lexyeevee7/21/2023, 11:49 PM

It is done https://cohost.org/lexyeevee/post/2144563-scrolling-text-take

bark. bark bark @bark8/1/2023, 7:07 AM

this is very similar to what i did here afaict. but idk

Pinned Tags