<body>
<div class="box">
<div class="cone__base"></div>
<div class="scoop__yellow"></div>
<div class="faces scoop__yellow__face">
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
</div>
<div class="scoop__yellow--drip1"></div>
<div class="scoop__yellow--drip2 "></div>
<div class="scoop__yellow--drip3"></div>
<div class="scoop__yellow--drip4"></div>
<div class="scoop__green"></div>
<div class="faces scoop__green__face">
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
</div>
<div class="scoop__green--drip1"></div>
<div class="scoop__green--drip2"></div>
<div class="scoop__green--drip3"></div>
<div class="scoop__green--drip4"></div>
<div class="scoop__peach"></div>
<div class="faces scoop__peach__face">
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
</div>
<div class="scoop__peach--drip1"></div>
<div class="scoop__peach--drip2"></div>
<div class="scoop__peach--drip3"></div>
<div class="scoop__peach--drip4"></div>
<div class="scoop__peach--drip5"></div>
<div class="scoop__peach--drip6"></div>
</div>
</body>
.box {
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 600px;
height: 600px;
background: #9ddadb;
}
.cone__base {
border-left: 85px solid transparent;
border-top: 250px solid #EDD5AF;
border-right: 85px solid transparent;
height: 0;
width: 0;
position: absolute;
left: 35%;
bottom: 5%;
}
/* YELLOW */
.scoop__yellow {
width: 180px;
height: 160px;
background-color: #FCEEB5;
border-radius: 50%;
position: absolute;
left: 33.5%;
bottom: 65%;
z-index: 3;
}
.scoop__yellow--drip1 {
width: 60px;
height: 45px;
background-color: #FCEEB5;
border-radius: 50%;
position: absolute;
left: 53%;
bottom: 67%;
z-index: 3;
}
.scoop__yellow--drip2 {
width: 30px;
height: 60px;
background-color: #FCEEB5;
border-radius: 50%;
position: absolute;
left: 54%;
bottom: 63%;
z-index: 3;
animation: melt 15s infinite ease-in;
}
.scoop__yellow--drip3 {
width: 70px;
height: 45px;
background-color: #FCEEB5;
border-radius: 50%;
position: absolute;
left: 34%;
bottom: 66%;
z-index: 3;
}
.scoop__yellow--drip4 {
width: 20px;
height: 20px;
background-color: #FCEEB5;
border-radius: 50%;
position: absolute;
left: 51.5%;
bottom: 64.5%;
z-index: 3;
animation: melt-small 15s infinite ease-in;
}
.scoop__yellow__face {
width: 20%;
height: 20%;
border-radius: 50%;
position: absolute;
left: 36%;
bottom: 70%;
z-index: 4;
.eye-left {
width: 13%;
height: 12%;
background: #000;
position: absolute;
left: 25%;
bottom: 54%;
border-radius: 50%;
}
.eye-right {
width: 13%;
height: 12%;
background: #000;
position: absolute;
left: 65%;
bottom: 54%;
border-radius: 50%;
}
.mouth {
position: absolute;
left: 35%;
bottom: 22%;
width: 30%;
height: 16%;
border-radius: 0 0 100px 100px;
background: #424B54;
overflow: hidden;
z-index: 3;
.tongue {
position: absolute;
left: 25%;
bottom: -71%;
width: 80%;
height: 125%;
background: #F6828C;
border-radius: 100%;
z-index: 5;
}
}
}
/* GREEN */
.scoop__green {
width: 180px;
height: 160px;
background-color: #A2CCB6;
border-radius: 50%;
position: absolute;
left: 32%;
bottom: 50%;
z-index: 2;
}
.scoop__green--drip1 {
width: 60px;
height: 45px;
background-color: #A2CCB6;
border-radius: 50%;
position: absolute;
left: 53%;
bottom: 52%;
z-index: 2;
}
.scoop__green--drip2 {
width: 35px;
height: 40px;
background-color: #A2CCB6;
border-radius: 50%;
position: absolute;
left: 53%;
bottom: 50.5%;
z-index: 2;
}
.scoop__green--drip3 {
width: 60px;
height: 45px;
background-color: #A2CCB6;
border-radius: 50%;
position: absolute;
left: 34%;
bottom: 50%;
z-index: 2;
}
.scoop__green--drip4 {
width: 35px;
height: 60px;
background-color: #A2CCB6;
border-radius: 50%;
position: absolute;
left: 40.5%;
bottom: 48.5%;
z-index: 2;
animation: melt 15s infinite ease-in;
}
.scoop__green__face {
width: 12%;
height: 12%;
border-radius: 50%;
position: absolute;
left: 33%;
bottom: 52%;
z-index: 4;
.eye-left {
width: 13%;
height: 12%;
background: #000;
position: absolute;
left: 25%;
bottom: 54%;
border-radius: 50%;
}
.eye-right {
width: 13%;
height: 12%;
background: #000;
position: absolute;
left: 65%;
bottom: 54%;
border-radius: 50%;
}
.mouth {
position: absolute;
left: 35%;
bottom: 22%;
width: 30%;
height: 16%;
border-radius: 0 0 100px 100px;
background: #424B54;
overflow: hidden;
z-index: 3;
}
}
/* PEACH */
.scoop__peach {
width: 180px;
height: 160px;
background-color: #EE786E;
border-radius: 50%;
position: absolute;
left: 34%;
bottom: 35%;
}
.scoop__peach--drip1 {
width: 30px;
height: 35px;
background-color: #EE786E;
border-radius: 50%;
position: absolute;
left: 37%;
bottom: 35%;
}
.scoop__peach--drip2 {
width: 30px;
height: 35px;
background-color: #EE786E;
border-radius: 50%;
position: absolute;
left: 41%;
bottom: 34%;
}
.scoop__peach--drip3 {
width: 30px;
height: 35px;
background-color: #EE786E;
border-radius: 50%;
position: absolute;
left: 45%;
bottom: 33%;
animation: melt-medium 15s infinite ease-in;
}
.scoop__peach--drip4 {
width: 30px;
height: 35px;
background-color: #EE786E;
border-radius: 50%;
position: absolute;
left: 49%;
bottom: 33.5%;
}
.scoop__peach--drip5 {
width: 30px;
height: 35px;
background-color: #EE786E;
border-radius: 50%;
position: absolute;
left: 53%;
bottom: 34%;
animation: melt-small 15s infinite ease-in;
}
.scoop__peach--drip6 {
width: 30px;
height: 35px;
background-color: #EE786E;
border-radius: 50%;
position: absolute;
left: 57%;
bottom: 36%;
}
.scoop__peach__face {
width: 15%;
height: 15%;
border-radius: 50%;
position: absolute;
left: 43%;
bottom: 35%;
z-index: 4;
.eye-left {
width: 13%;
height: 12%;
background: #000;
position: absolute;
left: 25%;
bottom: 54%;
border-radius: 50%;
}
.eye-right {
width: 13%;
height: 12%;
background: #000;
position: absolute;
left: 65%;
bottom: 54%;
border-radius: 50%;
}
.mouth {
position: absolute;
left: 35%;
bottom: 22%;
width: 30%;
height: 16%;
border-radius: 0 0 100px 100px;
background: #424B54;
overflow: hidden;
z-index: 3;
.tongue {
position: absolute;
right: 25%;
bottom: -71%;
width: 80%;
height: 125%;
background: #F6828C;
border-radius: 100%;
z-index: 5;
}
}
}
// ANIMATIONS
@keyframes melt {
0% { transform: translateY(0) }
50% { transform: translateY(15px) }
100% { transform: translateY(0) }
}
@keyframes melt-medium {
0% { transform: translateY(0) }
50% { transform: translateY(10px) }
100% { transform: translateY(0) }
}
@keyframes melt-small {
0% { transform: translateY(0) }
50% { transform: translateY(8px) }
100% { transform: translateY(0) }
}
@keyframes eyes {
0% { transform: translateX(0) }
50% { transform: translateX(8px) }
100% { transform: translateX(0) }
}
View Compiled
// html setup
var facesHTMLCollection = document.getElementsByClassName('faces');
var facesArray = Array.from(facesHTMLCollection);
// input setup
var input = {
mouseX: {
start: 0,
end: window.innerWidth,
current: 0,
},
mouseY: {
start: 0,
end: window.innerHeight,
current: 0,
}
};
input.mouseX.range = input.mouseX.end - input.mouseX.start;
input.mouseY.range = input.mouseY.end - input.mouseY.start;
// output setup
var output = {
x: {
start: -8,
end: 8,
current: 0,
},
y: {
start: -8,
end: 8,
current: 0,
},
}
output.x.range = output.x.end - output.x.start;
output.y.range = output.y.end - output.y.start;
var handleMouseMove = function(event) {
// mouse x input
input.mouseX.current = event.clientX;
input.mouseX.fraction = (input.mouseX.current - input.mouseX.start) / input.mouseX.range;
// mouse y input
input.mouseY.current = event.clientY;
input.mouseY.fraction = (input.mouseY.current - input.mouseY.start) / input.mouseY.range;
// output x
output.x.current = output.x.start + (input.mouseX.fraction * output.x.range);
output.x.opposite = output.x.end - (input.mouseX.fraction * output.x.range);
// output y
output.y.current = output.y.start + (input.mouseY.fraction * output.y.range);
output.y.opposite = output.y.end - (input.mouseY.fraction * output.y.range);
// apply output to html
facesArray.forEach(function(face, k) {
if (k === 0) {
face.style.transform = 'translate('+output.x.current+'px, '+output.y.current+'px)';
} else {
face.style.transform = 'translate('+output.x.opposite+'px, '+output.y.opposite+'px)';
}
});
}
window.addEventListener('mousemove', handleMouseMove);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.