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 |