diff --git a/index.html b/index.html index 57476f7..70e9294 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,8 @@ Chef's Hand Rice Meat + Rice mirror + Meat mirror diff --git a/script.js b/script.js index 91c4b75..52db6d5 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,6 @@ let step = 0; function serveFood() { - console.log("click") switch(step) { case 0: document.querySelector('.chef-hand').style.opacity = '1'; @@ -17,9 +16,30 @@ function serveFood() { document.querySelector('.chef-hand').style.opacity = '0'; }, 500); break; + case 2: + document.querySelector('.chef-hand').style.opacity = '1'; + setTimeout(() => { + document.querySelector('.rice-mirror').style.opacity = '1'; + document.querySelector('.chef-hand').style.opacity = '0'; + }, 500); + break; + case 3: + document.querySelector('.chef-hand').style.opacity = '1'; + setTimeout(() => { + document.querySelector('.meat-mirror').style.opacity = '1'; + document.querySelector('.chef-hand').style.opacity = '0'; + }, 500); + break; + case 4: + document.querySelector('.rice').style.opacity = '0'; + document.querySelector('.meat').style.opacity = '0'; + document.querySelector('.rice-mirror').style.opacity = '0'; + document.querySelector('.meat-mirror').style.opacity = '0'; + step = -1; default: step = -1; break; } step++; + console.log(step); } diff --git a/styles.css b/styles.css index db4c0f6..d0e1688 100644 --- a/styles.css +++ b/styles.css @@ -54,6 +54,16 @@ z-index: 3; } +.rice-mirror, .meat-mirror { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scaleX(-1); + opacity: 0; + transition: opacity 0.5s; + z-index: 3; +} + .chef { position: absolute; bottom: 0;