Create Dreamy Blur Effects With The BlurJS Library

Category: Javascript | January 18, 2024
Author:Infinitode
Views Total:50 views
Official Page:Go to website
Last Update:January 18, 2024
License:MIT

Preview:

Create Dreamy Blur Effects With The BlurJS Library

Description:

BlurJS is a lightweight JavaScript library that allows you to easily add customizable soft blur effects to your web pages.

It gives you fine-grained control over the blur appearance through CSS-like attributes for setting the blur width, height, strength, color, z-index, positioning, and more.

How to use it:

1. Download the library and add the ‘blur.min.js’ script to the page.

<script src="blur.js"></script>

2. Add a basic blur overlay to the page.

<div class="blur"></div>

3. Customize the blur effect with the following props.

  • blur-width: Width of the blur effect.
  • blur-height: Height of the blur effect.
  • blur-amount: Strength of the blur effect.
  • blur-background: Color (or gradients) of the blur effect.
  • blur-z-index: CSS z-Index of the blur effect.
  • blur-top: Top position.
  • blur-left: Left Position.
  • blur-right: Right Position.
  • blur-bottom: Bottom Position.
  • blur-border-radius: Border radius of the blur effect.
  • blur-grain: Enable grainy texture. no default assigned
  • blur-scale: Scale to this value. If present triggers a scale animation to that value. no default assigned
  • blur-scale-duration: Duration in ms
  • blur-scale-repetitions: The number of repetitions of the scale animation
  • blur-translate-x: Translate on the x-axis.
  • blur-translate-x-duration: Duration in ms
  • blur-translate-x-repetitions: The number of repetitions of the translate animation
  • blur-translate-y: Translate on the y-axis.
  • blur-translate-y-duration: Duration in ms
  • blur-translate-y-repetitions: The number of repetitions of the translate animation
  • blur-opacity: Opacity level
  • blur-opacity-duration: Duration in ms
  • blur-opacity-repetitions: The number of repetitions of the fade animation
  • blur-animate: Transition to this value.
  • blur-animate-duration: Duration in ms
  • blur-animate-repetitions: The number of repetitions of the transition animation
<div 
  class="blur"
  blur-width="50px"
  blur-height="50px"
  blur-amount="25px"
  blur-background="red"
  blur-z-index="99"
  blur-top="0"
  blur-left="0"
  blur-right=""
  blur-bottom=""
  blur-border-radius="5rem 2rem 5rem 50%">
  Default
</div>

Changelog:

01/18/2024

  • Added support for animation
  • Replaced blur-color with blur-background

You Might Be Interested In:


Leave a Reply