hero-parallax

A cross-browser pure Javascript parallax plugin

2.1.1

latest

npm

Version published: 5 years ago

Maintainers: 1

Created: 6 years ago

Source

Hero Parallax

A cross-browser pure Javascript parallax plugin

Usage

Import it in

<body>
    <!-- Your content -->
    <script src="parallax.js"></script>
    <script>
        new Parallax();
    </script>
</body>

Tag sections where you want the parallax effect with the class .parallax

<div class="wrapper>
    <div
        class="parallax"
        data-parallax-background="https://images.unsplash.com/photo-1586204947495-462c218f5f05?ixlib=rb-1.2.1&auto=format&fit=crop&w=2434&q=80"
        data-parallax-height="100vh"
      >
      Some content in here
    </div>
</div>

Options

You can optionally pass in a configuration option

<body>
    <!-- Your content -->


    <script src="parallax.js"></script>
    <script>
        new Parallax({
            speedRatio: 1
        });
    </script>
</body>

Options

Options Per Parallax Section (passed into each .parallax div)

Option	Required	Description
`data-parallax-background`	yes	The url of the background image for the parallax section
`data-parallax-height`	yes	The height of the parallax section (any valid css height property)

Global Options (passed into the new Parallax())

Option	Type	Default	Description
`debugMode`	`boolean`	`false`	Whether to show debug statements in the log
`defaultHeight`	`string`	`70vh`	Fallback height of parallax element if one is not provided (any valid css height property)
`speed`	`number`	1	A speed modifier to control the speed of the parallax effect. [A number between 1 and 10]
`parallaxClassName`	`string`	`.parallax`	The class selector to use to target parallax elements
`wrapperClassName`	`string`	`.wrapper`	The class selector to use to target parallax elements

Keywords

FAQs

What is hero-parallax?

Is hero-parallax well maintained?

Package last updated on 23 Apr 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install