s434585/3Dstudy
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Resize character and add jQuery movment

Browse Source
This commit is contained in:
Paweł Kawczyński 2017-12-07 14:00:06 +01:00
parent 31c5a623ef
commit c5938541c0
11 changed files with 143 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Executable file
View File

Binary file not shown.

BIN
._.DS_Store Executable file
View File

Binary file not shown.

0
LICENSE Normal file → Executable file
View File

0
README.md Normal file → Executable file
View File

229
css/style.css Normal file → Executable file
View File

@ -1,11 +1,13 @@
@font-face {
/*@font-face {
font-family: headersFont;
src: url(fonts/ARCADE.TTF);
}
}*/
*{
1rem = 16px;
}
/*-----------------------Icon CSS high-resolution-------------------------------------*/
/*-----------------------Character CSS high-resolution--------------------------------*/
h1 {
font-family: headersFont;
font-size: 100px;
@ -16,18 +18,18 @@ h1 {
}
html {
background-color: cornflowerblue;
background-color: whitesmoke;
}
#char-container {
position: absolute;
top: 20rem;
left: 48rem;
top: 40rem;
left: 55rem;
}
#char-head {
width: 12rem;
height: 9.5rem;
width: 3rem;
height: 3rem;
background-color: #ffc993;
border-radius: 3.125rem 3.125rem;
z-index: 1;
@ -35,10 +37,10 @@ html {
#char-ear-left {
position: absolute;
top: 4rem;
left: -1rem;
width: 1.3rem;
height: 2rem;
top: 1rem;
left: -0.25rem;
width: 0.5rem;
height: 1rem;
border-color: #ffc993;
border-radius: 2.0625rem / 2.625rem;
background-color: #ffc993;
@ -47,10 +49,10 @@ html {
#char-ear-right {
position: absolute;
top: 4rem;
left: 12rem;
width: 1.3rem;
height: 2rem;
top: 1rem;
left: 2.75rem;
width: 0.5rem;
height: 1rem;
border-color: #ffc993;
border-radius: 2.0625rem / 2.625rem;
background-color: #ffc993;
@ -58,76 +60,76 @@ html {
}
#char-hair {
width: 12rem;
height: 3rem;
width: 3rem;
height: 1rem;
background-color: #000000;
border-radius: 2.8125rem 2.8125rem;
}
#char-eyebrown-left {
position: absolute;
top: 5rem;
left: 2.5rem;
top: 1.25rem;
left: 0.5rem;
border-style: solid;
border-width: 0.6rem 0 0 1.5rem;
border-width: 0.3rem 0 0 0.7rem;
border-color: transparent transparent transparent #ca815e;
}
#char-eyebrown-right {
position: absolute;
top: 5rem;
left: 8.5rem;
top: 1.25rem;
left: 1.85rem;
border-style: solid;
border-width: 0 0 0.6rem 1.5rem;
border-width: 0 0 0.3rem 0.7rem;
border-color: transparent transparent #ca815e transparent;
}
#char-eye-left {
position: absolute;
top: 5.5rem;
left: 3.5rem;
width: 1rem;
height: 1rem;
top: 1.6rem;
left: 0.75rem;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background-color: #000000;
}
#char-pupil-left {
position: absolute;
top: 0.25rem;
left: 0.25rem;
width: 0.5rem;
height: 0.5rem;
top: 0.1rem;
left: 0.1rem;
width: 0.2rem;
height: 0.2rem;
border-radius: 50%;
background-color: #ffffff;
}
#char-eye-right {
position: absolute;
top: 5.5rem;
left: 8rem;
width: 1rem;
height: 1rem;
top: 1.6rem;
left: 2rem;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background-color: #000000;
}
#char-pupil-right {
position: absolute;
top: 0.5rem;
left: 0.5rem;
width: 1.25rem;
height: 1.25rem;
top: 0.1rem;
left: 0.1rem;
width: 0.2rem;
height: 0.2rem;
border-radius: 50%;
background-color: #ffffff;
}
#char-mouth {
position: absolute;
top: 14.25rem;
left: 10.25rem;
width: 5rem;
height: 1.875rem;
top: 2.2rem;
left: 1.1rem;
width: 1rem;
height: 0.75rem;
border-radius: 0 0 5rem 5rem;
background-color: #000000;
}
@ -135,44 +137,44 @@ html {
#char-tooth-left {
position: absolute;
top: 0px;
left: 1.5rem;
width: 0.75rem;
height: 0.875rem;
left: 0.15rem;
width: 0.3rem;
height: 0.3rem;
background-color: #ffffff;
}
#char-tooth-right {
position: absolute;
top: 0px;
left: 2.75rem;
width: 0.75rem;
height: 0.875rem;
left: 0.55rem;
width: 0.3rem;
height: 0.3rem;
background-color: #ffffff;
}
#char-main-body {
position: absolute;
width: 25rem;
height: 25rem;
width: 3rem;
height: 3rem;
}
#char-body {
position: absolute;
top: 0rem;
left: 6.875rem;
width: 11.25rem;
height: 12.5rem;
border-radius: 1.25rem;
left: 0.1rem;
width: 3rem;
height: 3rem;
border-radius: 1rem;
background-color: #632e90;
}
#char-arm-left {
position: absolute;
top: 2.5rem;
left: 4.375rem;
width: 3.125rem;
height: 7.75rem;
border-radius: 3.5rem 3.5rem;
top: 0.2rem;
left: -0.3rem;
width: 0.5rem;
height: 1.5rem;
border-radius: 0.5rem 0.5rem;
background-color: #632e90;
transform: rotate(310deg);
z-index: 1;
@ -180,119 +182,122 @@ html {
#char-arm-right {
position: absolute;
top: 2.5rem;
left: 17.5rem;
width: 3.125rem;
height: 7.75rem;
border-radius: 3.5rem 3.5rem;
top: 0.2rem;
left: 3rem;
width: 0.5rem;
height: 1.5rem;
border-radius: 0.5rem 0.5rem;
background-color: #632e90;
transform: rotate(50deg);
}
#char-forearm-left {
position: absolute;
top: -2.5rem;
width: 3.125rem;
height: 5.625rem;
border-radius: 3.5rem 3.5rem;
top: 0rem;
width: 0.5rem;
height: 0.75rem;
border-radius: 0.5rem 0.5rem;
background-color: #ffc993;
}
#char-forearm-right {
position: absolute;
top: -2.5rem;
width: 3.125rem;
height: 5.625rem;
border-radius: 3.5rem 3.5rem;
top: 0rem;
left: 0rem;
width: 0.5rem;
height: 0.75rem;
border-radius: 0.5rem 0.5rem;
background-color: #ffc993;
}
#char-lower {
position: absolute;
top: 2.75rem;
left: 0.1rem;
}
#char-pants-middle {
position: absolute;
width: 10.625rem;
height: 3.5rem;
top: 12.5rem; /*sprawdzic!*/
left: 7.25rem;
border-radius: 0.625rem 0.625rem;
width: 3rem;
height: 1rem;
top: 0rem; /*sprawdzic!*/
left: 0rem;
border-radius: 0.4rem 0.4rem;
background-color: #e31e5e;
}
#char-pants-left {
position: absolute;
top: 12.5rem;
left: 7.125rem;
width: 4.375rem;
height: 6.25rem;
border-radius: 0.625rem 0.625rem;
top: 0rem;
left: 0rem;
width: 1.25rem;
height: 2rem;
border-radius: 0.4rem 0.4rem;
background-color: #e31e5e;
}
#char-pants-right {
position: absolute;
top: 12.5rem;
left: 13.75rem;
width: 4.375rem;
height: 6.25rem;
border-radius: 0.625rem 0.625rem;
top: 0rem;
left: 1.75rem;
width: 1.25rem;
height: 2rem;
border-radius: 0.4rem 0.4rem;
background-color: #e31e5e;
}
#char-leg-left {
position: absolute;
top: 6.25rem;
left: 1rem;
width: 2.75rem;
height: 2.5rem;
top: 2rem;
left: 0.2rem;
width: 0.8rem;
height: 0.8rem;
background-color: #ffc993;
}
#char-leg-right {
position: absolute;
top: 6.25rem;
left: 0.625rem;
width: 2.75rem;
height: 2.5rem;
top: 2rem;
left: 0.2rem;
width: 0.8rem;
height: 0.8rem;
background-color: #ffc993;
}
#char-sock-left {
position: absolute;
top: 8.75rem;
left: 1rem;
width: 2.75rem;
height: 1.5rem;
top: 2.8rem;
left: 0.2rem;
width: 0.8rem;
height: 0.3rem;
background-color: #0072bb;
}
#char-sock-right {
position: absolute;
top: 8.75rem;
left: 0.625rem;
width: 2.75rem;
height: 1.5rem;
top: 2.8rem;
left: 0.2rem;
width: 0.8rem;
height: 0.3rem;
background-color: #0072bb;
}
#char-shoe-left {
position: absolute;
top: 10rem;
left: -1.5rem;
width: 5.25rem;
height: 2.125rem;
top: 3.1rem;
left: -0.4rem;
width: 1.4rem;
height: 0.5rem;
border-radius: 1.5rem 0 0 0;
background-color: #8e8e8e;
}
#char-shoe-right {
position: absolute;
top: 10rem;
left: 0.625rem;
width: 5.25rem;
height: 2.125rem;
top: 3.1rem;
left: 0.2rem;
width: 1.4rem;
height: 0.5rem;
border-radius: 0 1.5rem 0 0;
background-color: #8e8e8e;
}

0
fonts/ARCADE.TTF Normal file → Executable file
View File

BIN
icons/.DS_Store vendored Executable file
View File

Binary file not shown.

BIN
icons/._.DS_Store Executable file
View File

Binary file not shown.

1
index.html Normal file → Executable file
View File

@ -56,6 +56,7 @@
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

25
js/script.js Normal file → Executable file
View File

@ -0,0 +1,25 @@
$(document).ready(function() {
console.log("ready");
$(document).on('keydown', function(e){
if(e.which == 37){
$("#char-container").css({
'left': '-=2rem',
})
}
if(e.which == 38){
$("#char-container").css({
'top': '-=2rem',
})
}
if(e.which == 39){
$("#char-container").css({
'left': '+=2rem',
})
}
if(e.which == 40){
$("#char-container").css({
'top': '+=2rem',
})
}
})
});

0
test.txt Normal file → Executable file
View File