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
simpleParallax.js is a very simple and tiny Vanilla JS library which adds parallax animations on any images.
7
+
simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any images.
10
8
11
-
Where it may be laborious to get results through other plugins, simpleParallax.js stands out for its ease and its visual rendering. The parallax effect is directly applied on image tags, there is no need to use background images. You can read one case study [here](https://medium.com/@geoffrey.signorato/case-study-create-a-parallax-effect-directly-on-img-tags-with-javascript-35b8daf81471).
9
+
Where it may be laborious to get results through other plugins, simpleParallax.js stands out for its ease and its visual rendering. The parallax effect is directly applied to image tags, there is no need to use background images. More info on the case study [here](https://medium.com/@geoffrey.signorato/case-study-create-a-parallax-effect-directly-on-img-tags-with-javascript-35b8daf81471).
12
10
13
11
Any image will fit. Try it out!
14
12
15
13
16
14
## Installation
17
15
16
+
### Old way
17
+
18
18
Simply copy/paste the below snippet just before your closing `</body>` tag:
19
19
20
20
```html
@@ -27,7 +27,9 @@ or use the below CDN link provided by [jsDelivr.com](https://www.jsdelivr.com/pa
You can also choose to apply the parallax on multiple images:
62
72
63
73
```javascript
64
-
var images =document.querySelectorAll('img');
74
+
constimages=document.querySelectorAll('img');
65
75
newsimpleParallax(images);
66
76
```
67
77
## Settings
68
78
69
79
Setting | Type | Default | Hint
70
80
--- | --- | --- | ---
71
-
orientation | string | up | up - right - down - left - up left - up right - down left - down right
72
-
scale | int | 1.3 | need to be above 1.0
73
-
overflow | boolean | false |
74
-
delay | int | 0.4 | the delay is in second
75
-
transition | string | false | any CSS transition
76
-
customContainer | string or node | false | this can be a string of directly a node
77
-
maxTransition | int | 0 | the percentage where the parallax should stop (between 1 and 99)
81
+
orientation | String | up | up - right - down - left - up left - up right - down left - down right
82
+
scale | Number | 1.3 | need to be above 1
83
+
overflow | Boolean | false |
84
+
delay | Number | 0.4 | the delay is in second
85
+
transition | String | false | any CSS transition
86
+
customContainer | String or Node | false |
87
+
maxTransition | Number | 0 | it should be a percentage between 1 and 99
78
88
79
89
You can apply these settings with the following JS code:
80
90
@@ -89,26 +99,26 @@ new simpleParallax(images, {
89
99
});
90
100
```
91
101
92
-
### orientation - *string*
93
-
This is the direction of the parallax effect. Choose *up* and when scrolling down, the image will translate from bottom to top. When scroll up, the image will translate from top to bottom.
102
+
### 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.
94
104
95
-
### scale - *int*
96
-
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 you 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.
105
+
### 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).
97
107
98
-
### overflow - *boolean*
99
-
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.
108
+
### overflow - *Boolean* - see [example](https://simpleparallax.com#example-overflow)
109
+
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).
100
110
101
-
### delay - *int*
102
-
When a delay is set, the translation of the image will slightly continue when the user stop scrolling. That gives a very nice effect.
111
+
### delay - *Number* - see [example](https://simpleparallax.com#example-delay-transition)
112
+
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.
103
113
104
-
### transition - *string*
105
-
The transitionworks closely with the delay setting. The transition will add any CSS effect to the delay setting.
114
+
### 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*.
106
116
107
-
### customContainer - *string or node*
108
-
In some cases, you want the parallax effects to be apply on a container that have its own scroll, and not apply the parallax effects via the document scroll.
117
+
### customContainer - *String or Node*
118
+
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.
109
119
110
-
### maxTransition - *int*
111
-
The maxTransition setting can be used to stop the parallax transition after a given percentage. By default, it translate from 0% to 100% of the user viewport. You can change it here to any percentage you want.
120
+
### maxTransition - *Number* - see [example](https://simpleparallax.com#example-max-transition)
121
+
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.
112
122
113
123
## Methods
114
124
Destroy a simpleParallax instance:
@@ -118,11 +128,12 @@ var images = document.querySelectorAll('img');
118
128
var instance =newsimpleParallax(images);
119
129
instance.destroy();
120
130
```
131
+
121
132
## Examples
122
-
You can find some examples [here](https://simpleparallax.com/#examples).
133
+
You can find all the examples [here](https://simpleparallax.com/#examples).
123
134
124
135
## Compatibility
125
-
You can apply simpleParallax.js on picture tags/srcset images.
136
+
You can apply simpleParallax.js on picture tags along with srcset images.
0 commit comments