Bringing the CSS-only Polaroid camera to life! 📸
Tags: css, html, codepen, javascript
Published: 2020-02-19 19:01:24

I was blown away by the Polaroid camera @fossheim made with just HTML/CSS. If you missed it, go check it out here:

{% link fossheim/how-i-recreated-a-polaroid-camera-with-css-gradients-only-4la5 %}

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](https://bryce.io/) 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:

{% glitch interactive-polaroid app  %}

_Note: it's set to scale down in an iframe to fit in the article embed, I recommend opening it in [full-screen](https://interactive-polaroid.glitch.me/)._

---

## 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](https://glitch.com/edit/#!/interactive-polaroid?path=script.js:219:0)! 😇)

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:

{% glitch interactive-polaroid code file=script.js %}

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](https://unsplash.com/photos/lyPG-o_U0mE) for the pretty picture.