Two-faced Bob

Developer
Danny
Size
3,615 Kb
Views
14,168
  1. Two-faced Bob Previews
  2. Two-faced Bob HTML Codes
  3. Two-faced Bob CSS Codes
  4. Two-faced Bob JS Codes

How do I make an two-faced bob?

What is a two-faced bob? How do you make a two-faced bob? This script and codes were developed by Danny on 23 September 2022, Friday.

Two-faced Bob Previews
IQ Test

Two-faced Bob - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Two-faced Bob</title> <meta name="viewport" content="width=device-width, initial-scale=.75"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='bob'> <div class='left-eye'> <div class='eye-lid-top'></div> <div class='eye-lid-bottom'></div> <span></span> </div> <div class='right-eye'> <div class='eye-lid-top'></div> <div class='eye-lid-bottom'></div> <span></span> </div> <div class='mouth'> <div class='tongue'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Two-faced Bob - Script Codes CSS Codes

body { background: #111; color: #aaa; font-family: Courier, monotype;
}
#bob { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
#bob .left-eye, #bob .right-eye { display: inline-block; position: relative; background: #eee; width: 100px; height: 100px; border-radius: 50%; border: 0;
}
#bob .left-eye .eye-lid-top, #bob .right-eye .eye-lid-top { display: block; position: absolute; background: #111; width: 120%; height: 30px; top: -5px; left: -10%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); z-index: 3; -webkit-transition: .2s height; transition: .2s height;
}
#bob .left-eye .eye-lid-bottom, #bob .right-eye .eye-lid-bottom { display: block; position: absolute; background: #111; width: 120%; height: 30px; bottom: -5px; left: -10%; z-index: 3; -webkit-transition: .2s height; transition: .2s height;
}
#bob .left-eye span, #bob .right-eye span { display: block; position: absolute; background: #000; width: 50px; height: 50px; border-radius: 50%; top: 0; left: 0; z-index: 2;
}
#bob .left-eye { margin-right: 10px;
}
#bob .left-eye .eye-lid-top { -webkit-transform: rotate(10deg); transform: rotate(10deg);
}
.mouth { min-width: 45px; min-height: 5px; background: #555; z-index: 4; margin-top: 50px; margin-left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 100%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); overflow: hidden; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.mouth .tongue { background: #462525; width: 30px; height: 20px; margin-left: 50%; margin-top: 70%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); border-top-left-radius: 50%; border-top-right-radius: 100%; border-bottom-right-radius: 0; border-bottom-left-radius: 0; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
#log { position: absolute; bottom: 0; font-size: .7em;
}

Two-faced Bob - Script Codes JS Codes

var expression = function(){	var docX = $(document).width(),	docY = $(document).height();	try {	var percX = ((event.pageX/docX)*50).toFixed(2),	percY = ((event.pageY/docY)*50).toFixed(2);	}	catch(err) { var percX = 25, percY = 10; }	var lidTop = (percY/50)*30-40,	mouthWidth = (percY/50)*70,	mouthHeight = 40-((percY/50)*40),	mouthBorder = 100-(percY*2),	mouthDeg = percY;	$(".left-eye span, .right-eye span").css("top", percY +"%");	$(".left-eye span, .right-eye span").css("left", percX +"%");	$(".eye-lid-top").css("top", lidTop);	$(".eye-lid-bottom").css("bottom", lidTop);	$(".mouth").width(mouthWidth).height(mouthHeight).css({	"border-top-left-radius" : mouthBorder +"%",	"border-top-right-radius" : mouthBorder +"%"	})	if(percY >= 25) {	$("span").css("background", "#000 url('https://media.giphy.com/media/oZYBdbW7TnhEQ/giphy.gif') no-repeat 0 0 / cover");	} else {	$("span").css({	"background" : "#000 url('http://www.raynbow.com/images/twinkle.gif') no-repeat 0 0 / cover",	"background-size" : "100% 70%"	});	}
}
var blink = function(){	$(".eye-lid-top, .eye-lid-bottom").height("100%");	setTimeout(function(){	$(".eye-lid-top, .eye-lid-bottom").height(30);	}, 100);
}
$(document).on("mousemove", expression);
$(document).on("click", blink);
//setInterval(blink, 5000);
expression();
Two-faced Bob - Script Codes
Two-faced Bob - Script Codes
Home Page Home
Developer Danny
Username ExtremelyGinger
Uploaded September 23, 2022
Rating 3
Size 3,615 Kb
Views 14,168
Do you need developer help for Two-faced Bob?

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!

Danny (ExtremelyGinger) Script Codes
Name
The Venn Diagram
Improved Motion Blur
Notify Me
Timed Notifications
Flight Search Button
Simple Domain Placeholder
Dribbble Template
Add To Cart
Default Template
Work In Progress
Create amazing blog posts 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!