interactive jelly button that jiggles when you click it using canvas in javascript

To create an interactive jelly button that jiggles when clicked, we can use the HTML canvas element and the requestAnimationFrame function in JavaScript. The button can be designed using HTML, CSS, and JavaScript can handle the click event and animation. Here's an example:


<!DOCTYPE html>
<html>
<head>
  <title>Jelly Button Animation</title>
  <style>
    #canvas {
      background-color: #F5F5F5;
    }

    #btn-jelly {
      width: 200px;
      height: 60px;
      margin: 100px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30px;
      border: none;
      background-color: #F44336;
      color: #FFF;
      box-shadow: 0 15px 30px rgba(255, 90, 58, 0.4);
      transition: all 0.3s ease-out;
    }

    #btn-jelly:hover {
      background-color: #FF5722;
    }
  </style>
</head>
<body>
  <button id="btn-jelly" onclick="animateJelly()">Click Me!</button>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    let radius = 20;
    let posX = 150;
    let posY = 150;
    let directionX = 1;
    let directionY = 1;
    let speedX = 2;
    let speedY = 2;
    let jellyActive = false;

    function animateJelly() {
      jellyActive = true;
      posX = canvas.width / 2;
      posY = canvas.height / 2;

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      requestAnimationFrame(jelly);
    }

    function jelly() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw jelly
      ctx.beginPath();
      ctx.arc(posX, posY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = '#FF7575';
      ctx.fill();
      ctx.strokeStyle = '#FF8F8F';
      ctx.lineWidth = 5;
      ctx.stroke();

      // Jelly movement
      if (posX + radius > canvas.width || posX - radius < 0) {
        directionX = -directionX;
      }
      if (posY + radius > canvas.height || posY - radius < 0) {
        directionY = -directionY;
      }
      posX += speedX * directionX;
      posY += speedY * directionY;

      // Stop jelly animation
      if (!jellyActive) {
        return;
      }

      requestAnimationFrame(jelly);
    }
  </script>
</body>
</html>
2034 chars
88 lines

In this code, we create a canvas element and a button with an attached onclick event that triggers the animateJelly function. The canvas size is set to match the window size, and the jelly function is invoked using the requestAnimationFrame method. The jelly function clears the canvas, draws a circle representing the jelly button, adds a stroke, and then moves the position. The jelly function keeps running until the animateJelly function is set to false.

This example is basic, but you can add more features to the animation, such as changing the size or the color of the jelly button depending on the user's interaction or using more complex shapes.

similar javascript code snippets

interactive jelly button that jiggles when you click it in javascript

radial gradient at mouse position in javascript

get color at pointer in javascript

create the animation of many dom elements which are launched from the bottom to top and fall in parabolic motion with the gsap library in javascript

draw circle in javascript

when mouse in element animate from mouse position onward in javascript

create the silhouette of a naked woman in canvas in javascript

make a favicon animation in javascript

square pulse animation in javascript

create the animation of many dom elements which are launched from the bottom to top and fall in parabolic motion in javascript

related categories