A: This is an experiment combining some new CSS properties and JS events with photography; exploring tangible methods of interacting with digital photographs.
Layers of the exposure are blended together in the browser using the mix-blend-mode property. These layers are then trimmed to the silhouette with the mask-image property.
If you're visiting on a device with a cursor, the exposure will react to mouseovers. This is probably the ideal device type to view this experiment with. The cursor coordinates are used to apply transforms (translations and rotations) across the layers of the exposure.
If you're visiting on a device with an accelerometer — e.g. a smartphone — you'll see the exposure react to the device tilting and panning.
The deviceorientation event sends down the beta and gamma orientation, which is then adjusted and applied as transforms (translations) across the layers of the exposure.
Browsers that don't support CSS masking or blend modes will load a static backup image instead.
Check out my Instagram @clg_aus for more photography or clg.name for more web stuff.