1.0.1 • Published 7 months ago
shadify v1.0.1
Shadify
A library for adding a shader wallpaper to the background of your website or any of your divs.
You can find a live example here and you can find the code in the example/
folder.
Usage
Download the latest release and include it into your project.
<script type="text/javascript" src="./Shadify.js"></script>
To add a shader to the background or any other div add data-shader
with a link to a glslsandbox.com shader or to your own shader source file.
<body data-shader="https://glslsandbox.com/e#106611.0">
...
</body>
Additionally you can set data-shader-speed
(1.0 default) and data-shader-quality
(2.0 default) settings. Here an example with the same shader
but at twice the speed and a quarter the quality.
<div data-shader="https://glslsandbox.com/e#106611.0" data-shader-speed="2.0" data-shader-quality="4.0">
....
</div>
Features
- Shaders can directly be loaded from glslsandbox.com
- Support for setting shader quality and speed
- Supports mouse input
- Attributes can be changed using JavaScript at runtime
- Access the shader uniforms using
myDiv.shadify.getUniform(name)
Planned
- Support links from
shadertoy.com
- Improved README.md
- Documentation
- Reuse same shaders
Build library
Run following commands to build this library yourself. You will find the output at dist/
.
git clone https://github.com/danielfvm/Shadify.git
cd Shadify
npm install
npm run build
1.0.1
7 months ago