Learn how to create the simply avatar using CSS with Parallax.js. Follow steps below and/or watch the video tutorial.

Parallax.js is a simple JavaScript library that adds parallax effects on any images. Each Parallax.js instance needs a container element, the scene.
*animation opened in the Safari browser.
To create the CSS Avatar with Parallax.js you need to do:
- Add HTML
- Add CSS
- Add JavaScript
Step1.
Add HTML
<div id="content">
<div id="circle">
<div id="avatar">
<div class="hair"></div>
<div class="ear"></div>
<div class="face"></div>
<div class="top"></div>
<div class="neck"></div>
<div class="layer head" data-depth="0.3">
<div class="eye"></div>
<div class="nose"></div>
<div class="glasses"></div>
<div class="smile"></div>
</div>
</div>
</div>
</div>
Step2.
Add CSS
Set the colour, and position of the background, content and the circle.
body {
background-color: #95d5b2;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#content {
position: relative;
transform-origin: bottom;
}
#circle {
position: relative;
overflow: hidden;
width: 250px;
height: 250px;
border-radius: 50%;
background-color: #b7e4c7;
z-index:-2;
}
Style the avatar:
#avatar {
position: absolute;
left: 30%;
top: 20%;
}
.hair {
position: absolute;
background-color: #5e503f;
width: 100px;
height: 125px;
border-radius: 50px 50px 5px 5px;
}
.face {
position: absolute;
background-color: #e6beae;
width: 80px;
height: 70px;
border-radius: 0px 0px 30px 30px;
left: 10px;
top:50px;
}
.neck {
position: absolute;
width: 40px;
height: 40px;
background-color: #e0baab;
border-radius: 0 0 20px 20px;
top: 118px;
left:30px;
}
.top {
position: absolute;
background-color: #f0efeb;
width: 150px;
height: 150px;
top:130px;
left:-25px;
border-radius:30px 30px 0 0;
}
.head {
position: absolute;
}
.nose {
position: absolute;
width: 14px;
height: 23px;
background-color: #d6b0a1;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
left: 43px;
top: 65px;
}
.eye {
position: absolute;
background-color: #333533;
width: 15px;
height: 15px;
border-radius: 50%;
top: 65px;
left: 22px;
z-index:10;
}
.eye:after {
content:"";
position: absolute;
background-color: #333533;
width: 15px;
height: 15px;
border-radius: 50%;
left: 42px;
}
.ear {
background-color: #e0baab;
position: absolute;
width: 30px;
height: 30px;
border-radius:50%;
top:55px;
left:-10px;
z-index:-1;
}
.ear:after {
content:"";
background-color: #e0baab;
position: absolute;
width: 30px;
height: 30px;
border-radius:50%;
left:90px;
}
.glasses {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #001233;
top: 55px;
left: 10px;
}
.glasses:before {
content:"";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #001233;
left: 45px;
top:-2px;
}
.glasses:after {
content:"";
position: absolute;
width: 18px;
height: 18px;
border-radius:50%;
box-shadow: inset 0px 3px 0 #001233;
left:29.5px;
top:10px;
}
.smile {
position: absolute;
background-color: #333533;
width: 28px;
height: 13px;
border-radius: 0 0 30px 30px;
top: 95px;
left:37px;
}
Step3.
Add JavaScript
const avatar = document.getElementById('content');
const parallax = new Parallax(avatar, {
invertX: false,
invertY: false,
limitX: 25,
limitY: 25,
});
To see the live output of the animation go to lenastanley.com.
Watch also the video tutorial:
Enjoy coding!