Moving head with Parallax.js

Developer
Sasha
Size
3,066 Kb
Views
141,680
  1. Moving head with Parallax.js Previews
  2. Moving head with Parallax.js HTML Codes
  3. Moving head with Parallax.js CSS Codes
  4. Moving head with Parallax.js JS Codes

How do I make an moving head with parallax.js?

Move your mouse around.. What is a moving head with parallax.js? How do you make a moving head with parallax.js? This script and codes were developed by Sasha on 12 June 2022, Sunday.

Moving head with Parallax.js Previews
IQ Test

Moving head with Parallax.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moving head with Parallax.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div class="hair"></div> <div class="ear" data-depth="0.3"></div> <div class="ear right" data-depth="0.3"></div> <div class="layer fringe" data-depth="0.2"></div> <div class="layer eye" data-depth="0.4"></div> <div class="layer head" data-depth="0.2"> <div class="nose"></div> <div class="mouth"> <div class="tongue"></div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Moving head with Parallax.js - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600");
body { background: #D9E5D6;
}
#container,
.head,
.eye,
.mouth,
.hair,
.fringe,
.ear,
.nose { position: absolute;
}
#container { margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 200px; height: 200px; transform-origin: bottom;
}
.hair { z-index: 5; top: -20px; left: -15px; width: 115px; height: 120px; background: #404E4D; border-radius: 100px 100px 10px 10px;
}
.fringe { z-index: 99; top: -2px !important; left: 25px !important; width: 60px; height: 40px; background: #404E4D; border-radius: 0 100px 100% 250px; transform: rotate(30deg);
}
.fringe:before { position: absolute; content: ''; top: -3px; left: -34px; width: 57px; height: 30px; background: #424B54; border-radius: 100%; transform: rotate(-50deg);
}
.head { left: 10px; z-index: 9; width: 85px; height: 108px; background: #E8C2B7; border-radius: 100px;
}
.eye { z-index: 20; top: 45px !important; left: 12px !important; width: 12px; height: 12px; background: #404E4D; border-radius: 100%;
}
.eye:before { position: absolute; content: ''; width: 12px; height: 12px; background: #404E4D; border-radius: 100%; left: 53px;
}
.mouth { top: 75px; left: 30px; width: 30px; height: 15px; border-radius: 0 0 100px 100px; background: #404E4D; overflow: hidden;
}
.tongue { position: absolute; top: 7px; left: 10px; width: 20px; height: 20px; border-radius: 100%; background: #F6828C;
}
.ear { z-index: -1; width: 30px; height: 30px; background: #E8C2B7; top: 39px; left: -5px; border-radius: 100%;
}
.ear.right { left: 60px;
}
.nose { z-index: 20; top: 54px; left: 40px; width: 8px; height: 14px; background: #DB9B99; border-radius: 100px;
}

Moving head with Parallax.js - Script Codes JS Codes

const parent = document.getElementById('container');
const parallax = new Parallax(parent, { invertX: false, invertY: false, limitX: 26, limitY: 26,
});
Moving head with Parallax.js - Script Codes
Moving head with Parallax.js - Script Codes
Home Page Home
Developer Sasha
Username sashatran
Uploaded June 12, 2022
Rating 4.5
Size 3,066 Kb
Views 141,680
Do you need developer help for Moving head with Parallax.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sasha (sashatran) Script Codes
Name
SVG Filter Gooey Share, Social Media Button
Button with Hover Effect
Flexgrow illustration
Svg Stars Experiment
Subscribe Button
Random Color Generator
Instagram Inspired Loader
CSS Shop
Input UI Animation
CSS Girl
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!