The GIF first:

Some time ago, I had an idea that whether the front end could enhance the interaction ability of the page by using camera equipment.

For example, we have seen some page designs where the page elements move with the mouse, which can be combined with the layer of elements to form a parallax effect.

So, if you can capture the movement of the face in front of the screen, you can make the page elements follow the face instead of the mouse, which might be a better parallax experience.

So after hands-on practice, there is this effect:

Then I realized that if I could apply this to a 3D game like CS, I could create a scene where the player would tilt his head right in front of the screen, and the bandit figure hiding in the corner of the screen would have a wider view to the left.

Not bad to think about, right?

However, I am not a game player, so I can’t play this idea. If there is a program that makes 3D page tour, you can have a try.

A week or two later, I thought of animoji on the iPhoneX, which could also be done this way.

So when you do it, you get the picture that you saw first.

But I’m not very good at 3D yet, so I couldn’t make the poop’s face follow the human’s.

Live Demo

Parallax DEMO

The source code

Source code repository: github.com/jaweii/AR-s…

After the source code is cloned, install the dependencies:

    

     
npm install
    

And install the parcel globally:

    

     
npm install -g parcel-bundler
    

Start command:

    

     
// Start Animoji Demo
     
npm run dev:animoji
     

     
// Start parallax Demo
     
npm run dev
    

implementation