var addEvent = function(object, type, callback) { if (object == null || typeof(object) == 'undefined') return; if (object.addEventListener) { object.addEventListener(type, callback, false); } else if (object.attachEvent) { object.attachEvent("on" + type, callback); } else { object["on" + type] = callback; } }; var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight || e.clientHeight || g.clientHeight; var horizSliderVal = 0; var vertSliderVal = 0; addEvent(document, "mousemove", function(e) { horizSliderVal = (x / 2 - e.clientX) / (x / 2) * -1; vertSliderVal = (y / 2 - e.clientY) / (y / 2); makeFaceMove(); }); addEvent(document, "resize", function() { x = w.innerWidth || e.clientWidth || g.clientWidth; y = w.innerHeight || e.clientHeight || g.clientHeight; }); function makeFaceMove() { var elementAndPositionList = []; // nose var noseProps = { "elementName": ".nose", "props": { "left": (50 + (17.5 * horizSliderVal)).toString() + "%", "top": (40 - (10 * vertSliderVal)).toString() + "%" } } elementAndPositionList.push(noseProps); // eyes var eyeProps = { "elementName": ".eyes", "props": { "left": (50 + (15 * horizSliderVal)).toString() + "%", "top": (50 - (9 * vertSliderVal)).toString() + "%" } } elementAndPositionList.push(eyeProps); var leftEyeProps = { "elementName": ".eye-left", "props": { "left": (2.5 - (5 * horizSliderVal)).toString() + "%", "width": (40 + (5 * horizSliderVal)).toString() + "%" } } elementAndPositionList.push(leftEyeProps); var leftPupilProps = { "elementName": ".pupil-left", "props": { "left": (60 + (10 * horizSliderVal)).toString() + "%", "top": (50 - (20 * vertSliderVal)).toString() + "%", } } elementAndPositionList.push(leftPupilProps); var rightPupilProps = { "elementName": ".pupil-right", "props": { "left": (40 + (10 * horizSliderVal)).toString() + "%", "top": (50 - (20 * vertSliderVal)).toString() + "%", } } elementAndPositionList.push(rightPupilProps); var rightEyeProps = { "elementName": ".eye-right", "props": { "right": (2.5 + (5 * horizSliderVal)).toString() + "%", "width": (40 - (5 * horizSliderVal)).toString() + "%" } } elementAndPositionList.push(rightEyeProps); var glassesBridgeProps = { "elementName": ".bridge", "props": { "left": (50 + (1 * horizSliderVal)).toString() + "%" } } elementAndPositionList.push(glassesBridgeProps); var faceProps = { "elementName": ".face", "props": { "left": (50 + (2 * horizSliderVal)).toString() + "%" } } elementAndPositionList.push(faceProps); var beardProps = { "elementName": ".beard", "props": { "left": (50 + (5 * horizSliderVal)).toString() + "%", "top": (60 - (6 * vertSliderVal)).toString() + "%", "width": (30 - (5 * Math.abs(horizSliderVal))).toString() + "vh", "height": (20 + (3 * vertSliderVal)).toString() + "vh" } } elementAndPositionList.push(beardProps); var mouthProps = { "elementName": ".mouth", "props": { "left": (50 - (1.5 * horizSliderVal)).toString() + "%", "top": (50 - (5 * vertSliderVal)).toString() + "%", "width": (15 - (2.5 * Math.abs(horizSliderVal))).toString() + "vh", "height": (10 - (2.5 * Math.abs(vertSliderVal))).toString() + "vh" } } elementAndPositionList.push(mouthProps); var teethProps = { "elementName": ".teeth", "props": { "left": (50 - (10 * horizSliderVal)).toString() + "%", "top": "-" + (30 + (25 * Math.abs(vertSliderVal))).toString() + "%" } } elementAndPositionList.push(teethProps); var tongueProps = { "elementName": ".tongue", "props": { "left": (50 - (100 * parseFloat(horizSliderVal))).toString() + "%", "top": (50 + (50 * vertSliderVal)).toString() + "%", //"width": (30 - (20 * Math.abs(vertSliderVal))).toString() + "vh" } } elementAndPositionList.push(tongueProps); var earProps = { "elementName": ".ears", "props": { "left": (50 - (2.5 * horizSliderVal)).toString() + "%", "top": (57 + (2.5 * vertSliderVal)).toString() + "%" } } elementAndPositionList.push(earProps); var leftEarProps = { "elementName": ".ear-left", "props": { "left": 2.5 * Math.abs(horizSliderVal).toString() + "%", "width": (10 + (2.5 * horizSliderVal)).toString() + "vh", "height": (15 - (2.5 * Math.abs(vertSliderVal))).toString() + "vh" } } elementAndPositionList.push(leftEarProps); var rightEarProps = { "elementName": ".ear-right", "props": { "right": 2.5 * Math.abs(horizSliderVal).toString() + "%", "width": (10 - (2.5 * horizSliderVal)).toString() + "vh", "height": (15 - (2.5 * Math.abs(vertSliderVal))).toString() + "vh" } } elementAndPositionList.push(rightEarProps); var quiffProps = { "elementName": ".quiff", "props": { "left": (50 - (2.5 * horizSliderVal)).toString() + "%", "height": (10 - (2.5 * vertSliderVal)).toString() + "vh" } } elementAndPositionList.push(quiffProps); var sideburnProps = { "elementName": ".sideburns", "props": { "top": (30 - (4 * vertSliderVal)).toString() + "%" } } elementAndPositionList.push(sideburnProps); var leftSideburnProps = { "elementName": ".sideburn-left", "props": { "border-left-width": (5 + (2.5 * horizSliderVal)).toString() + "vh", //"left" : "-1vh" } } elementAndPositionList.push(leftSideburnProps); var rightSideburnProps = { "elementName": ".sideburn-right", "props": { "border-right-width": (5 - (2.5 * horizSliderVal)).toString() + "vh", } } elementAndPositionList.push(rightSideburnProps); moveElements(elementAndPositionList); }; function moveElements(elementAndPositionList) { for (var i = 0, len = elementAndPositionList.length; i < len; ++i) { var element = document.getElementById(elementAndPositionList[i].elementName); for (var key in elementAndPositionList[i].props) { // console.log(elementAndPositionList[i].elementName); element.css( key, elementAndPositionList[i].props[key] ); } } } window["reddahApi"].loadCompleted()
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
background-color: #184640;
}
* {
box-sizing: border-box;
position: absolute;
}
.lozenge {
width: 75vh;
height: 75vh;
border-style: solid;
border-color: #fff;
border-width: 2vh;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
background-color: #2b9a9a;
}
.head {
width: 71vh;
height: 71vh;
}
.hair {
width: 45vh;
height: 50vh;
background-color: #5B3914;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -65%);
transform: translate(-50%, -65%);
border-radius: 25vh;
}
.ears {
left: 50%;
top: 57%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 15vh;
width: 55vh;
}
.ears .ear {
background-color: #F4D7CB;
border-radius: 50%;
width: 10vh;
height: 15vh;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
left: 0;
}
.ears .ear::before,
.ears .ear::after {
content: " ";
width: 80%;
height: 80%;
background-color: #DFA59B;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
border-radius: 50%;
}
.ears .ear::after {
width: 50%;
height: 50%;
background-color: #F4D7CB;
left: 50%;
top: 40%;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.ears .ear.ear-right {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
right: 0;
left: auto;
}
.ears .ear.ear-right::after {
left: 10%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.face {
position: relative;
width: 40vh;
height: 60vh;
background-color: #F4D7CB;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 20vh;
border: 2vh solid #5B3914;
}
.sideburns {
left: 50%;
top: 30%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40vh;
height: 14vh;
position: relative;
overflow: hidden;
}
.sideburns .sideburn {
position: absolute;
left: 0;
top: 0;
border-color: transparent;
border-left-color: #5B3914;
border-style: solid;
content: " ";
border-width: 5vh 5vh 10vh;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.sideburns .sideburn-right {
left: auto;
right: 0;
border-left-color: transparent;
border-right-color: #5B3914;
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
.beard {
width: 30vh;
height: 20vh;
background-color: #5B3914;
left: 50%;
top: 60%;
-webkit-transform: translate(-50%, 5vh);
transform: translate(-50%, 5vh);
border-radius: 50%;
overflow: hidden;
}
.mouth {
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -40%);
transform: translate(-50%, -40%);
width: 15vh;
height: 10vh;
background-color: #7D3126;
border-radius: 4vh 4vh 10vh 10vh;
overflow: hidden;
}
.mouth .tongue {
background-color: #D96269;
width: 30vh;
height: 10vh;
border-radius: 50%;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.mouth .teeth {
background-color: #fff;
width: 12vh;
height: 5vh;
left: 50%;
top: -30%;
border-radius: 5vh;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.eyes {
width: 42vh;
height: 10vh;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -40%);
transform: translate(-50%, -40%);
}
.eyes .bridge {
position: absolute;
width: 10vh;
height: 4vh;
content: " ";
border: 1vh solid transparent;
border-top-color: #3A2117;
border-radius: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.eyes .eye {
background-color: rgba(255, 255, 255, 0.4);
width: 40%;
height: 100%;
left: 2.5%;
border-radius: 2vh;
border: 1vh solid #3A2117;
}
.eyes .eye .brow {
border-color: #5B3914;
border-style: solid;
content: " ";
width: 0;
height: 0;
position: absolute;
left: 0;
top: -6vh;
border-top-color: transparent;
border-left-color: transparent;
border-left-width: 14vh;
border-bottom-width: 3vh;
border-top-width: 0;
border-right-width: 0;
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.eyes .eye .pupil {
left: 60%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #3A2117;
width: 3vh;
height: 4vh;
border-radius: 50%;
-webkit-animation: blinker 5s infinite;
animation: blinker 5s infinite;
}
.eyes .eye.eye-right {
left: auto;
right: 2.5%;
}
.eyes .eye.eye-right .brow {
border-right-color: transparent;
border-right-width: 14vh;
border-left-width: 0;
border-left-color: #5B3914;
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
left: auto;
right: 0;
}
.eyes .eye.eye-right .brow::before {
left: 0;
}
.eyes .eye.eye-right .pupil {
left: 40%;
}
.nose {
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
background-color: #F98382;
width: 10vh;
height: 10vh;
border-radius: 5vh;
}
.nose::before {
position: absolute;
content: " ";
border-color: transparent;
border-bottom-color: #F98382;
border-width: 0 4vh 10vh 4vh;
width: 2vh;
height: 0;
border-style: solid;
left: 0%;
top: -5.9vh;
}
.nose::after {
position: absolute;
background-color: #F98382;
content: " ";
width: 2vh;
height: 2vh;
top: -6.8vh;
border-radius: 50% 50% 0 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.quiff {
left: 50%;
top: -4vh;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 20vh;
height: 10vh;
border-radius: 50%;
background-color: #5B3914;
}
@-webkit-keyframes blinker {
0% {
width: 3vh;
height: 4vh;
}
60% {
width: 3vh;
height: 4vh;
}
61% {
width: 5vh;
height: 0.1vh;
}
63% {
width: 3vh;
height: 4vh;
}
90% {
width: 3vh;
height: 4vh;
}
91% {
width: 5vh;
height: 0.1vh;
}
95% {
width: 3vh;
height: 4vh;
}
}
@keyframes blinker {
0% {
width: 3vh;
height: 4vh;
}
60% {
width: 3vh;
height: 4vh;
}
61% {
width: 5vh;
height: 0.1vh;
}
63% {
width: 3vh;
height: 4vh;
}
90% {
width: 3vh;
height: 4vh;
}
91% {
width: 5vh;
height: 0.1vh;
}
95% {
width: 3vh;
height: 4vh;
}
}
submitted 7 years ago ago by 61ff8469a6da4a44abbcb6d1ad8bbd15