❄️ Add a live frosted glass blur effect over any type of web content, including text.

Related tags

Effect web-components blur stenciljs frosted-glass
Overview

Frosted Glass npm version

❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️

Build Status Codecov Dependency Status devDependency Status Built With Stencil

Demos

Vanilla React Vue Angular

Navbar blur example gif

Install

npm install frosted-glass --save

Setup

  • Add a script tag in the head of your index.html
<script src='node_modules/frosted-glass/dist/frostedglass.js'></script>

Usage

  • Add a frosted-glass-container element
  • Add a child frosted-glass element that should have a blur effect applied
<frosted-glass-container>
  <h1>Welcome!</h1>
  <frosted-glass>
    <div class="nav-content">Nav content</div>
  </frosted-glass>
</frosted-glass-container>

Optional properties

frosted-glass

  • blur-amount - specifies the blur amount applied
  • overlay-color - adds an overlay on top of the blur

frosted-glass-container

Example

<frosted-glass-container stretch="true">
  <frosted-glass blur-amount="5px" overlay-color="#ffffff52"></frosted-glass>
</frosted-glass-container>

License

frosted-glass is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.

Comments
  • Update size-limit to the latest version 🚀

    Update size-limit to the latest version 🚀

    Version 0.18.0 of size-limit was just published.

    Dependency size-limit
    Current Version 0.17.1
    Type devDependency

    The version 0.18.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of size-limit.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    Commits

    The new version differs by 4 commits.

    • bf71df1 Release 0.18 version
    • e91dad8 Add docs and tests for new config
    • 998485b Allow the usage of dynamic configuration (#63)
    • 067d6bb Try to fix Windows CI

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 11
  • Update jest to the latest version 🚀

    Update jest to the latest version 🚀

    Version 22.0.0 of jest was just published.

    Dependency jest
    Current Version 21.2.1
    Type devDependency

    The version 22.0.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of jest.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 11
  • Update @stencil/core to the latest version 🚀

    Update @stencil/core to the latest version 🚀

    Version 0.0.8 of @stencil/core was just published.

    Dependency @stencil/core
    Current Version 0.0.8-5
    Type devDependency

    The version 0.0.8 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of @stencil/core.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 10
  • Update size-limit to the latest version 🚀

    Update size-limit to the latest version 🚀

    ☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

    Version 0.15.0 of size-limit was just published.

    Dependency size-limit
    Current Version 0.14.1
    Type devDependency

    The version 0.15.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of size-limit.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    Commits

    The new version differs by 5 commits.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 6
  • Update markdownlint-cli to the latest version 🚀

    Update markdownlint-cli to the latest version 🚀

    Version 0.9.0 of markdownlint-cli was just published.

    Dependency markdownlint-cli
    Current Version 0.8.2
    Type devDependency

    The version 0.9.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of markdownlint-cli.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    Commits

    The new version differs by 4 commits.

    • ec6d185 Bump version 0.9.0
    • 269a1a1 Update markdownlint dependency to 0.9.0.
    • eb7bac3 Remove Node.js nightly version 11 which is not available on Travis CI.
    • d22c1a7 Add Node.js version 10, remove end-of-life versions < 6 (per markdownlint dependency).

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 5
  • Update @stencil/core to the latest version 🚀

    Update @stencil/core to the latest version 🚀

    Version 0.4.2 of @stencil/core was just published.

    Dependency @stencil/core
    Current Version 0.2.3
    Type dependency

    The version 0.4.2 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of @stencil/core.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    Commits

    The new version differs by 76 commits.

    • 404b010 0.4.2
    • b873267 test(minify): minify test updates
    • 897f29b fix(minify): minify chunks
    • 3eac82a fix(entries): component dependencies from module imports
    • 38c9201 fix(platform-client): observedAttributes
    • 0a4ddb4 chore(stats): add collections to stats
    • 1fb9e89 refactor(stats): rename input to inputs and use string[]
    • 38c2ea1 fix(stats): add bundle output paths
    • ebac416 chore(bundles): ensure bundle filenames use app component tags
    • c8cc144 feat(config): do not require config file
    • ae68f98 fix(events): ensure old events are removed
    • 9eb9304 0.4.1
    • 1e53d19 test(init): ensure componentDidLoad called once
    • a49f1a6 fix(init): componentDidLoad called twice
    • 9f7061d fix(render): State updates in componentWillLoad should not cause render

    There are 76 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 4
  • Update @types/jest to the latest version 🚀

    Update @types/jest to the latest version 🚀

    Version 22.0.0 of @types/jest was just published.

    Dependency @types/jest
    Current Version 21.1.10
    Type devDependency

    The version 22.0.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of @types/jest.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 4
  • Update semantic-release to the latest version 🚀

    Update semantic-release to the latest version 🚀

    Version 12.2.2 of semantic-release was just published.

    Dependency semantic-release
    Current Version 11.2.0
    Type devDependency

    The version 12.2.2 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of semantic-release.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    Release Notes v12.2.2

    12.2.2 (2018-01-13)

    Bug Fixes

    • set node minimum version to 8.3 (cc0c312)
    Commits

    The new version differs by 21 commits.

    • cc0c312 fix: set node minimum version to 8.3
    • 93173e2 fix(package): update execa to version 0.9.0
    • 48ade92 chore(package): update prettier to version 1.10.0
    • 49ad198 docs(contrib): add atomic commits requirement
    • adbcca6 docs: add issue template
    • e0b4e6a docs: add CONTRIBUTING guidelines
    • 53f3de6 feat: allow to exclude commits from analysis
    • fd54eea docs: update Yarn FAQ
    • ba79c85 docs: typos. clarifications
    • 75778bc docs: troubleshooting
    • d6c398f docs: add heading anchor
    • fdb995f docs: publish with gitbook
    • ed89361 docs: documentation improvements
    • f4d9ebe fix(security): Updated marked dependency
    • 5bc46a0 feat: allow to release from local machine

    There are 21 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 3
  • Update markdownlint-cli to the latest version 🚀

    Update markdownlint-cli to the latest version 🚀

    Version 0.6.0 of markdownlint-cli was just published.

    Dependency markdownlint-cli
    Current Version 0.5.0
    Type devDependency

    The version 0.6.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of markdownlint-cli.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

    Commits

    The new version differs by 5 commits.

    • 78aa582 Bump version 0.6.0
    • 5ce7d5f Update markdownlint dependency to 0.6.4.
    • 5ae13dc Update Usage/README for previous commit.
    • e11fd24 Merge pull request #30 from mochajs/globs
    • b04b6a3 fixes globbing issues; add support for *.markdown in dirs

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 3
  • Update condition-circle to the latest version 🚀

    Update condition-circle to the latest version 🚀

    The devDependency condition-circle was updated from 2.0.1 to 2.0.2.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    Release Notes for v2.0.2

    2.0.2 (2018-12-27)

    Bug Fixes

    Commits

    The new version differs by 3 commits.

    • 0da0675 chore: upgrade to circle v2 for #14
    • a2f0716 fix: relax sem-rel dependency for #13
    • 1d8a65b chore(package): relax the sem-rel peer dependency (#13)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 2
  • Update husky to the latest version 🚀

    Update husky to the latest version 🚀

    The devDependency husky was updated from 0.15.0-rc.13 to 1.0.0-rc.14.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 2
  • Update plunk to the latest version 🚀

    Update plunk to the latest version 🚀

    The devDependency plunk was updated from 0.5.1 to 0.6.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    Publisher: iliakan License: MIT

    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 0
  • Second frosted glass position issue

    Second frosted glass position issue

    I am using two frosted-glass effects in one parent, but the position of the second one always varying, the first one somehow display in right position.

    opened by shivvvv 0
  • Update husky to the latest version 🚀

    Update husky to the latest version 🚀

    The devDependency husky was updated from 1.3.1 to 2.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 32
  • Update size-limit to the latest version 🚀

    Update size-limit to the latest version 🚀

    The devDependency size-limit was updated from 0.21.1 to 0.22.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 50
Releases(v0.3.2)
Owner
Adrian Carriger
I am a Software Architect with 8+ years of experience. I enjoy collaborating and building with a great team of developers.
Adrian Carriger
GitHub https://codesandbox.io/s/github/adriancarriger/frosted-glass/tree/master/demos/vanilla/navbar
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Gaëtan Renaudeau 797 Nov 26, 2022
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

Yasunobu Ikeda 96 Dec 24, 2022
magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

Halo Lab 35 Nov 30, 2022
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Animated haze distortion effect for images and text, with WebGL.

Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im

Lucas Bebber 289 Nov 1, 2022
⌨️ A tiny library for creating a typing effect on specified text element.

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element. Demo Size (It's really tiny) Minimized: 2.9KB Gziped: 1.1KB Inst

Korney Vasilchenko 175 Sep 29, 2021
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects ?? Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

null 19 Sep 25, 2022
Add a retro/vintage effect to images using the HTML5 canvas element

vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio

Robert Fleischmann 829 Dec 25, 2022
100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

beez 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API) The concept An Hive i

Gaëtan Renaudeau 34 Dec 16, 2022
This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.

SomaFM Music Player Web-App This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channe

Rainner Lins 123 Dec 27, 2022
Live input Web Audio effects

Live Audio Input effects I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the e

Chris Wilson 488 Dec 22, 2022
Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Zach Saucier 97 Dec 8, 2022
Simple Web Audio API based reverb effect.

soundbank-reverb Simple Web Audio API based reverb effect. Based on https://github.com/web-audio-components/simple-reverb by Nick Thompson. Intended f

Matt McKegg 21 May 30, 2022
Modern ways of revealing new content using SVG animations.

Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe

Codrops 635 Dec 30, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022