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
<script src="https://unpkg.com/noisedot@1.0.0/dist/noisedot.umd"></script>In your script path or html
noisedot(element [, options])Where element is your html selector entity eg #noisedot or .noisedot
<!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/noisedot@1.0.0/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>When mounted every link is not reactive, you'll have to manually specify your
elementsz-index
Thanks for using this script :)
- Add test
- Add global css rules
- etc?