BlurJS Package Documentation
Package documentation for BlurJS, an open-source JavaScript library for creating modern and customizable blurs.
Changelog
1.2 (Latest): Added interactivity triggers.
1.1: Added support for animations.
1.0: Initial release.
Installation
You can download the full source code from GitHub. Alternatively, you can quickly link BlurJS to your HTML files using a script tag and the CDN. We offer 2 versions of BlurJS through the CDN:
Minified:
Normal:
Please note: You must include BlurJS at the bottom or after all your blur elements in the HTML file, not in head, but in body. BlurJS also requires that all blurs should be of class blur and should be nested inside a parent element with position: relative set to it.
How to use BlurJS
BlurJS will automatically find all elements with class blur and add them to a list. It will then run through the list and apply the HTML attributes of each element to the element's style. This makes it easy to use and very efficient compared to vanilla CSS styles for varied blurs.
Just add the property you want to change to the blur element, it supports the vanilla CSS property values so it is possible to create advanced blurs that use linear-gradient, etc. Check the list of available properties to use for BlurJS. We'll add more properties soon.
Last updated
