CSS Avatar + Parallax.js

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. 

To create the CSS Avatar with Parallax.js you need to do:

1. Add HTML
2. Add CSS
3. 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!