hero-parallax
v2.1.1
Published
A cross-browser pure Javascript parallax plugin
Downloads
88
Maintainers
Readme
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 |