@mangoweb/parallax
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

Parallax

The manGoweb Parallax component. Watches elements vertical position in viewport.

Demo: codesandbox.io/s/mangowebparallax-demo-hz24v

Installation

npm install @mangoweb/parallax @mangoweb/scripts-base

This is a @mangoweb/scripts-base component.

Usage

In your template:

<script>
	window.initComponents = (window.initComponents || []).push({
		name: 'Parallax',
		place: '#targetElement',
		props: {
			// Optional
			offsetPropertyName: 'offset', // distance between element y center and window y center
			heightPropertyName: 'height', // element height
			windowHeightPropertyName: 'windowHeight',
		},
	})
</script>

In your styles

#targetElement {
	transform: translateY(calc(var(--offset, 0) * 20vh)); // Translates by 0 pixels when javascript is disabled
}

Readme

Keywords

none

Package Sidebar

Install

npm i @mangoweb/parallax

Weekly Downloads

1

Version

0.1.4

License

MIT

Unpacked Size

6.76 kB

Total Files

9

Last publish

Collaborators

  • onset
  • mango-cli
  • jirkavebr
  • viliamkopecky
  • matejsimek
  • luchalupa