DEV Community

loading...

Bringing the CSS-only Polaroid camera to life! 📸

bryce profile image Bryce Dorn ・3 min read

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.

Discussion (1)

pic
Editor guide
Collapse
fossheim profile image
Sarah

Love what you did with it, great work!