UNPKG

23.3 kBHTMLView Raw
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>&lt;/body&gt;</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>&lt;script src="jquery-3.1.1.min.js"&gt;&lt;/script&gt;</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>&lt;script src="jquery.paroller.min.js"&gt;&lt;/script&gt;</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 &lt;div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal">&lt;/div&gt;
110 <br><br>
111 &lt;div id="my-element">&lt;/div&gt;
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 &lt;div class="paroller"&gt; Awesome element with parallax effect &lt;/div&gt;
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 &lt;div data-paroller-factor="-0.1"
167 data-paroller-type="foreground"
168 data-paroller-direction="vertical"&gt;
169 Awesome element with parallax effect
170 &lt;/div&gt;
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>&lt;div data-paroller-factor="0.3"&gt;&lt;/div&gt;</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>&lt;div data-paroller-factor="0.3" data-paroller-type="foreground"&gt;&lt;/div&gt;</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>&lt;div data-paroller-factor="0.3" data-paroller-direction="horizontal"&gt;&lt;/div&gt;</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<!-- jQuery -->
434<script src="https://code.jquery.com/jquery-3.2.1.min.js"
435 crossorigin="anonymous"></script>
436<!-- Bootstrap 4-->
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<!--Paroller-->
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>