Documentation
Our WebsiteOur Github
  • 👋Welcome to Infinitode Documentation
  • AI Documentation
  • API Documentation
    • Basic Math API Documentation (#Experimental)
    • BMI Calculator API Documentation
    • Character Counter API Documentation
    • Chemical Equation Balancer API Documentation
    • Color Generator API Documentation
    • Date Difference Calculator API Documentation
    • Dungen API Documentation
    • Dungen Dev API Documentation
    • Factorial Calculator API Documentation
    • Fantasy Name Generator API Documentation
    • Fibonacci Sequence Generator API Documentation
    • GCD Calculator API Documentation
    • Hash API Documentation
    • Helix PSA API Documentation
    • LCM Calculator API Documentation
    • Leap Year Checker API Documentation
    • Lorem API Documentation
    • Molar Mass Calculator API Documentation (#Experimental)
    • MycoNom API Documentation
    • Name Generator API Documentation
    • Palindrome Checker API Documentation
    • Password Generator API Documentation
    • Password Strength Detector API Documentation
    • Periodic Table API Documentation
    • Prime Number Checker API Documentation
    • Quadratic Equation Solver API Documentation
    • Random Facts Generator API Documentation
    • Random Quotes Generator API Documentation
    • Roman Numeral Converter API Documentation
    • Simple Interest Calculator API Documentation
    • Slugify API Documentation
    • Text Case Converter API Documentation
    • Unit Converter API Documentation
    • Username Generator API Documentation
    • UUID Generator API Documentation
    • Vowel Counter API Documentation
  • Package Documentation
    • BlurJS Package Documentation
      • BlurJS Usage Examples
      • BlurJS Reference Documentation
    • CodeSafe Package Documentation
      • CodeSafe Reference
        • CodeSafe Functions
    • DeepDefend Package Documentation
      • DeepDefend Reference
        • Attacks Functions
        • Defenses Functions
    • DupliPy Package Documentation
      • DupliPy Reference
        • Formatting Functions
        • Replication Functions
        • Similarity Functions
        • Text Analysis Functions
    • FuncProfiler Package Documentation
      • FuncProfiler Reference
        • FuncProfiler Functions
    • Hued Package Documentation
      • Hued Reference
        • Analysis Functions
        • Colors Functions
        • Conversions Functions
        • Palettes Functions
    • LocalSiteMap Package Documentation
      • LocalSiteMap Reference
        • LocalSiteMap Functions
    • PyAutoPlot Package Documentation
      • PyAutoPlot Reference
        • PyAutoPlot Functions
    • PyWebScrapr Package Documentation
      • PyWebScrapr Reference
        • PyWebScrapr Functions
    • ValX Package Documentation
      • ValX Reference
        • ValX Functions
Powered by GitBook
On this page
  • Changelog
  • Installation
  • How to use BlurJS

Was this helpful?

  1. Package Documentation

BlurJS Package Documentation

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

PreviousPackage DocumentationNextBlurJS Usage Examples

Last updated 4 months ago

Was this helpful?

Changelog

  • 1.3 (Latest): 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 . 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 of available properties to use for BlurJS. We'll add more properties soon.

GitHub
list