Re-creating "Google Pixel 3a" Website's Camera Features Demo

Google launched Pixel 3a last week. On its website, it brilliantly demos its camera's features: Depth Editor and Color Pop.

Depth Editor (change the background blur/ bokeh):

Color Pop Demo (change the background color to black & white)

Pixel camera is undoubtedly amazing. And its demo on the website is intriguing.
You can play with the slider under the pictures. Increase or decrease the effect. It's pretty cool.

(Re)Creating that demo:

Let's do the Background-blur or Bokeh effect. I got this amazing image from Unsplash.

Note: This is not a how-to coding article on actually blurring the background or changing the background saturation dynamically. That is not what Google is doing on the website either.

Here's how it's done (And how Google is doing it):

Two images: One with no effect applied, the other with maximum effect applied. One image on top of the other. The slider increases/decreases the opacity of the image on the top.
Smart technique!

Here's how to do it:

Overlapping

The image from Unsplash would be the no effect applied version of our image (version-1).
I blurred the background for that image in Photoshop. (Tip: You can also do this in basic Image Editing apps like Snapseed).
The edited image with the background blurred would be the maximum effect applied version (version-2).
To stack the images, we simply need to specify position: absolute and same position attributes (top, left ...) for both the images.

So, in HTML:

  <div class="images">
    <img src="//version-1">
    <img id="blur-img" class="blur-img" src="//version-2">
  </div>

And in CSS:

  img {
    width: 300px;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  .blur-img {
    opacity: 0;
  }

Now the image with id="blur-img" (specified in HTML) will be placed exactly on top of the version-1 image. And we set the opacity of the version-2 image (the blurred one) to 0.
So, the only image visible would be version-1 (the original one).

Sliding through

The input HTML element with type="range" acts as a slider. It takes in min and max values. For our convenience, we set the min to 0 and max to 100.
With JS, we need to get the value of the range input.
Based on the value of the range input, the opacity of the top image (id="blur-img") will go from 0 (hidden) to 1 (visible).

So, in JS, add a method to handle that:

const changeBlur = (value) => {
  document.getElementById("blur-img").style.opacity = value/100;
}

We divide the value by 100 because the range input will return values between 0 and 100, and the opacity of the image needs to range from 0 to 1.

And in HTML, add the range input:

<input class="slider" type="range" min="0" max="100" value="0"
oninput="changeBlur(this.value)">

🎉 That's pretty much it. It's very few lines of code, but the effect is exceptional.

Here's the CodePen demo for the Background Blur effect:

Here's the CodePen demo for the Color Pop effect: