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

Char animation

Browse Source
This commit is contained in:
Paweł Kawczyński 2017-12-12 17:54:44 +01:00
parent 1a401d10be
commit 1e4ea20cc9
12 changed files with 156 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file → Executable file
View File

Binary file not shown.

0
._.DS_Store Normal file → Executable file
View File

0
LICENSE Normal file → Executable file
View File

0
README.md Normal file → Executable file
View File

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

@ -1,10 +1,10 @@
/*@font-face {
font-family: headersFont;
src: url(fonts/ARCADE.TTF);
}*/
*{ *{
1rem = 16px; 1rem = 16px;
} }
@font-face {
font-family: headersFont;
src: url(/fonts/monaco.ttf);
}
/*-----------------------Icon CSS high-resolution-------------------------------------*/ /*-----------------------Icon CSS high-resolution-------------------------------------*/
/*-----------------------Character CSS high-resolution--------------------------------*/ /*-----------------------Character CSS high-resolution--------------------------------*/
@ -94,7 +94,7 @@ html {
border-radius: 50%; border-radius: 50%;
background-color: #000000; background-color: #000000;
} }
/*-----------------------Animate pupil--------------------------------*/
#char-pupil-left { #char-pupil-left {
position: absolute; position: absolute;
top: 0.1rem; top: 0.1rem;
@ -104,7 +104,28 @@ html {
border-radius: 50%; border-radius: 50%;
background-color: #ffffff; background-color: #ffffff;
} }
#char-pupil-left-move{
position: absolute;
top: 0.1rem;
left: -0.02rem;
width: 0.2rem;
height: 0.2rem;
border-radius: 50%;
background-color: #ffffff;
animation-name: pupil-move;
animation-duration: 0.2s;
}
@keyframes pupil-move{
0%{
left: 0.1rem;
}
50%{
left: 0rem;
}
100%{
left: -0.02rem;
}
}
#char-eye-right { #char-eye-right {
position: absolute; position: absolute;
top: 1.6rem; top: 1.6rem;
@ -124,7 +145,18 @@ html {
border-radius: 50%; border-radius: 50%;
background-color: #ffffff; background-color: #ffffff;
} }
#char-pupil-right-move{
position: absolute;
top: 0.1rem;
left: -0.02rem;
width: 0.2rem;
height: 0.2rem;
border-radius: 50%;
background-color: #ffffff;
animation-name: pupil-move;
animation-duration: 0.2s;
}
/*-----------------------------------------------------------------*/
#char-mouth { #char-mouth {
position: absolute; position: absolute;
top: 2.2rem; top: 2.2rem;
@ -168,7 +200,7 @@ html {
border-radius: 1rem; border-radius: 1rem;
background-color: #632e90; background-color: #632e90;
} }
/*-----------------------Move Up Arms Animation--------------------------------*/
#char-arm-left { #char-arm-left {
position: absolute; position: absolute;
top: 0.2rem; top: 0.2rem;
@ -180,7 +212,30 @@ html {
transform: rotate(310deg); transform: rotate(310deg);
z-index: 1; z-index: 1;
} }
#char-arm-left-up {
position: absolute;
top: 0.2rem;
left: -0.3rem;
width: 0.5rem;
height: 1.5rem;
border-radius: 0.5rem 0.5rem;
background-color: #632e90;
transform: rotate(310deg);
animation-name: arm-left-move-up;
animation-duration: 0.2s;
z-index: 1;
}
@keyframes arm-left-move-up{
0%{
transform: rotate(310deg);
}
50%{
transform: rotate(250deg);
}
100%{
transform: rotate(310deg)
}
}
#char-arm-right { #char-arm-right {
position: absolute; position: absolute;
top: 0.2rem; top: 0.2rem;
@ -191,6 +246,30 @@ html {
background-color: #632e90; background-color: #632e90;
transform: rotate(50deg); transform: rotate(50deg);
} }
#char-arm-right-up {
position: absolute;
top: 0.2rem;
left: 3rem;
width: 0.5rem;
height: 1.5rem;
border-radius: 0.5rem 0.5rem;
background-color: #632e90;
transform: rotate(50deg);
animation-name: arm-right-move-up;
animation-duration: 0.2s;
}
@keyframes arm-right-move-up{
0%{
transform: rotate(50deg);
}
50%{
transform: rotate(110deg);
}
100%{
transform: rotate(50deg)
}
}
/*---------------------------------------------------------------------------*/
#char-forearm-left { #char-forearm-left {
position: absolute; position: absolute;
@ -226,7 +305,7 @@ html {
border-radius: 0.4rem 0.4rem; border-radius: 0.4rem 0.4rem;
background-color: #e31e5e; background-color: #e31e5e;
} }
/*-----------------------Move Left Animation--------------------------------*/
#char-pants-left { #char-pants-left {
position: absolute; position: absolute;
top: 0rem; top: 0rem;
@ -237,14 +316,31 @@ html {
background-color: #e31e5e; background-color: #e31e5e;
transform: rotate(0deg); transform: rotate(0deg);
} }
@keyframes animation-move-left{ #move-left {
position: absolute;
top: 0rem;
left: 0rem;
width: 1.25rem;
height: 2rem;
border-radius: 0.4rem 0.4rem;
background-color: #e31e5e;
transform: rotate(0deg);
animation-name: move-left;
animation-duration: 0.2s;
}
@keyframes move-left{
0%{ 0%{
transform: rotate(0deg);
}
50%{
transform: rotate(30deg); transform: rotate(30deg);
} }
100%{ 100%{
transform: rotate(0deg); transform: rotate(0deg)
} }
} }
/*---------------------------------------------------------------------------*/
/*-----------------------Move Right Animation--------------------------------*/
#char-pants-right { #char-pants-right {
position: absolute; position: absolute;
@ -255,7 +351,30 @@ html {
border-radius: 0.4rem 0.4rem; border-radius: 0.4rem 0.4rem;
background-color: #e31e5e; background-color: #e31e5e;
} }
#move-right {
position: absolute;
top: 0rem;
left: 1.75rem;
width: 1.25rem;
height: 2rem;
border-radius: 0.4rem 0.4rem;
background-color: #e31e5e;
transform: rotate(0deg);
animation-name: move-right;
animation-duration: 0.2s;
}
@keyframes move-right{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-30deg);
}
100%{
transform: rotate(0deg)
}
}
/*---------------------------------------------------------------------------*/
#char-leg-left { #char-leg-left {
position: absolute; position: absolute;
top: 2rem; top: 2rem;

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

