jyapayne/justbean
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make bean

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2025-02-27 16:28:04 -07:00
commit 1f6e47ba98
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 88 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

51
index.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Bean</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="centered">
<img id="bean" src="bean.svg" alt="Bean" onclick="explodeBeans()">
</div>
<script>
function explodeBeans() {
const container = document.querySelector('.centered');
for (let i = 0; i < 10; i++) {
const newBean = document.createElement('img');
newBean.src = 'bean.svg';
newBean.style.position = 'absolute';
newBean.style.width = '50px';
newBean.style.height = '50px';
newBean.style.transition = 'transform 1s ease-out, opacity 1s ease-out';
newBean.style.opacity = '0';
// Initial position at the center
newBean.style.transform = 'translate(0, 0) scale(0.5)';
container.appendChild(newBean);
// Random position around the original bean
const angle = Math.random() * 2 * Math.PI;
const distance = Math.random() * 100 + 50;
// Trigger the animation
setTimeout(() => {
newBean.style.opacity = '1';
newBean.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(1)`;
}, 0);
// Remove the bean after animation
setTimeout(() => {
newBean.style.opacity = '0';
setTimeout(() => {
container.removeChild(newBean);
}, 1000);
}, 1000);
}
}
</script>
</body>
</html>