noisedot
v1.0.1
Published
> noisedot is a library that makes it easy to add `noise texture` to your web apps
Downloads
7
Maintainers
navicsteinReadme
noisedot
noisedot is a library that makes it easy to add
noise textureto 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.htmlfor relative examples
Installation
<script src="https://unpkg.com/[email protected]/dist/noisedot.umd"></script>Starting noisedot
In your script path or html
noisedot(element [, options])Where element is your html selector entity eg #noisedot or .noisedot
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Example noisedot | example.com</title>
<script src="https://unpkg.com/[email protected]/dist/noisedot.umd"></script>
</head>
<body id="noisedot">
<div id="main">
<h3>Hello World</h3>
<a href="//gitlab.com/navicstein">This is a reactive link</a>
</div>
<style>
.container {
position: absoulte;
z-index: 100 !important;
}
</style>
<!-- initialize noisedot here -->
<script>
noisedot("#noisedot", {
animate: true,
patternWidth: 100,
patternHeight: 100,
grainOpacity: 0.1,
grainDensity: 1,
grainWidth: 1,
grainHeight: 1,
grainChaos: 0.5,
grainSpeed: 20,
});
</script>
</body>
</html>Things to note
When mounted every link is not reactive, you'll have to manually specify your
elementsz-index
Thanks for using this script :)
TODO
- Add test
- Add global css rules
- etc?