Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Add a dynamic icon while listening to music

To start and simplify the description, I will give a video fragment. (note the 3 moving columns)

enter image description here

I would like to make such a dynamic icon (at the moment when the user is listening to music) on my website using tailwind.

I didn’t find anything like it on the Internet. Perhaps you can help with a link with a similar example or code, I will be very grateful

Tags:

2

Answers


  1. 0

    I’ve made an example using tailwind as you requested here:

    <div class="relative flex h-16 w-16 items-center justify-center overflow-hidden rounded-lg bg-red-500">
  <!-- Icon (e.g., a microphone) -->
  <div class="absolute inset-0 flex items-center justify-center">
    <!-- Replace with your actual icon -->
    <svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <!-- Your icon's SVG path goes here -->
    </svg>
  </div>
  <!-- Overlay with bars -->
  <div class="absolute inset-x-0 top-1/2 h-8 w-full rounded-b-lg bg-black bg-opacity-50">
    <!-- Flex container to center the bars vertically -->
    <div class="flex h-full items-center justify-center">
      <div class="animate-wave mx-0.5 h-3 w-1 rounded bg-white" style="animation-delay: -0.4s"></div>
      <div class="animate-wave mx-0.5 h-4 w-1 rounded bg-white" style="animation-delay: -0.2s"></div>
      <div class="animate-wave mx-0.5 h-5 w-1 rounded bg-white"></div>
    </div>
  </div>
</div>

    You can also have a look here: https://play.tailwindcss.com/0HqXjgPYVR

    @keyframes wave {
  0%,
  100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1.1);
  }
}

/* Utility classes for the animation */
.animate-wave {
  animation: wave 1s infinite ease-in-out;
}
    Login or Signup to reply.
  2. 0

    You’d need to create custom component for that if you’re only looking for tailwind solution (Shown below). But you could also use either a gif or use a library like a https://lordicon.com/docs/library-tour

    full tailwind solution:

    demo: https://play.tailwindcss.com/bdAMP23kQS?file=config

    component

    <div class="flex h-8 w-8 justify-between">
    <div class="h-full w-2">
      <div class="animate-shrink h-full w-2 rounded bg-blue-500"></div>
    </div>
    <div class="h-full w-2">
      <div class="animate-grow h-full w-2 rounded bg-blue-500"></div>
    </div>
    <div class="h-full w-2">
      <div class="animate-shrink h-full w-2 rounded bg-blue-500"></div>
    </div>
  </div>

    config

    export default {
  theme: {
    extend: {
      animation: {
        shrink: 'shrink 1s ease-in-out infinite',
        grow: 'grow 1s ease-in-out infinite',
      },
      keyframes: {
        shrink: {
          '0%, 100%': { transform: 'scaleY(-100%)' },
          '50%': { transform: 'scaleY(-50%)' },
        },
        grow: {
          '0%, 100%': { transform: 'scaleY(50%)' },
          '50%': { transform: 'scaleY(100%)' },
        },
      },
    },
  },
  plugins: [],
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search