BlurJS is a lightweight JavaScript library for creating blurred effects on HTML elements. Easily integrate blurred elements into your web projects with simple HTML attributes.
Pointer events and user selection is now available through BlurJS parameters. You can trigger animation effects dynamically using the new blur-interaction parameter. This will enable you to make custom interactions using very little effort.
- Moved the for loop to loop per element, improving stability and performance.
- Created implementations for interactions with blur elements using the
blur-interactionattribute. - Updated the code to also have attributes for controlling pointer events and user selection.
You can include BlurJS in your project by downloading it from this repository and linking it to your HTML file. Alternatively, use the CDN link for faster loading:
Minified Version
<script src="https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.min.js"></script>Normal Version
<script src="https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.js"></script>Important Note: BlurJS should be placed in the body element of your HTML file, after all the blur elements, not in the head element.
You can use BlurJS in an HTML file. It will automatically detect all elements with a class of blur.
Please note that the parent element in which the blur is placed must have it's position set to relative.
There are several available properties that come with BlurJS, these include (include as attributes in the element, see example below):
blur-width: Sets the width of the blur.default 50pxblur-height: Sets the height of the blur.default 50pxblur-amount: Sets the amount of blur.default 25pxblur-background: Sets the color or background of the blur (gradients can also be used).default redblur-z-index: Sets the Z Index of the blur.default 99blur-top: Positions the blur from the top.no default assignedblur-left: Positions the blur from the left.no default assignedblur-right: Positions the blur from the right.no default assignedblur-bottom: Positions the blur from the bottom.no default assignedblur-border-radius: Changes the blur border radius.default 5rem 2rem 5rem 50%blur-grain: Must be set totruein order to work. Sets the blur to a grainy texture.no default assignedblur-scale: The value to scale to. If present triggers a scale animation to that value.no default assignedblur-scale-duration: Optional duration value for the scale animation.no default assignedblur-scale-repetitions: Optional repetitions value for the scale animation.no default assignedblur-translate-x: The value to translate on the x-axis. If present triggers a translation animation to that value.no default assignedblur-translate-x-duration: Optional duration value for the translation animation.no default assignedblur-translate-x-repetitions: Optional repetitions value for the translation animation.no default assignedblur-translate-y: The value to translate on the y-axis. If present triggers a translation animation to that value.no default assignedblur-translate-y-duration: Optional duration value for the translation animation.no default assignedblur-translate-y-repetitions: Optional repetitions value for the translation animation.no default assignedblur-opacity: The value to animate on the opacity property. If present triggers a opacity animation to that value.no default assignedblur-opacity-duration: Optional duration value for the opacity animation.no default assignedblur-opacity-repetitions: Optional repetitions value for the opacity animation.no default assignedblur-animate: The value to transition to. Transitions from theblur-amountvalue and this value. If present triggers a blur animation to that value.no default assignedblur-animate-duration: Optional duration value for the blur animation.no default assignedblur-animate-repetitions: Optional repetitions value for the blur animation.no default assignedblur-interaction: Optional value for animation triggers, choose fromscroll(triggers animation when in viewport),click(toggles animation state when clicked) orhover(toggles playing state based on hover events).no default assigned
View the official documentation for more information...
Here follows a couple of basic usage examples for BlurJS.
<div class="blur" blur-width="50px" blur-height="50px"><div class="blur" blur-background="#5d17eb"><div class="blur" blur-border-radius="50%">These examples only detail the basic usage of BlurJS, BlurJS is directly connected to CSS properties, which allows for more advanced effects such as gradient blurs, animated blurs, shape blurs, etc. You can also now create animated effects, and interactions, using just the simple BlurJS attributes.
BlurJS is licensed under a modified MIT license, please view the license file for more information.
All contributions are welcome! You can get started by opening a request on Github. Help us make BlurJS better for everyone!