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

    0.0.10 • 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
    }

    Keywords

    none

    Install

    npm i @mangoweb/parallax

    DownloadsWeekly Downloads

    35

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    6.81 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar