You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+79-46Lines changed: 79 additions & 46 deletions
Original file line number
Diff line number
Diff line change
@@ -12,15 +12,15 @@ Follow these steps to get started:
12
12
13
13
1.[Overview](#overview)
14
14
2.[Install](#install)
15
-
3.[Import](#import)
16
-
4.[Call](#call)
17
-
5.[Review Options](#options)
15
+
3.[Call](#call)
16
+
4.[Review Options](#options)
17
+
5.[Review API](#api)
18
18
19
19
### Overview
20
20
21
-
Rallax.js creates a parallax effect given a target HTML element and an image location. It will create an `<img>` element, and position it `absolute` behind your target element.
21
+
**The problem**: You want to create a dynamic parallax scrolling effect on your web page, but you don't want to use jQuery OR dramatically impact your website's performance.
22
22
23
-
As the user scrolls, the position of the `<img>` element will change relative to the target's location, creating the desired effect.
23
+
**The solution**: Rallax.js makes it easy to create a parallax effect on a target HTML element, with great performance and no dependencies.
24
24
25
25
### Install
26
26
@@ -30,28 +30,29 @@ Using NPM, install Rallax, and save it to your `package.json` dependencies.
30
30
$ npm install rallax.js --save
31
31
```
32
32
33
-
### Import
34
-
35
-
Import Rallax, naming it according to your preference.
33
+
Then, import Rallax, naming it according to your preference.
36
34
37
35
```es6
38
36
importrallaxfrom'rallax.js'
39
37
```
40
38
41
39
### Call
42
40
43
-
To generate the desired effect, call Rallax, passing in your target-selector, image location, and your desired options.
41
+
To generate the desired effect, call Rallax, passing in your element/target-selector and your desired options.
44
42
45
43
```es6
46
44
// target: <div class="parallax"></div>
47
-
// image location: "./test-image.jpg"
48
45
49
46
constoptions= { speed:0.4 }
47
+
constparallax=rallax(".parallax", options)
48
+
49
+
// or:
50
50
51
-
rallax(".parallax", "./test-image.jpg", options)
51
+
consttarget=document.querySelector('.parallax')
52
+
constparallax=rallax(target, { speed:0.4 })
52
53
```
53
54
54
-
**Note**: Rallax.js does not make any assumptions regarding the styling of the target element.**In order to see the effect, you must set either a transparent or slighty-transparent background on the target.**
55
+
**Note**: Rallax.js does not make any assumptions regarding the styling of the target element.
55
56
56
57
## Options
57
58
@@ -60,71 +61,103 @@ You are not required to pass any options. All options come with sensible defaul
60
61
```es6
61
62
{
62
63
speed:0.3,
63
-
offset: {},
64
-
zIndex:-1000
64
+
mobilePx:false
65
65
}
66
66
```
67
67
68
68
Explanation of each option follows:
69
69
70
70
*[speed](#speed)
71
-
*[offset](#offset)
72
-
*[zIndex](#zIndex)
73
-
*[minPixels](#minPixels)
74
-
*[maxPixels](#maxPixels)
71
+
*[mobilePx](#mobilePx)
75
72
76
73
### speed
77
74
78
75
Accepts an `integer` between `0` and `1`.
79
76
80
-
At a speed of `0`, the image will scroll with the target.
81
-
At a speed of `1`, the image will appear fixed in place.
77
+
At a speed of `0`, the target will scroll like a static element.
78
+
At a speed of `1`, the target will appear fixed (will move at the speed of scroll).
82
79
83
-
### offset
80
+
### mobilePx
84
81
85
-
Accepts an `object`.
82
+
Accepts an `integer`, as number of pixels.
86
83
87
-
The `offset` option works similar to the [background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) CSS property. `offset` will specify the **center** of the image relative to the target element.
84
+
Pass this option if you want parallax for this target to automatically be disabled at a certain screen width.
88
85
89
-
`offset` is declared with two of the following keys: `top`, `bot`, `left`, `right`, followed by a an `integer` representing the number of pixels.
86
+
## API
90
87
91
-
```es6
92
-
// position the center of the image 10px from the top of the
93
-
// target, and 40 px from the left.
88
+
Calling Rallax will return an object with a set of methods defined. Those methods are:
89
+
90
+
*[stop](#stop)
91
+
*[start](#start)
92
+
*[changeSpeed](#changeSpeed)
93
+
*[when](#when)
94
94
95
-
rallax(".parallax", "./test-image.jpg", {
96
-
offset: {
97
-
top:10,
98
-
left:40
99
-
}
100
-
})
95
+
### stop
101
96
102
-
// by default, the image will be centered relative to the target
97
+
Calling `stop()` will pause the parallax effect on the target until the next time you call `start()`.
103
98
104
-
rallax(".parallax", "./test-image.jpg")
99
+
```es6
100
+
constparallax=rallax('.parallax')
101
+
102
+
if (condition) {
103
+
parallax.stop()
104
+
}
105
105
```
106
106
107
-
### zIndex
107
+
### start
108
+
109
+
Calling `start()` will re-enable the parallax effect if you had previously disabled it. **Note:** calling `start()` will not re-enable the effect if you have disabled it with the [mobilePx](#mobilePx) option.
108
110
109
-
Accepts an `integer`.
111
+
```es6
112
+
constparallax=rallax('.parallax')
113
+
parallax.stop()
114
+
115
+
// some time later
116
+
117
+
parallax.start()
118
+
```
110
119
111
-
`zIndex` specifies the [z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) property of the parallax image.
120
+
### changeSpeed (speed)
112
121
113
-
### maxPixels
122
+
Accepts a `float` between `0` and `1`.
114
123
115
-
Accepts an `integer`, specifying the maximum pixel width of the screen before 'turning off' the parallax effect.
124
+
Calling `changeSpeed` will change the speed of the target parallax effect.
116
125
117
-
Set `maxPixels` if you would like to turn off the parallax effect for very large screens.
126
+
```es6
127
+
// initialize the target at a speed of 0.6
128
+
constparallax=rallax('.parallax', {speed:0.6})
118
129
119
-
Once turned off, the parallax image will appear as a background image for the target.
130
+
// change speed to 1, making the target appear fixed
131
+
parallax.changeSpeed(1)
132
+
```
120
133
121
-
### minPixels
134
+
### when (condition, action)
122
135
123
-
Accepts an `integer`, specifying the minimum pixel width of the screen before 'turning off' the parallax effect.
136
+
Accepts a condition `function` and an action `function`.
124
137
125
-
Set `minPixels` if you would like to turn off the parallax effect for very small screens (such as mobile devices).
138
+
Calling `when` will queue a condition and action onto the target, which will be evaluated before the target is scrolled. The `when` method is useful for setting up all kinds of special effects.
126
139
127
-
Once turned off, the parallax image will appear as a background image for the target.
140
+
```es6
141
+
constparallax=rallax('.parallax')
142
+
143
+
// after reaching a certain position in the document,
144
+
// increase the target's speed
145
+
parallax.when(
146
+
() =>window.scrollY>400,
147
+
() =>parallax.changeSpeed(1)
148
+
)
149
+
150
+
// stop the parallax after a certain period of time
0 commit comments