Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://7ph.github.io/powerglitch/
Tiny JS library to glitch anything on the web
https://7ph.github.io/powerglitch/
css css-animations gifs glitch-art glitch-effect glitched-images glitchify-images glitching javascript library mosh
Last synced: 2 months ago
JSON representation
Tiny JS library to glitch anything on the web
- Host: GitHub
- URL: https://7ph.github.io/powerglitch/
- Owner: 7PH
- License: mit
- Created: 2022-07-19T16:07:14.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-28T11:43:30.000Z (6 months ago)
- Last Synced: 2024-02-29T23:37:31.387Z (4 months ago)
- Topics: css, css-animations, gifs, glitch-art, glitch-effect, glitched-images, glitchify-images, glitching, javascript, library, mosh
- Language: TypeScript
- Homepage: https://7ph.github.io/powerglitch/
- Size: 11.4 MB
- Stars: 696
- Watchers: 4
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-ak - PowerGlitch - Glitch anything on the web (Design Tools / CSS)
README
PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to glitch anything on the web, without using a canvas. It weights less than 2kb minified and gzipped.
Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/playground) 😊
Like this project? Give a star 🌟
## Getting started
1. Install PowerGlitch using a package manager
```bash
npm i --save powerglitch
# or
yarn add powerglitch
```
or by [importing the web bundle](https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js) in a script tag (or save it locally)
```html
```
2. Find an element to glitch
```html
click me 🤷♂️
Hello World
```
3. Import PowerGlitch using ES6 import
```javascript
import { PowerGlitch } from 'powerglitch'
```
or using ES5 require
```javascript
const PowerGlitch = require('powerglitch').PowerGlitch
```
if you are importing PowerGlitch using a `script` tag, the `PowerGlitch` global variable is automatically available.
4. Glitch the element
```javascript
PowerGlitch.glitch('.glitch')
```
5. That's it, your element is glitched!
6. Check-out the [usage guide](https://7ph.github.io/powerglitch/#/usage) for optimization and usage tips.
## Useful links
Documentation
- Visually try out effects using the [demo](https://7ph.github.io/powerglitch/#/playground).
- Lookup PowerGlitch [home page](https://7ph.github.io/powerglitch/).
- For customization and optimization tips, check the [usage guide](https://7ph.github.io/powerglitch/#/usage).
- Check out the [api documentation](https://7ph.github.io/powerglitch/api-docs/variables/PowerGlitch.html) for reference.
Integrations
- React: [react-powerglitch](https://github.com/7PH/react-powerglitch)
- Vue: [vue-powerglitch](https://github.com/7PH/vue-powerglitch)
## Contributing
Having trouble? Found a bug? Want to contribute? Any kind of contribution is welcome. If you have any questions, please open an issue or create a pull request.