2.1.1 • Published 5 years ago

hero-parallax v2.1.1

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

Hero Parallax

A cross-browser pure Javascript parallax plugin

Usage

  1. Import it in
<body>
    <!-- Your content -->
    <script src="parallax.js"></script>
    <script>
        new Parallax();
    </script>
</body>
  1. 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)

OptionRequiredDescription
data-parallax-backgroundyesThe url of the background image for the parallax section
data-parallax-heightyesThe 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 |

2.1.1

5 years ago

2.1.0

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.5.0

5 years ago

1.4.7

5 years ago

1.4.6

5 years ago

1.4.4

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.12

5 years ago

1.3.11

5 years ago

1.3.10

5 years ago

1.3.9

5 years ago

1.3.8

5 years ago

1.3.7

5 years ago

1.3.6

5 years ago

1.3.5

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago