This javascript plugin add a cool effect to a profile image by making the face in the image to follow the mouse cursor or a touching point. This plugin can be use to enhance a profile page, an online cv or the team page in your website. The project use webapck module bundler to manage the javascript and asset files.
Click here to see it on action.
In the project directory, you can run:
to install dependencies:
to start the application in development mode:
to build the bundle file in the /dist dir:
Runs the app in the development mode.
Open http://localhost:8080/ to view it in the browser.
The key of the success is a good headshot picture, so let's say a few words on how to build your profile picture.
First of all arm yourself with a tripod in order to get sharp images. Then position yourself preferable against of single color tint wall. Focus the camera on your face and try to get the best lighting and facial expression. You will have to take 8 shots while you move your head(important:only your head!) counterclockwise. So begin by looking at 12 hour, then look between 11 and 10 hours, go ahead by looking at 9, take another shot while looking between 8 and 7, after that look down at 6 hour. Only 3 shots are missing, stay with me. Proceed with the sixth shot looking within 5 and 4, then take the seventh shot looking at 3 hour and finally take a shot while looking amid 1 and 2 hours. Now you will have to take a last picture by looking stright to your camera. That's it! The photo session is over.
Now will pass to the post-production phase. You will have to merge the fisrt 8 shots in the same order in which they where made, ending with an eight frame filmstrip. Look in "src" folder for the "strip.jpg" picture to get what I mean. Use Adobe Photoshop or other image manipulation software, to do that.
Now that you have a pofile picture, add this code to your html page:
<body> .................. <div class="strip-holder"> <img src="your-ninth-shot"/> </div> <script src="followFaces.bundle.js"></script> </body>
Enjoy!