@mangoweb/parallax - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

lib/index.d.ts

 import { Component } from '@mangoweb/scripts-base';
 export interface ParallaxProps {
-    customProperty?: string;
+    offsetPropertyName?: string;
+    heightPropertyName?: string;
+    windowHeightPropertyName?: string;
 }
@@ -10,3 +12,4 @@ export declare class Parallax extends Component<ParallaxProps> {
     getElementYCenter: () => number;
+    getElementHeight: () => number;
 }
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -7,4 +7,8 @@ import { Component } from '@mangoweb/scripts-base';
         this.update = () => {
-            const offset = this.getElementYCenter() - (window.scrollY + window.innerHeight / 2);
-            this.el.style.setProperty(`--${this.getPropOrElse('customProperty', 'parallax')}`, `${offset}`);
+            const windowHeight = window.innerHeight;
+            const height = this.getElementHeight();
+            const offset = this.getElementYCenter() - (window.scrollY + windowHeight / 2);
+            this.el.style.setProperty(`--${this.getPropOrElse('offsetPropertyName', 'offset')}`, `${offset}`);
+            this.el.style.setProperty(`--${this.getPropOrElse('heightPropertyName', 'height')}`, `${height}`);
+            this.el.style.setProperty(`--${this.getPropOrElse('windowHeightPropertyName', 'windowHeight')}`, `${windowHeight}`);
         };
@@ -15,2 +19,5 @@ this.getElementYCenter = () => {
         };
+        this.getElementHeight = () => {
+            return lightBounds(this.el).height;
+        };
     }
@@ -17,0 +24,0 @@ init() {

package.json

 {
   "name": "@mangoweb/parallax",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Watches elements vertical position in viewport.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,5 +0,7 @@
-# InView
+# Parallax
 
 The manGoweb Parallax component. Watches elements vertical position in viewport.
 
+Demo: [codesandbox.io/s/mangowebparallax-demo-hz24v](https://codesandbox.io/s/mangowebparallax-demo-hz24v?file=/index.html)
+
 ## Installation
@@ -22,3 +24,5 @@
 			// Optional
-			customProperty: 'position', // Custom property name
+			offsetPropertyName: 'offset', // distance between element y center and window y center
+			heightPropertyName: 'height', // element height
+			windowHeightPropertyName: 'windowHeight',
 		},
@@ -33,4 +37,4 @@ })
 #targetElement {
-	transform: translateY(calc(var(--position, 0) * 20vh)); // Translates by 0 pixels when javascript is disabled
+	transform: translateY(calc(var(--offset, 0) * 20vh)); // Translates by 0 pixels when javascript is disabled
 }
 ```

src/index.ts

@@ -5,3 +5,5 @@ import { Component } from '@mangoweb/scripts-base'
 export interface ParallaxProps {
-	customProperty?: string
+	offsetPropertyName?: string
+	heightPropertyName?: string
+	windowHeightPropertyName?: string
 }
@@ -18,5 +20,9 @@
 	update = () => {
-		const offset = this.getElementYCenter() - (window.scrollY + window.innerHeight / 2)
+		const windowHeight = window.innerHeight
+		const height = this.getElementHeight()
+		const offset = this.getElementYCenter() - (window.scrollY + windowHeight / 2)
 
-		this.el.style.setProperty(`--${this.getPropOrElse('customProperty', 'parallax')}`, `${offset}`)
+		this.el.style.setProperty(`--${this.getPropOrElse('offsetPropertyName', 'offset')}`, `${offset}`)
+		this.el.style.setProperty(`--${this.getPropOrElse('heightPropertyName', 'height')}`, `${height}`)
+		this.el.style.setProperty(`--${this.getPropOrElse('windowHeightPropertyName', 'windowHeight')}`, `${windowHeight}`)
 	}
@@ -28,2 +34,6 @@
 	}
+
+	getElementHeight = () => {
+		return lightBounds(this.el).height
+	}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6810

increased by34.93%

Lines of code

77

increased by32.76%

Number of lines in readme file

39

increased by11.43%

No dependency changes