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
+10-5Lines changed: 10 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -82,8 +82,9 @@ orientation | String | up | up - right - down - left - up left - up right - down
82
82
scale | Number | 1.3 | need to be above 1
83
83
overflow | Boolean | false |
84
84
delay | Number | 0.4 | the delay is in second
85
-
transition | String | false | any CSS transition
85
+
transition | String | '' | any CSS transition
86
86
customContainer | String or Node | false |
87
+
customWrapper | string | '' | the selector of the custom wrapper
87
88
maxTransition | Number | 0 | it should be a percentage between 1 and 99
88
89
89
90
You can apply these settings with the following JS code:
@@ -95,15 +96,16 @@ new simpleParallax(images, {
95
96
orientation:'down',
96
97
scale:1.3,
97
98
overflow:true,
98
-
customContainer:'.container'
99
+
customContainer:'.container',
100
+
customWrapper:'.wrapper'
99
101
});
100
102
```
101
103
102
104
### orientation - *String* - see [example](https://simpleparallax.com#example-orientation)
103
-
This is the orientation (or direction) of the parallax effect. Choose *up* and when scrolling down, the image will translate from the bottom to the top (so the image will translate up). When scrolling up, the image will translate from the top to the bottom. Same logic apply for all others orientations (*right*, *down*, *left*, *up left*, *up right*, *down left* or *down right*). When 2 directions are combined (for example *down right*), the image will translate diagonally.
105
+
This is the orientation (or direction) of the parallax effect. Choose *up* and when scrolling down, the image will translate from the bottom to the top (so the image will translate up). When scrolling up, the image will translate from the top to the bottom. Same logic applies for all others orientations (*right*, *down*, *left*, *up left*, *up right*, *down left* or *down right*). When 2 directions are combined (for example *down right*), the image will translate diagonally.
104
106
105
107
### scale - *Number* - see [example](https://simpleparallax.com#example-scale)
106
-
The higher the scale is set, the more visible the parallax effect will be. In return, the image will lose in quality. To reduce the lossless effect, if the scale is set at 1.5 and your image is 500px width, do the simple math 500 * 1.5 = 750. So you can choose a 750px image to replace your 500px one, and don't see any quality leak. More information are available if you read the case study [here](https://medium.com/@geoffrey.signorato/case-study-create-a-parallax-effect-directly-on-img-tags-with-javascript-35b8daf81471).
108
+
The higher the scale is set, the more visible the parallax effect will be. In return, the image will lose in quality. To reduce the lossless effect, if the scale is set at 1.5 and your image is 500px width, do the simple math 500 * 1.5 = 750. So you can choose a 750px image to replace your 500px one, and don't see any quality leak. More information is available if you read the case study [here](https://medium.com/@geoffrey.signorato/case-study-create-a-parallax-effect-directly-on-img-tags-with-javascript-35b8daf81471).
107
109
108
110
### overflow - *Boolean* - see [example](https://simpleparallax.com#example-overflow)
109
111
By default, the image is scaled to apply a parallax effect without any overflow on the layout - you can check the [case study](https://medium.com/@geoffrey.signorato/case-study-create-a-parallax-effect-directly-on-img-tags-with-javascript-35b8daf81471) to have a better understanding. When *overflow* is set to true, the image will translate out of its natural flow (so it may overlap with your content).
@@ -112,11 +114,14 @@ By default, the image is scaled to apply a parallax effect without any overflow
112
114
When a *delay* is set, the translation of the image will continue during that delay when the user stops scrolling. That gives a very nice effect. The delay is in second.
113
115
114
116
### transition - *String* - see [example](https://simpleparallax.com#example-delay-transition)
115
-
The *transition* setting works closely with the *delay* setting. This setting will add any CSS transition to the delay setting. For example you can use *ease* or *ease-in-out*.
117
+
The *transition* setting works closely with the *delay* setting. This setting will add any CSS transition to the delay setting. For example, you can use *ease* or *ease-in-out*.
116
118
117
119
### customContainer - *String or Node*
118
120
By default, the parallax calculation is done with the body scroll percentage. In some cases, the images may be in a container that has its own scroll area, so to have an accurate calculation, the custom container should be set.
119
121
122
+
### customWrapper - *string*
123
+
In some cases, you want to use your own wrapper instead of the one created by the plugin. If you specify your custom wrapper, the plugin will add the "simpleParallax" class along with an "overflow: hidden" style.
124
+
120
125
### maxTransition - *Number* - see [example](https://simpleparallax.com#example-max-transition)
121
126
The maxTransition setting should be used to stop the parallax animation after a given percentage. By default, it translates from 0% to 100% of the user viewport. You can change it here to any percentage you want.
varwrapper=this.elementContainer;// get the customWrapper if any
319
+
320
+
varcustomWrapper=this.settings.customWrapper&&this.element.closest(this.settings.customWrapper);//if there is a custom wrapper, we jusy need to remove the class and style
0 commit comments