BlurJS Package Documentation

Package documentation for BlurJS, an open-source JavaScript library for creating modern and customizable blurs.

Changelog

• 1.5 (Latest): Added blur-custom attribute for custom CSS.

• 1.4: Improved browser compatibility, performance optimizations, and added more usage examples.

• 1.3: Added animation timing and multiple animation support.

• 1.2: 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:

<script src="https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.min.js"></script>

Normal:

<script src="https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.js"></script>

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 easier to use and more efficient than 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.