animate HP canvas with css transforms
switched the hp canvas from setting position to a css transform i also added a lil fade in to the choice buttons here, makes it look less janky because they dont pop in and out of reality as much
This commit is contained in:
parent
35495207c7
commit
4f7d5209b9
|
@ -330,11 +330,7 @@ Game.WORDS_HEIGHT_BOTTOM = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// "Instant mode" was only used for clearing... so lets just do it when it's clear?
|
// "Instant mode" was only used for clearing... so lets just do it when it's clear?
|
||||||
if(Game.wordsDOM.children.length == 0){
|
if(Game.wordsDOM.children.length == 0) flushElementTransitions(Game.wordsDOM);
|
||||||
Game.wordsDOM.classList.add("clear_transition");
|
|
||||||
Game.wordsDOM.clientHeight;
|
|
||||||
Game.wordsDOM.classList.remove("clear_transition");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Also, move the click_to_advance DOM
|
// Also, move the click_to_advance DOM
|
||||||
$('#click_to_advance').style.transform = `translateY(${Math.round(advanceTextPosition)}px)`;
|
$('#click_to_advance').style.transform = `translateY(${Math.round(advanceTextPosition)}px)`;
|
||||||
|
|
|
@ -38,16 +38,11 @@ function HitPoints(){
|
||||||
|
|
||||||
// Show/hide
|
// Show/hide
|
||||||
self.show = function(){
|
self.show = function(){
|
||||||
self.dom.style.top = "0px";
|
self.dom.classList.add('show');
|
||||||
};
|
};
|
||||||
self.hide = function(instant){
|
self.hide = function(instant){
|
||||||
if(instant){
|
self.dom.classList.remove('show');
|
||||||
self.dom.style.display = "none";
|
if(instant) flushElementTransitions(self.dom);
|
||||||
setTimeout(function(){
|
|
||||||
self.dom.style.display = "block";
|
|
||||||
},2000);
|
|
||||||
}
|
|
||||||
self.dom.style.top = "-100px";
|
|
||||||
};
|
};
|
||||||
subscribe("hp_show", self.show);
|
subscribe("hp_show", self.show);
|
||||||
subscribe("hp_hide", self.hide);
|
subscribe("hp_hide", self.hide);
|
||||||
|
|
|
@ -4,4 +4,12 @@ Math.TAU = Math.PI*2;
|
||||||
// The poor man's jQuery
|
// The poor man's jQuery
|
||||||
function $(query){
|
function $(query){
|
||||||
return document.querySelector(query);
|
return document.querySelector(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flush an element's transitions
|
||||||
|
function flushElementTransitions(element){
|
||||||
|
if(typeof element == "string") element = $(element);
|
||||||
|
element.classList.add('clear_transition')
|
||||||
|
element.clientHeight;
|
||||||
|
element.classList.remove('clear_transition');
|
||||||
}
|
}
|
|
@ -56,6 +56,10 @@ MAIN GAME
|
||||||
|
|
||||||
******************************************************************************************************/
|
******************************************************************************************************/
|
||||||
|
|
||||||
|
.clear_transition {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
#game_container{
|
#game_container{
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -72,9 +76,6 @@ MAIN GAME
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: transform 0.5s;
|
transition: transform 0.5s;
|
||||||
}
|
}
|
||||||
#game_words.clear_transition {
|
|
||||||
transition: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#game_words, #game_hp, #click_to_advance{
|
#game_words, #game_hp, #click_to_advance{
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -983,22 +984,14 @@ DIALOGUEZ
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
/* Spring OUT only */
|
/* TODO: Add vendor prefixes again, just removed them while working on css animation stuff [Spacie] */
|
||||||
-webkit-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */
|
transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390), opacity 300ms ease-in-out;
|
||||||
-webkit-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
|
||||||
-moz-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
|
||||||
-o-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
|
||||||
transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */
|
|
||||||
|
|
||||||
-webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */
|
|
||||||
-webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
|
||||||
-moz-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
|
||||||
-o-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
|
||||||
transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */
|
|
||||||
}
|
}
|
||||||
#game_choices > div.hidden {
|
#game_choices > div.hidden {
|
||||||
transform: translateY(150px);
|
transform: translateY(150px);
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
#game_choices > div > * {
|
#game_choices > div > * {
|
||||||
pointer-events: none; /* so italics and stuff doesn't trigger sound */
|
pointer-events: none; /* so italics and stuff doesn't trigger sound */
|
||||||
|
@ -1070,11 +1063,14 @@ canvas{
|
||||||
top:0; left:0;
|
top:0; left:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game_hp{
|
#game_hp {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 360px;
|
width: 360px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
top:-100px;
|
transition: transform 0.5s ease-in-out;
|
||||||
left:0;
|
transform: translateY(-100px);
|
||||||
transition: top 0.5s ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#game_hp.show {
|
||||||
|
transform: none;
|
||||||
|
}
|
Loading…
Reference in New Issue