Can you convert a video to pure CSS?(dgerrells.com)

92 pointsby rustystumpvor 2 Jahren14 comments

dgerrells.com

Can you convert a video to pure CSS?

https://dgerrells.com/blog/can-you-convert-a-video-to-pure-css

14 comments

vladdevor 2 Jahren

Hillarious! Soon enough people will rebuild entire browsers with box shadows :)

d--bvor 2 Jahren

Don’t give the guy bad ideas! At this stage, his blog posts are cries for help. Is there a css anonymous org out there?

morjomvor 2 Jahren

Title reminded me of this video (although not exactly the same thing as in the article):

https://youtu.be/MQbjW2VfaHs?si=FK92sb8DYSQt5sVO

snaltyvor 2 Jahren

The first demo doesn't work for me in Firefox, either.

bleuarffvor 2 Jahren

I thought so, but when I came back to the tab later it was working, and was able to go through all examples. Unlike Chrome who crashed halfway through the page.

torrefattovor 2 Jahren

I was going to rant something about open standards and how they did not care to test this toy on Firefox (but they did it test it on safari), but I grew tired.

jeroenhdvor 2 Jahren

According to MDN, the feature can be enabled in Firefox by enabling layout.css.scroll-driven-animations.enabled in Firefox (though the demos don't work, looks like there are still some implementation bugs).

I don't really mind proof of concept demos like these only working in some browsers. The feature is still useless on real websites, but who cares about a silly cat GIF made up of CSS boxes not working.

bmicraftvor 2 Jahren

The last one even works on Firefox for Android, and most of the manually scrolling ones do too

rustystumpvor 2 Jahren

I tested this on safari and chrome + mobile but not the fox as I rarely use it. I know that ff is more common in the dev world so on the next toy I will be sure to give things a whirl there too.

For ref, I didn't test this on windows, linux, or android nor the browser combos within.

Invizvor 2 Jahren

Animating timeline via css variable causes restyle cascade for all descendant elements. Maybe it is fine for shallow structure but generally it’s much more performant to change transformation directly. Of course that makes it less convenient as computation would have to be duplicated in js

h1fravor 2 Jahren

Impressive! Uploaded a 32mb video, played a few frames and immediately crashed my tab, honestly, that's also impressive, chrome rarely crash like this :D

NB: using scroll to play video frame by frame is nice but on macos you can hide the scrollbar which makes it not very obvious that you can do that

lagniappevor 2 Jahren

CSS will continue to gain more function until it subsumes JS

krickvor 2 Jahren

Waiting for "Bad apple" as a pure CSS.

rustystumpvor 2 Jahren

say no more fam https://www.youtube.com/watch?v=d3Zixe_ooQc