https://github.com/steinathan/noisedot

Noise is a library that makes it easy to add `noise texture` to your web apps
https://github.com/steinathan/noisedot

Last synced: 10 months ago
JSON representation

Noise is a library that makes it easy to add `noise texture` to your web apps

• Host: GitHub
• URL: https://github.com/steinathan/noisedot
• Owner: steinathan
• License: mit
• Created: 2019-06-04T10:12:54.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-10-25T10:05:54.000Z (over 2 years ago)
• Last Synced: 2025-04-12T02:38:39.919Z (about 1 year ago)
• Language: JavaScript
• Size: 390 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# noisedot

> noisedot is a library that makes it easy to add `noise texture` to your web apps

With `noisedot` you can customize noisedot effects on your webpage, it has customizable options that makes it easy to generate noisedot effect on your site, the main noisedot is just css3 key-frame animation and many noisedot pngs

> TIP => You can also mix this script along side with typed.js to create a very fancyfull webpage, please check the `/dev/index.html` for relative examples

## Installation

```html

```

## Starting noisedot

In your script path or html

```js

noisedot(element [, options])

```

Where element is your html selector entity eg `#noisedot` or `.noisedot`

### Example

```html

  

    

    

    

    Example noisedot | example.com

    

  

  

    


      
Hello World

      This is a reactive link

    


    

      .container {

        position: absoulte;

        z-index: 100 !important;

      }

    

    

    

      noisedot("#noisedot", {

        animate: true,

        patternWidth: 100,

        patternHeight: 100,

        grainOpacity: 0.1,

        grainDensity: 1,

        grainWidth: 1,

        grainHeight: 1,

        grainChaos: 0.5,

        grainSpeed: 20,

      });

    

  

```

## Things to note

> When mounted every link is not reactive, you'll have to manually specify your `elements` `z-index`

Thanks for using this script :)

### TODO

- Add test

- Add global css rules

- etc?