1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
6 | <meta name="description" content="lightweight jQuery plugin that enables parallax scrolling effect on elements">
|
7 | <meta name="keywords"
|
8 | content="paroller.js,jquery plugin,parallax,scrolling,parallax effect,jQuery,paroller,scroller,scrolling, paroller js, paroller jquery">
|
9 | <meta name="google-site-verification" content="TWTDG5sHkQOekIFUa5uWVmi7yO3pJTU7AGMaIPajIHc"/>
|
10 | <title>paroller.js</title>
|
11 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
|
12 | integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
|
13 | <link rel="stylesheet" href="assets/style.css">
|
14 | <script src="https://use.fontawesome.com/9576790a31.js"></script>
|
15 | </head>
|
16 |
|
17 | <body class="my-body" data-spy="scroll" data-target="#main-navbar" data-offset="70">
|
18 | <nav class="navbar navbar-light bg-faded sticky-top navbar-toggleable-md" id="main-navbar">
|
19 | <a class="navbar-brand" href="#">
|
20 | <span class="logo-arrow"></span>
|
21 | <span class="pl-5">paroller.js</span>
|
22 | <span class="navbar-text small hidden-xs-down"> - parallax scrolling jQuery plugin</span>
|
23 | </a>
|
24 | <div class="collapse navbar-collapse justify-content-end">
|
25 | <ul class="nav nav-pills align-items-center">
|
26 | <li class="nav-item active">
|
27 | <a class="nav-link" href="#download">Download <span class="sr-only">(current)</span></a>
|
28 | </li>
|
29 | <li class="nav-item">
|
30 | <a class="nav-link" href="#usage">Usage</a>
|
31 | </li>
|
32 | <li class="nav-item">
|
33 | <a class="nav-link" href="#vertical">Vertical</a>
|
34 | </li>
|
35 | <li class="nav-item">
|
36 | <a class="nav-link" href="#horizontal">Horizontal</a>
|
37 | </li>
|
38 | <li class="nav-item">
|
39 | <a href="https://github.com/tgomilar/paroller.js/" class="mx-2">
|
40 | <i class="fa fa-github fa-2x"></i>
|
41 | </a>
|
42 | </li>
|
43 | </ul>
|
44 | </div>
|
45 | </nav>
|
46 | <div class="container">
|
47 | <section id="download" class="jumbotron text-center bg-faded my-5">
|
48 | <div class="container py-4">
|
49 | <h1 class="jumbotron-heading display-5 mb-3">Download</h1>
|
50 | <p class="lead col-8 mx-auto">paroller.js is a lightweight jQuery plugin that enables parallax scrolling
|
51 | effect on selected elements.</p>
|
52 | <ul class="text-left col-xs-12 col-sm-12 col-md-9 offset-md-2">
|
53 | <li>You can use it on elements with background property or on any other element.</li>
|
54 | <li>While scrolling elements can move: vertical, horizontal.</li>
|
55 | <li>Manipulated through <b>html data-*</b> attributes or <b>jQuery options</b>.</li>
|
56 | <li>Mobile ready.</li>
|
57 | <li>Easy to use.</li>
|
58 | </ul>
|
59 | <p class="mb-4">
|
60 | <a href="https://github.com/tgomilar/paroller.js/" target="_blank" class="btn btn-primary btn-lg my-2">
|
61 | <i class="fa fa-github" aria-hidden="true"></i> GitHub
|
62 | </a>
|
63 | <a href="https://github.com/tgomilar/paroller.js/archive/master.zip" target="_blank" class="btn btn-primary btn-lg my-2">
|
64 | <i class="fa fa-download" aria-hidden="true"></i> Download
|
65 | </a>
|
66 | </p>
|
67 | <h3>Previous versions</h3>
|
68 | <a href="https://github.com/tgomilar/paroller.js/releases/tag/v1.2.9" target="_blank" class="btn btn-secondary my-2">
|
69 | <i class="fa fa-download" aria-hidden="true"></i> Download v1.2.9
|
70 | </a>
|
71 | <hr class="my-5">
|
72 | <h1 class="jumbotron-heading display-5 mb-3">Install</h1>
|
73 | <div class="text-left col-xs-12 col-sm-12 col-md-9 offset-md-2">
|
74 | <p>Before closing <samp><code></body></code></samp> element include:</p>
|
75 | <dl class="row text-left">
|
76 | <dt class="col-sm-3">1. jQuery library</dt>
|
77 | <dd class="col-sm-9">
|
78 | <a href="http://jquery.com/download/" target="_blank"><i class="fa fa-link"></i> jQuery</a>
|
79 | <code><script src="jquery-3.1.1.min.js"></script></code>
|
80 | </dd>
|
81 | <dt class="col-sm-3">2. jquery.paroller.js</dt>
|
82 | <dd class="col-sm-9">
|
83 | <a href="https://github.com/tgomilar/paroller.js/blob/master/dist/" target="_blank"><i
|
84 | class="fa fa-link"></i> Paroller</a>
|
85 | <code><script src="jquery.paroller.min.js"></script></code>
|
86 | </dd>
|
87 | <dt class="col-sm-3">3. Use</dt>
|
88 | <dd class="col-sm-9">
|
89 | <div class="card mb-3">
|
90 | <div class="card-block">
|
91 | <code>
|
92 | // initialize paroller.js <br>
|
93 | $('.my-paroller').paroller();
|
94 | </code>
|
95 | </div>
|
96 | </div>
|
97 | <div class="card mb-3">
|
98 | <div class="card-block">
|
99 | <code>
|
100 | // initialize paroller.js and set attributes <br>
|
101 | $("#my-element").paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });
|
102 | </code>
|
103 | </div>
|
104 | </div>
|
105 | <div class="card">
|
106 | <div class="card-block">
|
107 | <code>
|
108 | // define element <br>
|
109 | <div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal"></div>
|
110 | <br><br>
|
111 | <div id="my-element"></div>
|
112 | </code>
|
113 | </div>
|
114 | </div>
|
115 | </dd>
|
116 | </dl>
|
117 | <h6>npm</h6>
|
118 | <div class="card my-3">
|
119 | <div class="card-block">
|
120 | <code>$ npm install paroller.js</code><br><br>
|
121 | <h6>npm and browserify</h6>
|
122 | <code>require('paroller.js');</code>
|
123 | </div>
|
124 | </div>
|
125 | <h6>Bower</h6>
|
126 | <div class="card my-3">
|
127 | <div class="card-block">
|
128 | <code>$ bower install paroller.js</code>
|
129 | </div>
|
130 | </div>
|
131 | <h6>Yarn</h6>
|
132 | <div class="card my-3">
|
133 | <div class="card-block">
|
134 | <code>$ yarn add paroller.js</code>
|
135 | </div>
|
136 | </div>
|
137 | </div>
|
138 | </div>
|
139 | </section>
|
140 | <section id="usage" class="jumbotron bg-faded my-5">
|
141 | <div class="container py-4">
|
142 | <h1 class="jumbotron-heading text-center display-5 mb-3">Usage</h1>
|
143 | <p class="lead text-center mb-5">
|
144 | To use paroller.js parallax scrolling effect you can use <b>data-paroller-*</b>
|
145 | attributes on selected elements or <b>set values via jQuery</b>.
|
146 | 'factor' sets speed and distance of element's parallax effect on scroll.
|
147 | </p>
|
148 | <div class="card">
|
149 | <div class="card-block">
|
150 | <pre>
|
151 | <div class="paroller"> Awesome element with parallax effect </div>
|
152 |
|
153 | // initialize paroller.js and set attributes for selected elements
|
154 | $(".paroller, [data-paroller-factor]").paroller({
|
155 | factor: 0.3, // multiplier for scrolling speed and offset
|
156 | type: 'foreground', // background, foreground
|
157 | direction: 'horizontal' // vertical, horizontal
|
158 | });
|
159 | </pre>
|
160 | </div>
|
161 | </div>
|
162 | <hr>
|
163 | <div class="card">
|
164 | <div class="card-block">
|
165 | <pre>
|
166 | <div data-paroller-factor="-0.1"
|
167 | data-paroller-type="foreground"
|
168 | data-paroller-direction="vertical">
|
169 | Awesome element with parallax effect
|
170 | </div>
|
171 |
|
172 | // initialize paroller.js
|
173 | $("[data-paroller-factor]").paroller();
|
174 | </pre>
|
175 | </div>
|
176 | </div>
|
177 | <hr class="my-5">
|
178 | <h2 class="text-center">Via data attributes</h2>
|
179 | <div class="my-5">
|
180 | <dl class="row text-left">
|
181 | <dt class="col-sm-3"><samp>data-paroller-factor</samp></dt>
|
182 | <dd class="col-sm-9">
|
183 | This attribute sets elements offset and speed. It can be positive (<i><samp>0.3</samp></i>) or negative (<i><samp>-0.3</samp></i>).
|
184 | Less means slower. <br>
|
185 | <code><div data-paroller-factor="0.3"></div></code>
|
186 | </dd>
|
187 |
|
188 | <dt class="col-sm-3"><samp>data-paroller-type</samp></dt>
|
189 | <dd class="col-sm-9">
|
190 | This attribute has two values <i><samp>background</samp></i> and <i><samp>foreground</samp></i>.<br>
|
191 | If not used the default value is set to: <i><samp>background</samp></i>. <br>
|
192 | <code><div data-paroller-factor="0.3" data-paroller-type="foreground"></div></code>
|
193 | </dd>
|
194 |
|
195 | <dt class="col-sm-3"><samp>data-paroller-direction</samp></dt>
|
196 | <dd class="col-sm-9">
|
197 | This attribute hsd two values: <i><samp>vertical</samp></i>, <i><samp>horizontal</samp></i>.<br>
|
198 | If not used the default value is set to: <i><samp>vertical</samp></i>. <br>
|
199 | <code><div data-paroller-factor="0.3" data-paroller-direction="horizontal"></div></code>
|
200 | </dd>
|
201 | </dl>
|
202 | </div>
|
203 | <hr class="my-5">
|
204 | <h2 class="text-center">Via JavaScript</h2>
|
205 | <div class="card my-5">
|
206 | <div class="card-block text-left">
|
207 | <pre>
|
208 | // initialize paroller.js and set attributes for selected elements
|
209 |
|
210 | $(".paroller, [data-paroller-factor]").paroller({
|
211 | factor: 0.3, // multiplier for scrolling speed and offset
|
212 | type: 'foreground', // background, foreground
|
213 | direction: 'horizontal' // vertical, horizontal
|
214 | });
|
215 | </pre>
|
216 | </div>
|
217 | </div>
|
218 | </div>
|
219 | </section>
|
220 | <section id="vertical" class="my-5">
|
221 | <div class="jumbotron text-center bg-faded my-5"
|
222 | style="background: url('https://unsplash.it/1200/600?image=1015') no-repeat center;"
|
223 | data-paroller-factor="0.5">
|
224 | <h1 class="heading-1 py-5 text-white">Hello Parallax!</h1>
|
225 | <p class="text-white">data-paroller-factor="0.5"</p>
|
226 | </div>
|
227 | <div class="jumbotron text-center bg-faded my-5"
|
228 | style="background: url('https://unsplash.it/1200/800?image=974') no-repeat center;"
|
229 | data-paroller-factor="-0.15">
|
230 | <h1 class="heading-1 py-5 text-white">Scrolling is fun!</h1>
|
231 | <p class="text-white">data-paroller-factor="-0.15"</p>
|
232 | </div>
|
233 | <div class="row my-5">
|
234 | <div class="col col-md-4 paroller">
|
235 | <div class="card">
|
236 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1024" alt="Card image cap">
|
237 | <div class="card-block">
|
238 | <h4 class="card-title">Card vertical</h4>
|
239 | <p class="card-text">
|
240 | <code>$('.paroller').paroller({
|
241 | factor: 0.4,
|
242 | type: 'foreground'
|
243 | });</code>
|
244 | </p>
|
245 | </div>
|
246 | </div>
|
247 | </div>
|
248 | <div class="col col-md-4" data-paroller-factor="0.1" data-paroller-type="foreground">
|
249 | <div class="card">
|
250 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1023" alt="Card image cap">
|
251 | <div class="card-block">
|
252 | <h4 class="card-title">Card vertical</h4>
|
253 | <p class="card-text">
|
254 | <code>data-paroller-factor="0.1" data-paroller-type="foreground"</code>
|
255 | </p>
|
256 | </div>
|
257 | </div>
|
258 | </div>
|
259 | <div class="col col-md-4" data-paroller-factor="-0.4" data-paroller-type="foreground">
|
260 | <div class="card">
|
261 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1022" alt="Card image cap">
|
262 | <div class="card-block">
|
263 | <h4 class="card-title">Card vertical</h4>
|
264 | <p class="card-text">
|
265 | <code>data-paroller-factor="-0.4" data-paroller-type="foreground"</code>
|
266 | </p>
|
267 | </div>
|
268 | </div>
|
269 | </div>
|
270 | </div>
|
271 | <div class="row my-5">
|
272 | <div class="col col-md-4" data-paroller-factor="0.9" data-paroller-type="foreground"
|
273 | data-paroller-direction="vertical">
|
274 | <div class="card">
|
275 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1021" alt="Card image cap">
|
276 | <div class="card-block">
|
277 | <h4 class="card-title">Card vertical</h4>
|
278 | <p class="card-text">
|
279 | <code>data-paroller-factor="0.9" data-paroller-type="foreground"
|
280 | data-paroller-direction="vertical"</code>
|
281 | </p>
|
282 | </div>
|
283 | </div>
|
284 | </div>
|
285 | <div class="col col-md-4" data-paroller-factor="0.15" data-paroller-type="foreground"
|
286 | data-paroller-direction="vertical">
|
287 | <div class="card">
|
288 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1020" alt="Card image cap">
|
289 | <div class="card-block">
|
290 | <h4 class="card-title">Card vertical</h4>
|
291 | <p class="card-text">
|
292 | <code>data-paroller-factor="0.15" data-paroller-type="foreground"
|
293 | data-paroller-direction="vertical"</code>
|
294 | </p>
|
295 | </div>
|
296 | </div>
|
297 | </div>
|
298 | <div class="col col-md-4" data-paroller-factor="-0.1" data-paroller-type="foreground"
|
299 | data-paroller-direction="vertical">
|
300 | <div class="card">
|
301 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1019" alt="Card image cap">
|
302 | <div class="card-block">
|
303 | <h4 class="card-title">Card vertical</h4>
|
304 | <p class="card-text">
|
305 | <code>data-paroller-factor="-0.1" data-paroller-type="foreground"
|
306 | data-paroller-direction="vertical"</code>
|
307 | </p>
|
308 | </div>
|
309 | </div>
|
310 | </div>
|
311 | </div>
|
312 | <div class="row my-5">
|
313 | <div class="col col-sm-6" data-paroller-factor="0.1" data-paroller-type="foreground"
|
314 | data-paroller-direction="vertical">
|
315 | <div class="card">
|
316 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1018" alt="Card image cap">
|
317 | <div class="card-block">
|
318 | <h4 class="card-title">Card vertical</h4>
|
319 | </div>
|
320 | </div>
|
321 | </div>
|
322 | <div class="col col-sm-6" data-paroller-factor="-0.1" data-paroller-type="foreground"
|
323 | data-paroller-direction="vertical">
|
324 | <div class="card">
|
325 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1033" alt="Card image cap">
|
326 | <div class="card-block">
|
327 | <h4 class="card-title">Card vertical</h4>
|
328 | </div>
|
329 | </div>
|
330 | </div>
|
331 | </div>
|
332 | </section>
|
333 | <section id="horizontal" class="my-5">
|
334 | <div class="jumbotron text-center bg-faded my-5"
|
335 | style="background: url('https://unsplash.it/1200/600/?image=981') center;"
|
336 | data-paroller-factor="0.5"
|
337 | data-paroller-direction="horizontal">
|
338 | <h1 class="heading-1 py-5 text-white">Hola, horizontal Parallax!</h1>
|
339 | <p class="text-white">data-paroller-factor="0.5"</p>
|
340 | </div>
|
341 | <div class="jumbotron text-center bg-faded my-5"
|
342 | style="background: url('https://unsplash.it/1200/600/?image=1079') repeat center;"
|
343 | data-paroller-factor="-0.75"
|
344 | data-paroller-direction="horizontal">
|
345 | <h1 class="heading-1 py-5 text-white">Maybe some horizontal scrolling with repeated background?</h1>
|
346 | <p class="text-white">data-paroller-factor="-0.75"</p>
|
347 | </div>
|
348 | <div class="row my-5">
|
349 | <div class="col col-md-4" data-paroller-factor="-0.3" data-paroller-type="foreground"
|
350 | data-paroller-direction="horizontal">
|
351 | <div class="card">
|
352 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1016" alt="Card image cap">
|
353 | <div class="card-block">
|
354 | <h4 class="card-title">Card horizontal</h4>
|
355 | <p class="card-text">
|
356 | <code>data-paroller-factor="-0.3" data-paroller-type="foreground"
|
357 | data-paroller-direction="horizontal"
|
358 | </code>
|
359 | </p>
|
360 | </div>
|
361 | </div>
|
362 | </div>
|
363 | <div class="col col-md-4" data-paroller-factor="-0.1" data-paroller-type="foreground"
|
364 | data-paroller-direction="horizontal">
|
365 | <div class="card">
|
366 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1014" alt="Card image cap">
|
367 | <div class="card-block">
|
368 | <h4 class="card-title">Card horizontal</h4>
|
369 | <p class="card-text">
|
370 | <code>data-paroller-factor="-0.1" data-paroller-type="foreground"
|
371 | data-paroller-direction="horizontal"</code>
|
372 | </p>
|
373 | </div>
|
374 | </div>
|
375 | </div>
|
376 | <div class="col col-md-4" data-paroller-factor="0.1" data-paroller-type="foreground"
|
377 | data-paroller-direction="horizontal">
|
378 | <div class="card">
|
379 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1013" alt="Card image cap">
|
380 | <div class="card-block">
|
381 | <h4 class="card-title">Card horizontal</h4>
|
382 | <p class="card-text">
|
383 | <code>data-paroller-factor="0.1" data-paroller-type="foreground"
|
384 | data-paroller-direction="horizontal"</code>
|
385 | </p>
|
386 | </div>
|
387 | </div>
|
388 | </div>
|
389 | </div>
|
390 | <div class="row my-5">
|
391 | <div class="col-12 col-sm-6" data-paroller-factor="0.27" data-paroller-type="foreground"
|
392 | data-paroller-direction="horizontal">
|
393 | <div class="card">
|
394 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1012" alt="Card image cap">
|
395 | <div class="card-block">
|
396 | <h4 class="card-title">Card horizontal</h4>
|
397 | </div>
|
398 | </div>
|
399 | </div>
|
400 | <div class="col-12 col-sm-6" data-paroller-factor="-0.1" data-paroller-type="foreground"
|
401 | data-paroller-direction="horizontal">
|
402 | <div class="card">
|
403 | <img class="card-img-top" src="https://unsplash.it/400/200/?image=1011" alt="Card image cap">
|
404 | <div class="card-block">
|
405 | <h4 class="card-title">Card horizontal</h4>
|
406 | </div>
|
407 | </div>
|
408 | </div>
|
409 | </div>
|
410 | </section>
|
411 | </div>
|
412 | <div class="clearfix"></div>
|
413 | <footer class="bg-faded text-muted py-5 mt-5">
|
414 | <div class="container">
|
415 | <div class="row">
|
416 | <div class="col-8">
|
417 | <p><b>Happy scrolling!</b></p>
|
418 | <p>
|
419 | <small>
|
420 | <script>document.write(new Date().getFullYear())</script>
|
421 | @ Copyrights <a href="https://github.com/tgomilar/paroller.js/blob/master/LICENCE.md"
|
422 | target="_blank">MIT</a>
|
423 | </small>
|
424 | </p>
|
425 | </div>
|
426 | <div class="col text-right">
|
427 | <iframe src="https://ghbtns.com/github-btn.html?user=tgomilar&repo=paroller.js&type=star&count=true&size=large"
|
428 | frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
429 | </div>
|
430 | </div>
|
431 | </div>
|
432 | </footer>
|
433 |
|
434 | <script src="https://code.jquery.com/jquery-3.2.1.min.js"
|
435 | crossorigin="anonymous"></script>
|
436 |
|
437 | <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
|
438 | integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
|
439 | crossorigin="anonymous"></script>
|
440 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
|
441 | integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
|
442 | crossorigin="anonymous"></script>
|
443 |
|
444 | <script src="dist/jquery.paroller.js"></script>
|
445 |
|
446 | <script>
|
447 | $(function () {
|
448 | $('[data-paroller-factor]').paroller();
|
449 | $('.paroller').paroller({
|
450 | factor: 0.4,
|
451 | type: 'foreground'
|
452 | });
|
453 | $('body').scrollspy({target: '#main-navbar'});
|
454 | });
|
455 | </script>
|
456 | </body>
|
457 | </html>
|