Skip to content

Alter provides a simple and immediate way to modify the visual appearance and behavior of one or multiple elements.

Notifications You must be signed in to change notification settings

u-Kuro/alter.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Alter.js

Alter.js is a lightweight JavaScript library for immediate manipulation of CSS styles and animations on one or multiple elements. It provides a simple and intuitive way to dynamically modify the visual appearance and behavior of elements on your web page ( ALTER NPMJS ).

Features

  • Apply custom CSS styles to elements programmatically
  • Initiate CSS animations with specified parameters, including duration and keyframes
  • Supports manipulation of single elements or multiple elements at once

Installation

You can install Alter.js via npm:

npm install @kushii/alter.js

Alternatively, you can include the cdn in your HTML file:

<script src="https://cdn.jsdelivr.net/gh/u-Kuro/alter.js/alter.js"></script>
<script src="https://cdn.jsdelivr.net/gh/u-Kuro/alter.js/alter.min.js"></script>

Usage

To use Alter.js, simply call the alter() function with the target element(s) and the desired parameters. Here's a basic example:

alter('#myElement', {
  keyframes: [
    { opacity: '1' },
    { opacity: '0' }
  ],
  duration: 200,
  easing: 'ease',
  callback: () => {
    Object.assign(element.style, { opacity: 0, display: 'none' });
  }
});

You can also apply styles to multiple Elements:

const elements = document.getElementByClassName('.myElements');

alter(elements, {
  styles: {
    color: 'white',
    backgroundColor: 'black'
  }
});

About

Alter provides a simple and immediate way to modify the visual appearance and behavior of one or multiple elements.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published