5 ms·
An interactive mechanical contraption in pure CSS
- deleted 4y ago[deleted]
- ghostly_s 4y agodoesn't work in firefox.
- detaro 4y agoyes it does.
- fny 4y agoPull the rope
- squarefoot 4y agoWorks perfectly on my Debian system with a fairly old Firefox version (91.10.0esr). You have to pull the rope hanging from the upper left pulley.
- tgv 4y agoIn 102 it works on macOS. FF's CSS implementation hasn't seen big changes recently, AFAIK, so I'd bet it runs on somewhat older versions too. Mouse over the black piece at the end of the rope on the top left and 'pull' it down.
- impossiblefork 4y agoIt's a bit fiddly, don't just click-drag the end of the rope, hold the mouse pointer over the end until it changes.
- adrian_b 4y agoYes, indeed. The positioning of the mouse cursor over the rope end in order to pull the rope appears to be much more critical in Firefox than in Chromium/Chrome. As mentioned, the mouse cursor must change into a double-pointed vertical arrow, to allow rope pulling, so the shape change identifies the right spot.
- ghostly_s 4y agoYou're right, on further investigation it seems it does work but the active area of the rope end is only a ~3x3pixel square at the bottom right. Nice of everyone to downvote my report though, as if I was just making things up in here to troll.
- aceazzameen 4y agoThis is so creative! I'm trying to figure out how it works! It relies on the resize property and css grid. I don't quite understand why the gears spin in the grid when the rope resizes it though. This is wildly impressive! Edit: The gear is a sprite sheet! Brilliant!
- robbrown451 4y agoI was slightly disappointed at the heavy use of sprite sheets (which seems less than "pure" css), but after looking closely there would be no way to get the gears right just relying on css transforms (i.e. rotation) because of the 3d and brushed metal look they wanted for the gears. But yeah extremely impressive. I could do implement it if you gave me those sprite sheets and javascript easily enough, but wouldn't have any clue how to with css.
- nine_k 4y agoWhy, I can imagine a CSS mask which rotates occluding a fixed CSS-generated brushed metal gradient. (No, not going to try to implement it.)
- robbrown451 4y agonow I kinda want to try
- space_fountain 4y agoSo in summary, if I'm understanding properly, this uses a few tricks. First resizing the rope (by dragging it) changes the size of a css grid holding all the other elements. Since percentages refer to this parent grid this can be used to resize the other ropes and chains and with the right background + clipping this causes it to "move". For the spinning a sprite sheet is used with the background position depend on the size of the container but with a big enough multiple so we only see one sprite at a time
- aceazzameen 4y ago
- jhardy54 4y agoDoes this work with a touchscreen? I’m on mobile and don’t see anything happening. (I pulled the rope.)
- a1371 4y agoDoesn't work for me on touch screen too
- jasonboyd 4y agoIt's a little finicky but I got it to work eventually. I had to get my finger on the black tape at the end of the rope just right.
- dvh 4y agoOccasionally work but the handle on the rope is very small. Pinch to zoom in, the you can move it.
- can16358p 4y agoTried everything. Zooming in, out, tap, swipe, just at the right spot, everywhere around etc. Doesn't seem to work in iOS 15.5 Safari .
- _tom_ 4y agoNot for me, either.
- GenerocUsername 4y agoYeah, can we get a mobile responsive version? Also, I need offline and realtime support
- callumlocke 4y agoDear downvoters, it’s a joke.
- daenz 4y agoThe specular highlights on the gears appear to be independent of the gear image. Also, they appear to have a bump/normal map that responds accurately to the light source as the gear rotates. Anyone want to take a guess at how they did it?
- zaptrem 4y agoSprite sheets as per robbrown451
- tusqasi 4y agoThis is amazing!!
- yCombLinks 4y agoDoesn't work in IE11, going to have put in a ticket
- butz 4y agoI don't want to be the bearer of bad news, but IE11 has reached its EOL.
- belter 4y agoAccording to current stats 28 million global users still use IE. These are 28 million opportunities that the Mozilla Foundation is likely to mess up again...
- omarelbie 4y agoI believe it was a joke
- kzrdude 4y agoInteresting that even after its EOL, we're still not sure if IE was a joke or not
- belter 4y agoAs of two days ago, 15 June 2022. https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/ https://blogs.windows.com/windowsexperience/2022/06/15/inter...
- deleted 4y ago[deleted]
- tannhaeuser 4y agoIs this supposed to be serious use of CSS or rather, as suggested by "Committing CSS Crimes", a critique of the absurdity of CSS?
- blackle 4y agoauthor here. the website that hosts this is a new social media website that allows a limited amount of html (only inline css, no js or <style> elements), and a small subculture/arms race has developed to see who can make the wildest thing under those restrictions.
- memorable 4y agoIt's the latter.
- vivegi 4y agoSomeone please build a version of Charles Babbage's Analytical Engine using this.
- onion2k 4y agoVery cool indeed. What things CSS can do in the hands of an expert these days is seriously impressive. EDIT: Cohost seems interesting... if anyone has an invite that would be lovely. Email is in my profile here.
- Ian_Macharia 4y agoI've been trying out Remotion to make videos in React and my mind is blown. Utilizing CSS (filters,translations,blend-modes e.t.c) has made me more proficient than I ever was in After Effects
- onion2k 4y agoI made remotion-confetti. :)
- neals 4y agoThat's another level. CSS for me just means traversing through deeply nested divs looking for the culprit that has an unwanted padding or margin or, more likely, something completely different that makes little sense to me, causing the icon to misalign by 2px. :)
- jjcm 4y agoSuper impressive use of the height of the container to set state. How it works: The left rope has a "resize: vertical" attribute set, which lets you dynamically change the height of it with only css. This influences the height of the parent container, as it's the only div that doesn't have its height set as a percentage. Every other div has is height set to a "calc()" with a percentage and an added set amount of pixels. This means that when the parent container resizes, their height adjusts, which also adjusts their background image. This is what drives both the rope and the gear animations, but in different ways. The rope is straightforward - as the container grows in height, the rope bg changes position, creating a pulling effect. The gear is more tricky. They each use a long vertical sprite sheet to portray a spinning animation. How this animation gets triggered is clever - note the background position-y of one of the large red gears. It's set to 10000%. If you set this to 100% instead, you'll notice the background of the gears moves in sync with the rope - each pixel of height of the element moves the background down by 1px. By setting it to 10000% what you're saying is, "for each single pixel of height of this element, shift the background by 100px". Notably, each one of these red gears in the sprite sheet is precisely 100px high. That means for each pixel added to the height, it shifts the sprite sheet to the next gear. Really clever stuff.
- chess_buster 4y agoThanks for this explanation. Very clever indeed.
- jefozabuss 4y agoWhile this is pretty nice the title is incorrect (as others mentioned because of the sprite images).
- RedNifre 4y agoSuper choppy in Safari, super smooth in Chrome.
- jfk13 4y agoNice and smooth in Firefox, too. But yes, it's quite laggy in Safari.
- SnazzZG 4y agoWhat's supposed to happen? All I get is a static image and a progress bar across the screen...
- deleted 4y ago[deleted]
- capableweb 4y agoGrab the rope. Took me a while too.
- ChrisMarshallNY 4y agoThat is awesome! Kudos! Reminds me of Stu Nicholls' site http://cssplay.co.uk http://cssplay.co.uk Most of the stuff is "curiosity-only," but awesome, nonetheless.
- terrycody 4y agoThis is an example that even the very old tech can sometimes sprout amazing new power, just, people have to find it!