BIN
fonts/monaco.ttf Executable file
View File

Binary file not shown.

0
icons/.DS_Store vendored Normal file → Executable file
View File

0
icons/._.DS_Store Normal file → Executable file
View File

0
index.html Normal file → Executable file
View File

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

@ -2,32 +2,48 @@ $(document).ready(function() {
console.log("ready"); console.log("ready");
$(document).on('keydown', function(e){ $(document).on('keydown', function(e){
if(e.which == 37){ if(e.which == 37){
$("#move-left").attr('id','char-pants-left');
$("#char-arm-left-up").attr('id','char-arm-left');
$("#char-arm-right-up").attr('id','char-arm-right');
$("#char-container").css({ $("#char-container").css({
'left': '-=2rem', 'left': '-=2rem',
}) })
$("#char-pants-left").css({ $("#char-pants-left").attr('id','move-left');
'animation-name': 'animation-move-left', $("#char-pupil-left").attr('id','char-pupil-left-move');
'animation-duration': '0.2s', $("#char-pupil-right").attr('id','char-pupil-right-move');
'animation-name': '', $("#char-arm-left").attr('id','char-arm-left-up');
'animation-duration': '', $("#char-arm-right").attr('id','char-arm-right-up');
})
} }
if(e.which == 38){ if(e.which == 38){
$("#char-arm-left-up").attr('id','char-arm-left');
$("#char-arm-right-up").attr('id','char-arm-right');
$("#char-container").css({ $("#char-container").css({
'top': '-=2rem', 'top': '-=2rem',
}) })
$("#char-arm-left").attr('id','char-arm-left-up');
$("#char-arm-right").attr('id','char-arm-right-up');
} }
if(e.which == 39){ if(e.which == 39){
$("#move-right").attr('id','char-pants-right');
$("#char-arm-left-up").attr('id','char-arm-left');
$("#char-arm-right-up").attr('id','char-arm-right');
$("#char-container").css({ $("#char-container").css({
'left': '+=2rem', 'left': '+=2rem',
}) })
$("#char-pants-right").css({ $("#char-pants-right").attr('id','move-right');
}) $("#char-pupil-left-move").attr('id','char-pupil-left');
$("#char-pupil-right-move").attr('id','char-pupil-right');
$("#char-arm-left").attr('id','char-arm-left-up');
$("#char-arm-right").attr('id','char-arm-right-up');
} }
if(e.which == 40){ if(e.which == 40){
$("#char-arm-left-up").attr('id','char-arm-left');
$("#char-arm-right-up").attr('id','char-arm-right');
$("#char-container").css({ $("#char-container").css({
'top': '+=2rem', 'top': '+=2rem',
}) })
$("#char-arm-left").attr('id','char-arm-left-up');
$("#char-arm-right").attr('id','char-arm-right-up');
} }
}) })
}); });

0
test.txt Normal file → Executable file
View File