Re-creating "Google Pixel 3a" Website's Camera Features Demo
Tags: google, css, javascript, html
Published: 2019-05-14 20:16:36

---
title: Re-creating "Google Pixel 3a" Website's Camera Features Demo
published: true
description: Re-creating Google Pixel 3A website's Camera Features (Depth Editor & Color Pop) Demo with HTML, CSS & JS
tags: google, css, javascript, html
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pxk4qfp4mm8mj31870lt.jpg
---

Google launched Pixel 3a last week. On its [website](https://store.google.com/product/pixel_3a), it brilliantly demos its camera's features: Depth Editor and Color Pop.

###### Depth Editor (change the background blur/ bokeh):![](https://thepracticaldev.s3.amazonaws.com/i/jzy0tfq436vw5xchxwiy.gif)
###### Color Pop Demo (change the background color to black & white)![](https://thepracticaldev.s3.amazonaws.com/i/4txs6c0ek24tez484y4y.gif)

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](https://unsplash.com/photos/470eBDOc8bk) amazing image from Unsplash.
<img src="https://i.imgur.com/dFIWe48.jpg" width="210">

_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!
![](https://thepracticaldev.s3.amazonaws.com/i/pxk4qfp4mm8mj31870lt.jpg)

###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:
{% codepen https://codepen.io/kedar/pen/WBrgdQ default-tab=result %}

Here's the CodePen demo for the Color Pop effect:
{% codepen https://codepen.io/kedar/pen/RmKbyY default-tab=result %}