I was blown away by the Polaroid camera @fossheim made with just HTML/CSS. If you missed it, go check it out here:
It's so well done, especially the flash ππ― but I wish I could play with it! At the bottom of their article were some ideas for adding interactivity (and I needed a new side-project) so I decided to take a stab at some.
I'm a fan of replicating real-world objects in CSS. I don't particularly enjoy writing CSS, but I love how any browser can paint an object with just a few lines of code. And with a little trigonometry it can make things spin!
Without further ado, here it is:
Note: it's set to scale down in an iframe to fit in the article embed, I recommend opening it in full-screen.
What I added
1. A zoomable lens π
Disclaimer: I don't actually own one of these so I just assumed it's a zoom lens. But using some basic angle calculations I made it so clicking & dragging it around will change the size of the camera iris (an additional radial gradient I added) to give the illusion of ~zooming~.
It's not perfect; the angle resets at 360Β° and doesn't have a state to reference when you start dragging it, so it immediately jumps to wherever you start dragging it from. But relative angle calculation was already getting pretty complex so I left it as-is for now. Also it doesn't work on mobile. (remixes welcome! π)
Originally I also made it trigger a blur CSS filter on the background image, but that was pretty GPU-intensive (my air couldn't handle it) so I disabled it and replaced with background-size.
2. Clickable buttons πΈ
Clicking the shutter makes it go flash! It triggers a box-shadow & background override to the flash bulb and an opacity effect on the background. A transition rule is applied after these are set to give a fade-out effect.
The only other button I saw was the timer button (next to flash), but I wasn't sure how that worked...does it start a timer or do you need to hit the shutter too? I made it clickable but it doesn't do anything (yet).
3. Toggle-able toggles
The yellow one lightens/darkens the background. Again, I wanted to use filters here for brightness/contrast but opacity is much less GPU-intensive. The other just moves back/forth (but really should eject the photo cartridge).
Here's the script that makes everything work:
The only code I modified from the original was to add some classes and a background image to the HTML, the iris gradient to the camera and the style block below /* Interactive styles */. The rest is unchanged.
And I left enableCSSFilters in if you're reading this on a computer that can handle it, or have any ideas for optimizing it. Give it a try!
All credit to @fossheim for making this possible. It's so cool! And thanks unsplash for the pretty picture.
Top comments (1)
Love what you did with it, great work!