Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/infinitode/blurjs

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.
https://github.com/infinitode/blurjs

blurs blurs-elements easy-to-use html html-attributes javascript javascript-library js lightweight modern-web-design open-source quick-setup

Last synced: about 2 months ago
JSON representation

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.

Host: GitHub
URL: https://github.com/infinitode/blurjs
Owner: Infinitode
License: other
Created: 2024-01-08T08:13:27.000Z (12 months ago)
Default Branch: main
Last Pushed: 2024-02-06T06:33:05.000Z (11 months ago)
Last Synced: 2024-02-06T07:34:58.752Z (11 months ago)
Topics: blurs, blurs-elements, easy-to-use, html, html-attributes, javascript, javascript-library, js, lightweight, modern-web-design, open-source, quick-setup
Homepage: https://infinitode.netlify.app
Size: 30.3 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.MD
- License: LICENSE

Awesome Lists containing this project

README

# BlurJS 1.2

[![GitHub license](https://img.shields.io/badge/license-compliance-green.svg)](https://github.com/infinitode/blurjs/blob/main/LICENSE)
[![GitHub stars](https://img.shields.io/github/stars/infinitode/blurjs.svg)](https://github.com/infinitode/blurjs/stargazers)
[![GitHub issues](https://img.shields.io/github/issues/infinitode/blurjs.svg)](https://github.com/infinitode/blurjs/issues)
[![JSDelivr monthly downloads](https://data.jsdelivr.com/v1/package/gh/Infinitode/BlurJS/badge?style=rounded)](https://www.jsdelivr.com/package/gh/Infinitode/BlurJS)

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.

## Changes in Version 1.2

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.

### Changelog:
1. Moved the for loop to loop per element, improving stability and performance.
2. Created implementations for interactions with blur elements using the `blur-interaction` attribute.
3. Updated the code to also have attributes for controlling pointer events and user selection.

# Getting Started

## Installation

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**
```html

```

**Normal Version**
```html

```

**Important Note:** BlurJS should be placed in the `body` element of your HTML file, after all the blur elements, not in the `head` element.

## How to use BlurJS

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`.*

## Available properties

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 50px`
- `blur-height`: Sets the height of the blur. `default 50px`
- `blur-amount`: Sets the amount of blur. `default 25px`
- `blur-background`: Sets the color or background of the blur (gradients can also be used). `default red`
- `blur-z-index`: Sets the Z Index of the blur. `default 99`
- `blur-top`: Positions the blur from the top. `no default assigned`
- `blur-left`: Positions the blur from the left. `no default assigned`
- `blur-right`: Positions the blur from the right. `no default assigned`
- `blur-bottom`: Positions the blur from the bottom. `no default assigned`
- `blur-border-radius`: Changes the blur border radius. `default 5rem 2rem 5rem 50%`
- `blur-grain`: Must be set to `true` in order to work. Sets the blur to a grainy texture. `no default assigned`
- `blur-scale`: The value to scale to. If present triggers a scale animation to that value. `no default assigned`
- `blur-scale-duration`: Optional duration value for the scale animation. `no default assigned`
- `blur-scale-repetitions`: Optional repetitions value for the scale animation. `no default assigned`
- `blur-translate-x`: The value to translate on the x-axis. If present triggers a translation animation to that value. `no default assigned`
- `blur-translate-x-duration`: Optional duration value for the translation animation. `no default assigned`
- `blur-translate-x-repetitions`: Optional repetitions value for the translation animation. `no default assigned`
- `blur-translate-y`: The value to translate on the y-axis. If present triggers a translation animation to that value. `no default assigned`
- `blur-translate-y-duration`: Optional duration value for the translation animation. `no default assigned`
- `blur-translate-y-repetitions`: Optional repetitions value for the translation animation. `no default assigned`
- `blur-opacity`: The value to animate on the opacity property. If present triggers a opacity animation to that value. `no default assigned`
- `blur-opacity-duration`: Optional duration value for the opacity animation. `no default assigned`
- `blur-opacity-repetitions`: Optional repetitions value for the opacity animation. `no default assigned`
- `blur-animate`: The value to transition to. Transitions from the `blur-amount` value and this value. If present triggers a blur animation to that value. `no default assigned`
- `blur-animate-duration`: Optional duration value for the blur animation. `no default assigned`
- `blur-animate-repetitions`: Optional repetitions value for the blur animation. `no default assigned`
- `blur-interaction`: Optional value for animation triggers, choose from `scroll` (triggers animation when in viewport), `click` (toggles animation state when clicked) or `hover` (toggles playing state based on hover events). `no default assigned`

*View the [official documentation](https://infinitode-docs.gitbook.io/documentation/package-documentation/blurjs-package-documentation) for more information...*

## Usage examples

Here follows a couple of basic usage examples for BlurJS.

### 1. Width and Height
```HTML

```

### 2. Background / Color
```HTML

```

### 3. Border Radius
```HTML

```

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.

# License

BlurJS is licensed under a [modified MIT license](https://github.com/infinitode/blurjs/blob/main/LICENSE), please view the license file for more information.

# Contributions

All contributions are welcome! You can get started by opening a request on Github. Help us make BlurJS better for everyone!