ngx-glassy-effect 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
# NGX Glassy Effect
|
|
2
2
|
|
|
3
3
|
This project is an Angular directive that applies a glassy effect to your html elements.
|
|
4
|
-
|
|
5
|
-
- V3 : 3rd time's the charm, the V2 was not bad, but it only worked on Chrome & the refractions didn't zoom out until a certain distance as they go further away from the borders so they just disappeared, & refractions on corners broke into pixels not handling antialiasing properly. This time it's using WebGL instead of backdrop-filter giving a clean near-perfect glassy effect (closer to apple's liquid glass), & it supports more browsers like Safari & Mozilla.
|
|
6
|
-
- V4 : V3 is perfect, If there's gonna be a v4, it's going to be about glass on top of a glass, say apple ios app-store's navbar when you hover an item & it shows a refraction of the refraction of the background. Feel free to contribute.
|
|
4
|
+
- Supported browsers : Chrome only
|
|
7
5
|
|
|
8
6
|
## Installation
|
|
9
7
|
|
|
@@ -58,6 +56,7 @@ export class App {
|
|
|
58
56
|
|-------------------|---------------------|-----------------------------------|----------------------------------------------------------------------------------------------------------|
|
|
59
57
|
| refraction | number | Height - 10px (if Height < 110px) | The intensity/depth of the refraction displacement map (auto-calculated from element height if omitted). |
|
|
60
58
|
| blur | number | 0 | The backdrop blur intensity factor applied to the substrate beneath the lens. |
|
|
59
|
+
| chroma | number | 0.12 | The chromatic aberration (RGB color splitting) intensity factor across refracted channels. |
|
|
61
60
|
| radius *** | number \| undefined | undefined | The corner radius of the glass effect (falls back to the element's computed CSS `border-radius`). |
|
|
62
61
|
| bezel *** | number | 0.7 | The relative width of the refractive edge bevel transition zone. |
|
|
63
62
|
| curvature *** | number | 4 | The exponential falloff curve exponent used to calculate the lens profile normals. |
|
|
@@ -66,7 +65,6 @@ export class App {
|
|
|
66
65
|
| specularWidth *** | number | 1 | The crispness and width of the specular rim highlight line. |
|
|
67
66
|
| lightAngle *** | number | -120 | The directional angle of the virtual light source in degrees for rim lighting calculations. |
|
|
68
67
|
| invert *** | boolean | false | Inverts the lens distortion direction (switching between convex magnification and concave depth). |
|
|
69
|
-
| chroma | number | 0.12 | The chromatic aberration (RGB color splitting) intensity factor across refracted channels. |
|
|
70
68
|
|
|
71
69
|
## Contribute
|
|
72
70
|
|