Requires jQuery and jQuery UI for the actual slider. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow.
<div id="slider"></div>
<div id="face">
<div id="mouth-box">
<div id="mouth" class="straight"></div>
</div>
</div>
#face {
width: 100px;
height: 100px;
position: relative;
border: 2px solid black;
border-radius: 50px;
margin: 20px auto;
}
#face:before, #face:after {
position: absolute;
content: "";
width: 10px;
height: 10px;
top: 30px;
border-radius: 10px;
background: black;
}
#face:before {
left: 30px;
}
#face:after {
left: 60px;
}
#mouth-box {
width: 60px;
height: 20px;
left: 20px;
top: 60px;
overflow: hidden;
background: white;
position: relative;
}
#mouth {
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px solid black;
position: absolute;
top: 0;
left: 0;
}
#mouth.straight {
height: 0px !important;
top: 7px !important;
border-width: 1px;
bottom: auto !important;
}
var newWidth,
mouth = $("#mouth");
$( "#slider" ).slider({
slide: function(event, ui) {
if (ui.value > 51 ) {
mouth.css({ bottom: 0, top: "auto" });
newWidth = 160 - ui.value;
mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -25 + ((ui.value-50) / 2)
})
.removeClass("straight");
} else if ((ui.value > 48) && (ui.value < 52)) {
mouth.addClass("straight");
} else {
mouth.css({ top: 0, bottom: "auto" });
newWidth = ui.value + 60;
mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -ui.value / 2
})
.removeClass("straight");
}
},
value: 50
});
ehhh so want it but don’t want to load big jquery-ui lib..
Akismet remake potentially?
Either way it is really cool, I was wondering how that could be achieved..
demo is not working in current chrome 21
Updated with new version of Jquery UI and css (works in latest Chrome and Firefox).
Demo doesn’t work on iPad
http://playground.fabianhijlkema.nl/smile/