A jquery plug-in every day-be a kanban girl 1
Be a Kanban Girl 1
People’s kanban girls are really beautiful, but I don’t have time to look at the interface when I see other people’s live2d, so I start by messing around with what I want, and then I’ll study and study when I’m free on weekends. Of course, I’m now. Kanban girl doesn't have a 3D model at all, so let her move her eyes first.
The effect is as follows
Code part
html,body.rel{
width: 100%;
height: 100%;
}
.kbnbg{
width: 200px;
height: 300px;
position: fixed;
bottom: 0;
}
.kbnbg *{
transition: all 0.2s linear;
}
.kbnbg.left{
left: 0;
}
.kbnbg.right{
right: 0;
}
.kbnbg .body{
background-image: url(../img/body.png);
height: 200px;
width: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 25px;
z-index: 2;
}
.kbnbg .heads{
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
height: 130px;
width: 120px;
top: 0;
left: 40px;
z-index: 3;
position: absolute;
}
.kbnbg .head{
background-image: url(../img/head.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
height: 130px;
width: 120px;
z-index: 3;
position: absolute;
left: 0;
}
.kbnbg .leye{
background-image: url(../img/leye.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
width: 10px;
height: 18px;
position: absolute;
left: 42px;
top: 55px;
z-index: 1;
}
.kbnbg .reye{
background-image: url(../img/reye.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
width: 10px;
height: 18px;
position: absolute;
left: 82px;
top: 58px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做个看板娘</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zgkbn.js"></script>
<link href="css/zgkbn.css" rel="stylesheet" type="text/css" />
<style>
*{
transform:rotateY ;
}
</style>
</head>
<body>
</body>
</html>
<script>
var temp = zgkbn();
temp.load();
var temp2 = zgkbn();
temp2.load('right');
</script>
var zgkbn = function() {
var $id = $("body");
$id.addClass("rel");
var $bg = $("<div class='kbnbg'></div>")
var $body = $("<div class='body'></div>");
var $head = $("<div class='heads'><div class='head'></div></div>");
var $leye = $("<div class='leye'></div>");
var $reye = $("<div class='reye'></div>");
$body.appendTo($bg)
$head.appendTo($bg)
$leye.appendTo($head)
$reye.appendTo($head)
$bg.appendTo($id);
return{
$id:$id,
$bg:$bg,
$body:$body,
$head:$head,
$leye:$leye,
$reye:$reye,
head:{
},//头脑中心
leye:{
},//左眼中心
reye:{
},//右眼中心
dz:[-20,-10,0,20,10],
dir:'left',
load:function(dir){
var that = this;
that.dir=dir==undefined?'left':dir;
that.geto();
that.$bg.addClass(dir)
window.onresize = function(){
//保证中心点不出问题
that.geto();
}
that.$id.mousemove(function(e){
//监控鼠标移动
var temp = {
x:e.clientX,y:e.clientY}
that.headc(temp)
that.leyec(temp)
that.reyec(temp)
})
},
headc:function(res){
var that =this;
},
leyec:function(res){
var that =this;
var tempx = res.x>that.leye.x?that.leye.x0+3:that.leye.x0-4;
that.$leye.css("left",tempx);
},
reyec:function(res){
var that =this;
var tempx = res.x>that.reye.x?that.reye.x0+3:that.reye.x0-4;
that.$reye.css("left",tempx);
},
geto:function(){
var that = this;
var head = that.$head.offset();
var leye = that.$leye.offset();
var reye = that.$reye.offset();
that.head = {
x:head.left+60,y:head.top+65,x0:parseInt(that.$head.css("left").replace("px","")),y0:parseInt(that.$head.css("top").replace("px",""))}
that.leye = {
x:leye.left+5,y:leye.top+9,x0:parseInt(that.$leye.css("left").replace("px","")),y0:parseInt(that.$leye.css("top").replace("px",""))}
that.reye = {
x:reye.left+5,y:reye.top+9,x0:parseInt(that.$reye.css("left").replace("px","")),y0:parseInt(that.$reye.css("top").replace("px",""))}
if(that.dir=='right'){
var w = that.$id.width();
that.head.x = w-that.head.x;
that.leye.x = w-that.leye.x;
that.reye.x = w-that.reye.x;
}
}
}
}
Idea explanation
- Because I still want to use jquery to achieve it, like rendering a 3D-effect kanban girl, I feel a little impossible, so I went directly to find a picture of one of the protagonists of a fan drama I like to live it up, that is, I just put my head, body and eyes. Divide into small pictures
- Then when loading, just put it back according to the original picture. At this time, the picture of the head should cover the picture of the eyes, so that the eyes will not burst.
- Then I realized the dynamic and natural movement of the body at first, but the deformation I gave was all stretched and rotated for a picture, not to mention that the paper man was in a strange state at the time, so I gave up
- Then the eye movement is very simple. At the beginning, I recorded the center distance of the eye and its left and top in the head container, and then monitored the mouse events to determine where the eye should move. At the beginning, I didn’t consider if When the Kanban girl is placed on the right, the right eye is always aiming at the wrong place. After I find the problem, I can directly record the correct center point.
- As for many actions, I have thought of them, but if these actions are not done well, they are very weird. In the end, I will feel broken first~
There is also a 360-degree head rotation...