{"id":18993523,"url":"https://github.com/infinitode/blurjs","last_synced_at":"2025-09-09T23:13:41.011Z","repository":{"id":216063285,"uuid":"740376249","full_name":"Infinitode/BlurJS","owner":"Infinitode","description":"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.","archived":false,"fork":false,"pushed_at":"2025-01-07T09:39:56.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T11:48:18.043Z","etag":null,"topics":["animation","blurs","blurs-elements","css","css-animations","css-effects","easy-to-use","html","html-attributes","interactive-css","javascript","javascript-library","js","library","lightweight","modern-css","modern-web-design","open-source","quick-setup"],"latest_commit_sha":null,"homepage":"https://infinitode.netlify.app","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Infinitode.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-08T08:13:27.000Z","updated_at":"2025-01-07T09:39:59.000Z","dependencies_parsed_at":"2025-02-21T11:51:31.994Z","dependency_job_id":null,"html_url":"https://github.com/Infinitode/BlurJS","commit_stats":null,"previous_names":["infinitode/blurjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Infinitode/BlurJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Infinitode%2FBlurJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Infinitode%2FBlurJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Infinitode%2FBlurJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Infinitode%2FBlurJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Infinitode","download_url":"https://codeload.github.com/Infinitode/BlurJS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Infinitode%2FBlurJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274379789,"owners_count":25274232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","blurs","blurs-elements","css","css-animations","css-effects","easy-to-use","html","html-attributes","interactive-css","javascript","javascript-library","js","library","lightweight","modern-css","modern-web-design","open-source","quick-setup"],"created_at":"2024-11-08T17:21:46.107Z","updated_at":"2025-09-09T23:13:41.001Z","avatar_url":"https://github.com/Infinitode.png","language":null,"readme":"# BlurJS 1.4\n\n[![GitHub license](https://img.shields.io/badge/license-compliance-green.svg)](https://github.com/infinitode/blurjs/blob/main/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/infinitode/blurjs.svg)](https://github.com/infinitode/blurjs/stargazers)\n[![GitHub issues](https://img.shields.io/github/issues/infinitode/blurjs.svg)](https://github.com/infinitode/blurjs/issues)\n[![JSDelivr monthly downloads](https://data.jsdelivr.com/v1/package/gh/Infinitode/BlurJS/badge?style=rounded)](https://www.jsdelivr.com/package/gh/Infinitode/BlurJS)\n\nBlurJS is a lightweight JavaScript library for creating blurred effects on HTML elements. Easily integrate blurred elements into your web projects with simple HTML attributes.\n\n\u003e [!NOTE]\n\u003e Older versions of BlurJS are not maintained, and are not recommended for use. We only maintain `main`, which is the latest stable release of BlurJS.\n\n## Changes in Version 1.4\n\n- Support for more browsers, using vendor prefixes where needed.\n- Performance optimizations by refactoring and cleaning code.\n- More usage examples in the README file for clearer usage.\n\n## Changes in Version 1.3\n\nBlurJS now supports using multiple animations in one single element. You can combine animations and change their easing, duration, and repetitions to create unique and fun interactions/animations. New `blur-{animation-type}-timing` parameter for controlling easing during animations.\n\n## Changes in Version 1.2\n\nPointer 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.\n\n### Changes in Version 1.1:\n1. Moved the for loop to loop per element, improving stability and performance.\n2. Created implementations for interactions with blur elements using the `blur-interaction` attribute.\n3. Updated the code to also have attributes for controlling pointer events and user selection.\n\n# Getting Started\n\n## Installation\n\nYou can include BlurJS in your project by downloading the ready-to-use files from this repository or by using the CDN links for faster loading.\n- `dist/blur.js`: The development (unminified) version of BlurJS.\n- `dist/blur.min.js`: The production (minified) version of BlurJS.\n\n**Using CDN:**\n\n**Minified Version (Recommended for production)**\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.min.js\"\u003e\u003c/script\u003e\n```\n\n**Normal Version (Useful for development/debugging)**\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/Infinitode/BlurJS@main/dist/blur.js\"\u003e\u003c/script\u003e\n```\n\n\u003e [!IMPORTANT]\n\u003e BlurJS should be placed at the end of the `\u003cbody\u003e` element in your HTML file, after all elements you intend to apply blur effects to. Do not place it in the `\u003chead\u003e` element.\n\n## How to use BlurJS\n\n1.  Ensure the parent element of any `blur` element has its CSS `position` property set to `relative` (or `absolute`, `fixed`, `sticky`). This is crucial for correct positioning of the blur effect.\n    ```html\n    \u003cdiv style=\"position: relative; width: 200px; height: 200px; border: 1px solid #ccc;\"\u003e\n      \u003c!-- BlurJS elements will go here --\u003e\n    \u003c/div\u003e\n    ```\n2.  Add the class `blur` to any HTML element you want BlurJS to affect.\n3.  Use the `blur-*` attributes on that element to customize its appearance and behavior.\n\nBlurJS will automatically detect and process all elements with the class `blur`.\n\n## Available properties\n\nThere are several available properties that come with BlurJS. Include these as HTML attributes on your `.blur` elements.\n\n- `blur-width`: Sets the width of the blur effect. `default: 50px`\n- `blur-height`: Sets the height of the blur effect. `default: 50px`\n- `blur-amount`: Sets the intensity of the blur. `default: 25px`\n- `blur-background`: Sets the color or background of the blur (CSS color values, gradients can also be used). `default: red`\n- `blur-z-index`: Sets the Z Index of the blur effect. `default: 99`\n- `blur-top`: Positions the blur from the top edge of its parent. `no default`\n- `blur-left`: Positions the blur from the left edge of its parent. `no default`\n- `blur-right`: Positions the blur from the right edge of its parent. `no default`\n- `blur-bottom`: Positions the blur from the bottom edge of its parent. `no default`\n- `blur-border-radius`: Changes the border radius of the blur effect. `default: 5rem 2rem 5rem 50%`\n- `blur-grain`: Set to `true` to apply a grainy texture to the blur effect. `no default`\n- `blur-pointer-events`: Set to `true` to enable pointer events (e.g., clicks) on the blur element, or `false` to disable. `no default (inherits CSS default)`\n- `blur-user-select`: Set to `true` to allow text selection on the blur element, or `false` to disable. `no default (inherits CSS default)`\n\n**Animation Properties:**\n\nAnimations run with a 50% keyframe by default (animating to the target value and back to the original).\n\n- `blur-scale`: The scale factor (e.g., `1.2` for 120% size). Triggers a scale animation. `no default`\n- `blur-scale-duration`: Duration for the scale animation (e.g., `2s`, `500ms`). `default: 1s`\n- `blur-scale-repetitions`: Number of times the scale animation repeats (e.g., `3`, `infinite`). `default: infinite`\n- `blur-scale-timing`: CSS animation timing function for scale (e.g., `ease-in-out`, `linear`). `default: linear`\n\n- `blur-translate-x`: Horizontal translation distance (e.g., `50px`, `-10%`). Triggers a horizontal translation animation. `no default`\n- `blur-translate-x-duration`: Duration for X translation. `default: 1s`\n- `blur-translate-x-repetitions`: Repetitions for X translation. `default: infinite`\n- `blur-translate-x-timing`: Timing function for X translation. `default: linear`\n\n- `blur-translate-y`: Vertical translation distance. Triggers a vertical translation animation. `no default`\n- `blur-translate-y-duration`: Duration for Y translation. `default: 1s`\n- `blur-translate-y-repetitions`: Repetitions for Y translation. `default: infinite`\n- `blur-translate-y-timing`: Timing function for Y translation. `default: linear`\n\n- `blur-opacity`: Target opacity value (e.g., `0.5`). Triggers an opacity animation. `no default`\n- `blur-opacity-duration`: Duration for opacity animation. `default: 1s`\n- `blur-opacity-repetitions`: Repetitions for opacity animation. `default: infinite`\n- `blur-opacity-timing`: Timing function for opacity animation. `default: linear`\n\n- `blur-animate`: Target blur amount for animation (e.g., `10px`). Animates the `filter: blur()` property. `no default`\n- `blur-animate-duration`: Duration for blur amount animation. `default: 1s`\n- `blur-animate-repetitions`: Repetitions for blur amount animation. `default: infinite`\n- `blur-animate-timing`: Timing function for blur amount animation. `default: linear`\n\n**Interaction Property:**\n\n- `blur-interaction`: Defines how animations are triggered.\n    - `hover`: Animation plays when the mouse hovers over the element, pauses when it leaves.\n    - `click`: Animation toggles between play/pause on each click.\n    - `scroll`: Animation plays when the element is scrolled into the viewport, pauses when scrolled out.\n    `no default`\n\n\u003e [!NOTE]\n\u003e For an exhaustive list of properties and more detailed explanations, view the [official documentation](https://infinitode-docs.gitbook.io/documentation/package-documentation/blurjs-package-documentation).\n\n## Usage examples\n\nBelow are some examples to get you started. Remember to include the BlurJS script at the end of your `\u003cbody\u003e` and ensure parent elements of `.blur` items have `position: relative;` (or similar).\n\n### Basic Styling\n\n**1. Custom Width, Height, and Color**\n```html\n\u003cdiv style=\"position: relative; width: 150px; height: 100px; border: 1px solid #eee; margin-bottom: 10px;\"\u003e\n  \u003cdiv class=\"blur\"\n       blur-width=\"100px\"\n       blur-height=\"70px\"\n       blur-background=\"rgba(0, 150, 255, 0.7)\"\n       blur-amount=\"15px\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**2. Custom Border Radius**\n```html\n\u003cdiv style=\"position: relative; width: 100px; height: 100px; border: 1px solid #eee; margin-bottom: 10px;\"\u003e\n  \u003cdiv class=\"blur\"\n       blur-border-radius=\"50%\"\n       blur-background=\"purple\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Advanced Styling\n\n**1. Combining Multiple Properties \u0026 Positioning**\n```html\n\u003cdiv style=\"position: relative; width: 250px; height: 150px; border: 1px solid #eee; margin-bottom: 10px; background: #f0f0f0;\"\u003e\n  \u003cp style=\"padding: 5px; text-align: center;\"\u003eContent behind the blur\u003c/p\u003e\n  \u003cdiv class=\"blur\"\n       blur-width=\"200px\"\n       blur-height=\"100px\"\n       blur-background=\"rgba(255, 100, 100, 0.6)\"\n       blur-amount=\"20px\"\n       blur-border-radius=\"10px\"\n       blur-top=\"25px\"\n       blur-left=\"25px\"\n       blur-z-index=\"100\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**2. Grainy Texture Effect**\n```html\n\u003cdiv style=\"position: relative; width: 150px; height: 100px; border: 1px solid #eee; margin-bottom: 10px;\"\u003e\n  \u003cdiv class=\"blur\"\n       blur-width=\"120px\"\n       blur-height=\"80px\"\n       blur-background=\"rgba(50, 200, 50, 0.7)\"\n       blur-grain=\"true\"\n       blur-amount=\"30px\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Animations\n\n**1. Simple Scale Animation**\n```html\n\u003cdiv style=\"position: relative; width: 100px; height: 100px; border: 1px solid #eee; margin-bottom: 10px;\"\u003e\n  \u003cdiv class=\"blur\"\n       blur-scale=\"1.5\"\n       blur-scale-duration=\"2s\"\n       blur-scale-repetitions=\"infinite\"\n       blur-background=\"orange\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**2. Combined Opacity and Translation Animation**\n```html\n\u003cdiv style=\"position: relative; width: 200px; height: 100px; border: 1px solid #eee; margin-bottom: 10px; overflow: hidden;\"\u003e\n  \u003cdiv class=\"blur\"\n       blur-opacity=\"0.2\"\n       blur-opacity-duration=\"3s\"\n       blur-opacity-repetitions=\"infinite\"\n       blur-translate-x=\"70px\"\n       blur-translate-x-duration=\"3s\"\n       blur-translate-x-timing=\"ease-in-out\"\n       blur-translate-x-repetitions=\"infinite\"\n       blur-background=\"teal\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**3. Animating Blur Amount**\n```html\n\u003cdiv style=\"position: relative; width: 100px; height: 100px; border: 1px solid #eee; margin-bottom: 10px;\"\u003e\n  \u003cdiv class=\"blur\"\n       blur-amount=\"5px\"\n       blur-animate=\"35px\"\n       blur-animate-duration=\"2.5s\"\n       blur-animate-repetitions=\"infinite\"\n       blur-background=\"crimson\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Interactions\n\n**1. Hover Interaction (Scale Effect)**\n```html\n\u003cdiv style=\"position: relative; width: 120px; height: 120px; border: 1px solid #eee; margin-bottom: 10px; display: flex; align-items: center; justify-content: center;\"\u003e\n  \u003cp\u003eHover Me\u003c/p\u003e\n  \u003cdiv class=\"blur\"\n       blur-interaction=\"hover\"\n       blur-scale=\"2\"\n       blur-scale-duration=\"0.5s\"\n       blur-scale-timing=\"ease-out\"\n       blur-scale-repetitions=\"1\"\n       blur-background=\"rgba(255, 200, 0, 0.8)\"\n       blur-width=\"80px\"\n       blur-height=\"80px\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\u003e **Note:** For hover, `blur-scale-repetitions` is often set to `1` if you want the animation to play once per hover, or `infinite` (with `alternate`) if you want it to pulse as long as hovered. The default behavior is it plays to 50% and back.\n\n**2. Click Interaction (Toggle Opacity)**\n```html\n\u003cdiv style=\"position: relative; width: 120px; height: 120px; border: 1px solid #eee; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer;\"\u003e\n  \u003cp\u003eClick Me\u003c/p\u003e\n  \u003cdiv class=\"blur\"\n       blur-interaction=\"click\"\n       blur-opacity=\"0.1\"\n       blur-opacity-duration=\"1s\"\n       blur-opacity-repetitions=\"1\"\n       blur-background=\"rgba(0, 100, 200, 0.7)\"\n       blur-width=\"100px\"\n       blur-height=\"100px\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**3. Scroll Interaction (Translate Effect)**\n```html\n\u003cdiv style=\"height: 150px;\"\u003eScroll down to see the effect...\u003c/div\u003e\n\u003cdiv style=\"position: relative; width: 150px; height: 100px; border: 1px solid #eee; margin: 50vh auto 100vh auto; background: #f9f9f9;\"\u003e\n  \u003c!-- The large margin is to ensure scrolling is needed --\u003e\n  \u003cp style=\"text-align:center; padding-top: 40px;\"\u003eI appear on scroll\u003c/p\u003e\n  \u003cdiv class=\"blur\"\n       blur-interaction=\"scroll\"\n       blur-translate-y=\"-30px\"\n       blur-translate-y-duration=\"1.5s\"\n       blur-translate-y-repetitions=\"1\"\n       blur-background=\"rgba(100, 0, 150, 0.75)\"\n       blur-width=\"100%\"\n       blur-height=\"100%\"\n       blur-top=\"0\"\n       blur-left=\"0\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThese examples showcase a range of possibilities with BlurJS. Experiment with different combinations of attributes to achieve unique effects!\n\n# License\n\nBlurJS is licensed under a [modified MIT license](https://github.com/infinitode/blurjs/blob/main/LICENSE), please view the license file for more information.\n\n# Contributions\n\nAll contributions are welcome! You can get started by opening a request on Github. Help us make BlurJS better for everyone!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finfinitode%2Fblurjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finfinitode%2Fblurjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finfinitode%2Fblurjs/lists"}