2.2.2 • Published 3 years ago
background-parallax v2.2.2
Deprecation Notice
Discontinued support in favour of Magic Scrolls 🧙♀️
Parallax
An easy to use parallax class.
Installation
with webpack
yarn add background-parallax
Usage
<div class="banner" data-parallax>
<div class="banner__background" style="background-image: url('your/image/directory');" data-parallax-watch></div>
</div>
import Parallax from 'background-parallax';
const banner = document.querySelectorAll('[data-parallax]');
const myParallax = new Parallax(banner);
.banner {
position: relative;
height: 800px;
overflow: hidden;
&__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 140%;
background-position: center;
background-size: cover;
}
}
Options
Set the direction of the parallax - note, our image needs to be larger or smaller than the container to parallax, if it is the same size, nothing will happen. All numbers will be rounded to either -1, 0 or 1.
new Parallax(banner, {
x: 0,
y: 1,
});
Options
Option | Type | Description |
---|---|---|
x | number | 1 will move the image to the right, -1 will move the image to the left, 0 will not move the image |
y | number | 1 will move the image down, -1 will move the image up, 0 will not move the image |
License
2.2.2
3 years ago
2.2.1
3 years ago
2.2.0
3 years ago
2.1.1
3 years ago
2.1.0
3 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.2.5
4 years ago
1.2.4
4 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.9
4 years ago
1.1.8
4 years ago
1.1.7
4 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago