1
- ![ simpleParallax logo] ( https://simpleparallax.b-cdn.net/images/logo.png?new=new )
2
-
3
- [ ![ GitHub version] ( https://badge.fury.io/gh/geosenna%2FsimpleParallax.svg )] ( https://badge.fury.io/gh/geosenna%2FsimpleParallax ) [ ![ ] ( https://img.shields.io/npm/dm/simple-parallax-js )] ( https://www.npmjs.com/package/simple-parallax-js ) [ ![ GitHub issues] ( https://img.shields.io/github/issues/geosigno/simpleParallax.js.svg )] ( https://GitHub.com/geosigno/simpleParallax.js/issues/ ) [ ![ ] ( https://data.jsdelivr.com/v1/package/npm/simple-parallax-js/badge?style=rounded )] ( https://www.jsdelivr.com/package/npm/simple-parallax-js )
1
+ <div align =" center " >
2
+ <picture >
3
+ <source srcset =" https://simpleparallax.com/logo-vertical-dark.png " media =" (prefers-color-scheme: dark) " >
4
+ <source srcset =" https://simpleparallax.com/logo-vertical-light.png " media =" (prefers-color-scheme: light) " >
5
+ <img src =" https://simpleparallax.com/logo-vertical-dark.png " alt =" Logo " width =" 400 " height =" 180 " style =" display :block ;margin :0 auto ;" >
6
+ </picture >
7
+ </div >
4
8
5
9
# simpleParallax.js
6
10
@@ -61,14 +65,14 @@ simply add the following JavaScript code :
61
65
62
66
``` javascript
63
67
const image = document .getElementsByClassName (' thumbnail' );
64
- new simpleParallax (image);
68
+ new SimpleParallax (image);
65
69
```
66
70
67
71
You can also choose to apply the parallax on multiple images :
68
72
69
73
``` javascript
70
74
const images = document .querySelectorAll (' img' );
71
- new simpleParallax (images);
75
+ new SimpleParallax (images);
72
76
```
73
77
74
78
Once simpleparallax has been correctly initialized, it adds the ``` simple-parallax-initialized ``` class on the container.
@@ -83,7 +87,7 @@ simpleParallax now works with video :
83
87
84
88
``` javascript
85
89
var video = document .getElementsByTagName (' video' );
86
- new simpleParallax (video);
90
+ new SimpleParallax (video);
87
91
```
88
92
89
93
## Settings
@@ -142,7 +146,7 @@ const Component = () => (
142
146
143
147
``` javascript
144
148
var images = document .querySelectorAll (' .thumbnail' );
145
- new simpleParallax (images, {
149
+ new SimpleParallax (images, {
146
150
delay: 0 ,
147
151
orientation: ' down' ,
148
152
scale: 1.3 ,
@@ -186,7 +190,7 @@ Refresh a simpleParallax instance (to recalculate all the positions) :
186
190
187
191
``` javascript
188
192
var images = document .querySelectorAll (' img' );
189
- var instance = new simpleParallax (images);
193
+ var instance = new SimpleParallax (images);
190
194
instance .refresh ();
191
195
```
192
196
@@ -197,7 +201,7 @@ Destroy a simpleParallax instance:
197
201
198
202
``` javascript
199
203
var images = document .querySelectorAll (' img' );
200
- var instance = new simpleParallax (images);
204
+ var instance = new SimpleParallax (images);
201
205
instance .destroy ();
202
206
```
203
207
0 commit comments