Skip to content

Commit f09c9ae

Browse files
nk-onk-o
committed
added usage examples
1 parent 5a2ef98 commit f09c9ae

27 files changed

+760
-6
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
demo
22
dist
3+
examples

‎README.md

+13-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Parallax scrolling for modern browsers. Supported <img> tags, background i
99
## Table of contents
1010

1111
- [WordPress Plugin](#wordpress-plugin)
12-
- [React Example](#react-example)
12+
- [Quick Start](#quick-start)
1313
- [Import Jarallax](#import-jarallax)
1414
- [Add styles](#add-styles)
1515
- [Prepare HTML](#prepare-html)
@@ -32,9 +32,16 @@ Demo: <https://wpbackgrounds.com/>
3232

3333
Download: <https://wordpress.org/plugins/advanced-backgrounds/>
3434

35-
## React Example
35+
## Quick Start
3636

37-
Demo: <https://codepen.io/_nK/pen/mddWddr>
37+
There are a set of examples, which you can use as a starting point with Jarallax.
38+
39+
- [ES Modules](examples/es-modules)
40+
- [JavaScript](examples/javascript)
41+
- [Next.js](examples/next)
42+
- [Next.js Advanced Usage](examples/next-advanced)
43+
- [HTML](examples/html)
44+
- [jQuery](examples/jquery)
3845

3946
## Import Jarallax
4047

@@ -209,17 +216,17 @@ jarallax(document.querySelectorAll('.jarallax'), {
209216

210217
```html
211218
<!-- Background YouTube Parallax -->
212-
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
219+
<div class="jarallax" data-jarallax data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
213220
Your content here...
214221
</div>
215222

216223
<!-- Background Vimeo Parallax -->
217-
<div class="jarallax" data-jarallax-video="https://vimeo.com/110138539">
224+
<div class="jarallax" data-jarallax data-video-src="https://vimeo.com/110138539">
218225
Your content here...
219226
</div>
220227

221228
<!-- Background Self-Hosted Video Parallax -->
222-
<div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
229+
<div class="jarallax" data-jarallax data-video-src="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
223230
Your content here...
224231
</div>
225232
```

‎examples/es-modules/.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# debug
7+
npm-debug.log*
8+
yarn-debug.log*
9+
yarn-error.log*
10+
11+
# lock
12+
package-lock.json

‎examples/es-modules/index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>ES Modules Example</title>
8+
9+
<!-- Demo Styles -->
10+
<link href="./style.css" rel="stylesheet" />
11+
12+
<!-- Jarallax CSS -->
13+
<link href="https://unpkg.com/jarallax/dist/jarallax.css" rel="stylesheet" />
14+
</head>
15+
<body>
16+
<div class="section"><h1>ES Modules Example</h1></div>
17+
18+
<div class="jarallax">
19+
<img class="jarallax-img" src="https://jarallax.nkdev.info/images/image1.jpg" alt="" />
20+
</div>
21+
22+
<div class="jarallax" data-video-src="https://youtu.be/mru3Q5m4lkY"></div>
23+
24+
<div class="section"></div>
25+
26+
<!-- Init Jarallax -->
27+
<script type="module">
28+
import { jarallax, jarallaxVideo } from "jarallax";
29+
30+
// Optional video extension
31+
jarallaxVideo();
32+
33+
jarallax(document.querySelectorAll(".jarallax"));
34+
</script>
35+
</body>
36+
</html>

‎examples/es-modules/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"start": "browser-sync start --server --open local"
5+
},
6+
"dependencies": {
7+
"jarallax": "latest"
8+
},
9+
"devDependencies": {
10+
"browser-sync": "^2.27.7"
11+
}
12+
}

‎examples/es-modules/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* These styles are used for DEMO purpose only.
3+
*/
4+
*,
5+
:after,
6+
:before {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12+
font-size: 20px;
13+
margin: 0;
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
17+
.section {
18+
height: 60vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
}
23+
24+
.jarallax {
25+
height: 80vh;
26+
}

‎examples/html/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>HTML Example</title>
8+
9+
<!-- Demo Styles -->
10+
<link href="./style.css" rel="stylesheet" />
11+
12+
<!-- Jarallax CSS -->
13+
<link href="https://unpkg.com/jarallax/dist/jarallax.css" rel="stylesheet" />
14+
</head>
15+
<body>
16+
<div class="section"><h1>HTML Example</h1></div>
17+
18+
<div class="jarallax" data-jarallax>
19+
<img class="jarallax-img" src="https://jarallax.nkdev.info/images/image1.jpg" alt="" />
20+
</div>
21+
22+
<div class="jarallax" data-jarallax data-video-src="https://youtu.be/mru3Q5m4lkY"></div>
23+
24+
<div class="section"></div>
25+
26+
<!-- Jarallax JS -->
27+
<script src="https://unpkg.com/jarallax"></script>
28+
<script src="https://unpkg.com/jarallax/dist/jarallax-video.min.js"></script>
29+
</body>
30+
</html>

‎examples/html/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* These styles are used for DEMO purpose only.
3+
*/
4+
*,
5+
:after,
6+
:before {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12+
font-size: 20px;
13+
margin: 0;
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
17+
.section {
18+
height: 60vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
}
23+
24+
.jarallax {
25+
height: 80vh;
26+
}

‎examples/javascript/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>JavaScript Example</title>
8+
9+
<!-- Demo Styles -->
10+
<link href="./style.css" rel="stylesheet" />
11+
12+
<!-- Jarallax CSS -->
13+
<link href="https://unpkg.com/jarallax/dist/jarallax.css" rel="stylesheet" />
14+
</head>
15+
<body>
16+
<div class="section"><h1>JavaScript Example</h1></div>
17+
18+
<div class="jarallax">
19+
<img class="jarallax-img" src="https://jarallax.nkdev.info/images/image1.jpg" alt="" />
20+
</div>
21+
22+
<div class="jarallax" data-video-src="https://youtu.be/mru3Q5m4lkY"></div>
23+
24+
<div class="section"></div>
25+
26+
<!-- Jarallax JS -->
27+
<script src="https://unpkg.com/jarallax"></script>
28+
<script src="https://unpkg.com/jarallax/dist/jarallax-video.min.js"></script>
29+
30+
<!-- Init Jarallax -->
31+
<script type="text/javascript">
32+
jarallax(document.querySelectorAll(".jarallax"));
33+
</script>
34+
</body>
35+
</html>

‎examples/javascript/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* These styles are used for DEMO purpose only.
3+
*/
4+
*,
5+
:after,
6+
:before {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12+
font-size: 20px;
13+
margin: 0;
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
17+
.section {
18+
height: 60vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
}
23+
24+
.jarallax {
25+
height: 80vh;
26+
}

‎examples/jquery/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>jQuery Example</title>
8+
9+
<!-- Demo Styles -->
10+
<link href="./style.css" rel="stylesheet" />
11+
12+
<!-- Jarallax CSS -->
13+
<link href="https://unpkg.com/jarallax/dist/jarallax.css" rel="stylesheet" />
14+
</head>
15+
<body>
16+
<div class="section"><h1>jQuery Example</h1></div>
17+
18+
<div class="jarallax">
19+
<img class="jarallax-img" src="https://jarallax.nkdev.info/images/image1.jpg" alt="" />
20+
</div>
21+
22+
<div class="jarallax" data-video-src="https://youtu.be/mru3Q5m4lkY"></div>
23+
24+
<div class="section"></div>
25+
26+
<!-- jQuery -->
27+
<script src="https://unpkg.com/jquery"></script>
28+
29+
<!-- Jarallax JS -->
30+
<script src="https://unpkg.com/jarallax"></script>
31+
<script src="https://unpkg.com/jarallax/dist/jarallax-video.min.js"></script>
32+
33+
<!-- Init Jarallax -->
34+
<script type="text/javascript">
35+
$(".jarallax").jarallax();
36+
</script>
37+
</body>
38+
</html>

‎examples/jquery/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* These styles are used for DEMO purpose only.
3+
*/
4+
*,
5+
:after,
6+
:before {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
12+
font-size: 20px;
13+
margin: 0;
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
17+
.section {
18+
height: 60vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
}
23+
24+
.jarallax {
25+
height: 80vh;
26+
}

‎examples/next-advanced/.gitignore

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# next.js
7+
/.next/
8+
/out/
9+
10+
# production
11+
/build
12+
13+
# debug
14+
npm-debug.log*
15+
yarn-debug.log*
16+
yarn-error.log*
17+
18+
# local env files
19+
.env.local
20+
.env.development.local
21+
.env.test.local
22+
.env.production.local
23+
24+
# vercel
25+
.vercel
26+
27+
# lock
28+
package-lock.json
29+
30+

0 commit comments

Comments
 (0)