Close Menu

ripple

Ripple is a powerful library that enables developers to add interactive ripple effect animations to their user interfaces. With its intuitive API and easy-to-use components, creating engaging ripple animations has never been easier.

Getting Started

  1. Install Ripple by running the following command in your terminal:
    2. npm install ripple
  2. Import the necessary modules in your project:
    3. import { RippleButton, RippleContainer } from 'ripple';
  3. Create a new instance of the RippleContainer component and add it to your application:
    4. const container = new RippleContainer();
document.body.appendChild(container.render());
  4. Use the RippleButton component to render buttons with ripple animation:
    5. const button = new RippleButton('Click Me!');
container.addChild(button.render());

Customization

Ripple provides a variety of customization options to enhance the visual appearance of your animations. The following attributes can be applied to the RippleButton component:

  • color: Specifies the color of the ripple effect. This can be a valid CSS color value, such as ‘red’ or ‘#00ff00’.
  • duration: Defines the duration of the ripple animation in milliseconds.
  • radius: Sets the initial radius of the ripple effect. Higher values will result in larger ripples.

Example usage:

const button = new RippleButton('Click Me!');
button.color = 'blue';
button.duration = 800;
button.radius = 50;
container.addChild(button.render());

Advanced Features

Nested Ripples

Ripple allows you to nest buttons within other elements, such as divs or spans, to create complex ripple animations. Simply add the RippleButton component as a child of the desired parent element.

const parentElement = document.querySelector('.parent');
const nestedButton = new RippleButton('Nested Button');
parentElement.appendChild(nestedButton.render());

Event Handling

Ripple provides event listeners to handle user interactions and trigger custom actions or animations. You can attach event handlers to the RippleButton component using the following methods:

  • onClick: Triggered when the ripple button is clicked.
  • onMouseEnter: Fired when the mouse cursor enters the button area.
  • onMouseLeave: Invoked when the mouse cursor leaves the button area.

Example usage:

const button = new RippleButton('Click Me!');
button.onClick = () => {
    console.log('Button clicked!');
};
container.addChild(button.render());

Conclusion

Ripple is a versatile library that enables developers to create stunning ripple animations for their web applications. From basic usage to advanced customization and event handling, Ripple provides a comprehensive set of features to enhance your user interfaces. Explore the possibilities and start adding engaging ripple effects with ease!