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

92 pointsby rustystump2 anni fa14 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

vladde2 anni fa

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

d--b2 anni fa

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?

morjom2 anni fa

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

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

snalty2 anni fa

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

bleuarff2 anni fa

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.

torrefatto2 anni fa

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.

jeroenhd2 anni fa

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.

bmicraft2 anni fa

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

rustystump2 anni fa

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.

Inviz2 anni fa

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

h1fra2 anni fa

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

lagniappe2 anni fa

CSS will continue to gain more function until it subsumes JS

krick2 anni fa

Waiting for "Bad apple" as a pure CSS.

rustystump2 anni fa

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