Permalink
Browse files

Lessons Animations

  • Loading branch information...
myubi committed Aug 18, 2016
1 parent 8c5b2f9 commit f7c9527fff087dcf85ae52c1cd2c2487f05f4ba3
View
@@ -0,0 +1,230 @@
.spriteAnimation-housework {
min-width: 40px;
height: 80px;
animation: houseworkAnim .9s steps(4) infinite;
position: relative;
left: 50px;
top: 34px;
display: inline-block;
}
@keyframes houseworkAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-babysitter {
min-width: 40px;
max-height: 80px;
min-height: 57px;
animation: babysitterAnim .9s steps(4) infinite;
position: relative;
left: 50px;
top: 58px;
display: inline-block;
}
@keyframes babysitterAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-bar {
min-width: 40px;
height: 80px;
animation: barAnim .9s steps(4) infinite;
position: relative;
left: 50px;
top: 34px;
display: inline-block;
}
@keyframes barAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-dance {
min-width: 40px;
max-height: 80px;
min-height: 61px;
animation: danceAnim .9s steps(4) infinite;
position: relative;
left: 130px;
top: 54px;
display: inline-block;
}
@keyframes danceAnim {
from { background-position: 0px; }
to {
background-position: -163px;
}
}
.spriteAnimation-fencing {
min-width: 40px;
height: 73px;
animation: fencingAnim .9s steps(4) infinite;
position: relative;
left: 130px;
top: 40px;
display: inline-block;
}
@keyframes fencingAnim {
from { background-position: 0px; }
to {
background-position: -163px;
}
}
.spriteAnimation-fighting {
min-width: 40px;
height: 52px;
animation: fightingAnim .9s steps(3) infinite;
position: relative;
left: 50px;
top: 63px;
display: inline-block;
}
@keyframes fightingAnim {
from { background-position: 0px; }
to {
background-position: -118px;
}
}
.spriteAnimation-magic {
min-width: 40px;
height: 80px;
animation: magicAnim .9s steps(8) infinite;
position: relative;
left: 90px;
top: 34px;
display: inline-block;
}
@keyframes magicAnim {
from { background-position: 0px; }
to {
background-position: -328px;
}
}
.spriteAnimation-painting {
min-width: 40px;
height: 50px;
animation: paintingAnim .9s steps(2) infinite;
position: relative;
left: -130px;
top: 64px;
display: inline-block;
}
@keyframes paintingAnim {
from { background-position: 0px; }
to {
background-position: -78px;
}
}
.spriteAnimation-poetry {
min-width: 40px;
height: 60px;
animation: poetryAnim .9s steps(4) infinite;
position: relative;
left: 50px;
top: 54px;
display: inline-block;
}
@keyframes poetryAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-protocol {
min-width: 40px;
height: 80px;
animation: protocolAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
display: inline-block;
}
@keyframes protocolAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-strategy {
min-width: 40px;
height: 80px;
animation: strategyAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
display: inline-block;
}
@keyframes strategyAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-science {
min-width: 40px;
height: 80px;
animation: scienceAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
display: inline-block;
}
@keyframes scienceAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
.spriteAnimation-theology {
min-width: 40px;
height: 80px;
animation: theologyAnim .9s steps(2) infinite;
position: relative;
left: 50px;
top: 34px;
display: inline-block;
}
@keyframes theologyAnim {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
View
@@ -191,23 +191,18 @@ display: inline-block;
display: inline-block;
}
#jobScenarioContainer {
#scenarioContainer {
display: none;
}
#jobScenario {
#scenario {
background-repeat: no-repeat;
display: inline-block;
width: 320px;
height: 128px;
}
.jobAnimation {
width: 40px;
height: 80px;
margin-top: 38px;
animation: play .9s steps(4) infinite;
}
#notifications {
background-image: url('../img/background-pattern.png');
@@ -218,13 +213,7 @@ display: inline-block;
}
@keyframes play {
from { background-position: 0px; }
to {
background-position: -163px;
transform: translateX(20px);
}
}
@media screen and (min-width:600px) {
.container {
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -689,23 +689,23 @@ function addIconToCalendar(type, icon){
}
function scheduleAnimation(type, value){
var animationContainer = document.getElementById("jobScenarioContainer");
var animationContainer = document.getElementById("scenarioContainer");
fadeIn(animationContainer, "inline-block");
document.getElementById('jobScenario').style.backgroundImage = "url('assets/img/" + type + "/scenario/" + value + ".png')";
document.getElementById('jobSprite').style.backgroundImage = "url('assets/img/" + type + "/sprites/" + value + "/good-animation-01.png')";
document.getElementById("jobSprite").className += "jobAnimation";
document.getElementById('scenario').style.backgroundImage = "url('assets/img/" + type + "/scenario/" + value + ".png')";
document.getElementById('animSprite').style.backgroundImage = "url('assets/img/" + type + "/sprites/" + value + "/good-animation-01.png')";
document.getElementById("animSprite").className += "spriteAnimation-" + value;
setTimeout(clearAnimation, 3000);
}
function clearAnimation(){
var animationContainer = document.getElementById("jobScenarioContainer");
var animationContainer = document.getElementById("scenarioContainer");
fadeOut(animationContainer);
document.getElementById('jobScenario').removeAttribute("style");
document.getElementById('jobSprite').removeAttribute("style");
document.getElementById("jobSprite").className = document.getElementById("jobSprite").className.replace( /(?:^|\s)jobAnimation(?!\S)/g , '' );
document.getElementById('scenario').removeAttribute("style");
document.getElementById('animSprite').removeAttribute("style");
document.getElementById("animSprite").className = "";
//document.getElementById("jobScenarioContainer").className = document.getElementById("princess").className.replace( /(?:^|\s)talk-box(?!\S)/g , '' );
}
View
@@ -2,6 +2,7 @@
<head>
<title>Princess Clicker</title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<link href="assets/css/animations.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
@@ -57,9 +58,9 @@
<div id="notifications">
</div>
<div id="jobScenarioContainer" class="talk-box">
<div id="jobScenario">
<div id="jobSprite">
<div id="scenarioContainer" class="talk-box">
<div id="scenario">
<div id="animSprite">
</div>
</div>
</div>

0 comments on commit f7c9527

Please sign in to comment.