0
128
VistasCrear una animación +1 cuando se hace clic en el botón
Estaba haciendo un juego en el que obtienes dinero por hacer clic en un botón. Aquí hay una parte de esto:
var money = 0; var currentMoney = document.getElementById("currentMoney"); function addOne() { money++; currentMoney.innerHTML = money; } <button onclick="addOne();">+1$</button> <p>Money: <b id="currentMoney">0</b>$</p>Más tarde, estaba buscando en Internet y encontré un sitio web llamado Cookie Clicker y vi esta animación que cuando haces clic en la cookie, un +1 sube y se desvanece (no es tan importante que el número suba donde el mouse es para mi ejemplo):
Intenté hacer esta animación pero no sé cómo puedo hacer que suba:
var money = 0; var currentMoney = document.getElementById("currentMoney"); function addOne() { money++; currentMoney.innerHTML = money; var moneyAnimation = document.createElement("p"); moneyAnimation.innerHTML = "+1"; document.getElementById("moneyAnimation").appendChild(moneyAnimation); } * { margin: 0; padding: 0; } #moneyAnimation { height: 500px; border: 1px solid; width: 200px; float: right; } <button onclick="addOne();">+1$</button> <p>Money: <b id="currentMoney">0</b>$</p> <div id="moneyAnimation"></div>¡Gracias de antemano, que tengas un buen día! :)
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Recomendaría usar animación CSS como se muestra a continuación. Puede leer más sobre la animación de fotogramas clave aquí y aquí
var money = 0; var currentMoney = document.getElementById("currentMoney"); function addOne() { money++; currentMoney.innerHTML = money; var moneyAnimation = document.createElement("p"); moneyAnimation.innerHTML = "+1"; document.getElementById("moneyAnimation").appendChild(moneyAnimation); moneyAnimation.classList.add("moneyAnimation"); // Add the class that animates } * { margin: 0; padding: 0; } #moneyAnimation { height: 500px; border: 1px solid; width: 200px; float: right; position: relative; /* Added */ } @keyframes moneyAnimation { 0% { opacity: 1; top: 0; } 100% { opacity: 0; top: -50px; } } .moneyAnimation { animation: moneyAnimation 1s forwards; position: absolute; } <button onclick="addOne();">+1$</button> <p>Money: <b id="currentMoney">0</b>$</p> <div id="moneyAnimation"></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta