Skip to content

Commit e0c2ce5

Browse files
nk-onk-o
committed
changed readme with info of how to import CSS (related #219)
added jarallax.min.css
1 parent e907ef8 commit e0c2ce5

File tree

11 files changed

+73
-37
lines changed

11 files changed

+73
-37
lines changed

‎README.md

+19-25
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ Parallax scrolling for modern browsers. Supported <img> tags, background i
1616
- [UMD](#umd)
1717
- [UMD CDN](#umd-cdn)
1818
- [CJS (Bundlers like Webpack)](#cjs-bundlers-like-webpack)
19-
- [Add styles](#add-styles)
2019
- [Prepare HTML](#prepare-html)
2120
- [Run Jarallax](#run-jarallax)
2221
- [A. JavaScript way](#a-javascript-way)
@@ -69,6 +68,10 @@ Use one of the following examples to import jarallax.
6968
We provide a version of Jarallax built as ESM (jarallax.esm.js and jarallax.esm.min.js) which allows you to use Jarallax as a module in your browser, if your [targeted browsers support it](https://caniuse.com/es6-module).
7069

7170
```html
71+
<!-- Jarallax CSS -->
72+
<link href="jarallax.min.css" rel="stylesheet">
73+
74+
<!-- Jarallax JS -->
7275
<script type="module">
7376
import { jarallax, jarallaxVideo } from "jarallax.esm.min.js";
7477
@@ -80,6 +83,10 @@ We provide a version of Jarallax built as ESM (jarallax.esm.js and jarallax.esm.
8083
### ESM CDN
8184

8285
```html
86+
<!-- Jarallax CSS -->
87+
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">
88+
89+
<!-- Jarallax JS -->
8390
<script type="module">
8491
import { jarallax, jarallaxVideo } from "https://cdn.jsdelivr.net/npm/jarallax@2/+esm";
8592
@@ -93,18 +100,26 @@ We provide a version of Jarallax built as ESM (jarallax.esm.js and jarallax.esm.
93100
Jarallax may be also used in a traditional way by including script in HTML and using library by accessing `window.jarallax`.
94101

95102
```html
103+
<!-- Jarallax CSS -->
104+
<link href="jarallax.min.css" rel="stylesheet">
105+
106+
<!-- Jarallax JS -->
96107
<script src="jarallax.min.js"></script>
97108

98-
<!-- Optional video extension -->
109+
<!-- Jarallax JS: Optional video extension -->
99110
<script src="jarallax-video.min.js"></script>
100111
```
101112

102113
### UMD CDN
103114

104115
```html
116+
<!-- Jarallax CSS -->
117+
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">
118+
119+
<!-- Jarallax JS -->
105120
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
106121

107-
<!-- Optional video extension -->
122+
<!-- Jarallax JS: Optional video extension -->
108123
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax-video.min.js"></script>
109124
```
110125

@@ -120,33 +135,12 @@ Import Jarallax by adding this line to your app's entry point (usually `index.js
120135

121136
```javascript
122137
import { jarallax, jarallaxVideo } from "jarallax";
138+
import 'jarallax/dist/jarallax.min.css';
123139

124140
// Optional video extension
125141
jarallaxVideo();
126142
```
127143

128-
## Add styles
129-
130-
These styles required to set proper background image position before Jarallax script initialized:
131-
132-
```css
133-
.jarallax {
134-
position: relative;
135-
z-index: 0;
136-
}
137-
.jarallax > .jarallax-img {
138-
position: absolute;
139-
object-fit: cover;
140-
top: 0;
141-
left: 0;
142-
width: 100%;
143-
height: 100%;
144-
z-index: -1;
145-
}
146-
```
147-
148-
You can include it from `/dist/jarallax.css`.
149-
150144
## Prepare HTML
151145

152146
```html

‎dist/jarallax.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/es-modules/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link href="./style.css" rel="stylesheet" />
1111

1212
<!-- Jarallax CSS -->
13-
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.css" rel="stylesheet" />
13+
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet" />
1414
</head>
1515
<body>
1616
<div class="section"><h1>ES Modules Example</h1></div>

‎examples/html/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link href="./style.css" rel="stylesheet" />
1111

1212
<!-- Jarallax CSS -->
13-
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.css" rel="stylesheet" />
13+
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet" />
1414
</head>
1515
<body>
1616
<div class="section"><h1>HTML Example</h1></div>

‎examples/javascript/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link href="./style.css" rel="stylesheet" />
1111

1212
<!-- Jarallax CSS -->
13-
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.css" rel="stylesheet" />
13+
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet" />
1414
</head>
1515
<body>
1616
<div class="section"><h1>JavaScript Example</h1></div>

‎examples/jquery/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link href="./style.css" rel="stylesheet" />
1111

1212
<!-- Jarallax CSS -->
13-
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.css" rel="stylesheet" />
13+
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet" />
1414
</head>
1515
<body>
1616
<div class="section"><h1>jQuery Example</h1></div>

‎examples/next-advanced/components/Jarallax.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef, useEffect } from 'react';
22

33
import { jarallax, jarallaxVideo } from 'jarallax';
4-
import 'jarallax/dist/jarallax.css';
4+
import 'jarallax/dist/jarallax.min.css';
55

66
// Optional video extension
77
jarallaxVideo();

‎examples/next/components/Jarallax.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef, useEffect } from 'react';
22

33
import { jarallax, jarallaxVideo } from 'jarallax';
4-
import 'jarallax/dist/jarallax.css';
4+
import 'jarallax/dist/jarallax.min.css';
55

66
// Optional video extension
77
jarallaxVideo();

‎package-lock.json

+32-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@types/jquery": "^3.5.16",
4646
"babel-plugin-annotate-pure-calls": "^0.4.0",
4747
"browserslist-config-nk": "^1.1.1",
48+
"clean-css": "^5.3.2",
4849
"cross-env": "^7.0.3",
4950
"eslint-config-nk": "^1.2.0",
5051
"husky": "^8.0.3",

‎rollup.config.mjs

+14
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import terser from '@rollup/plugin-terser';
66
import { nodeResolve } from '@rollup/plugin-node-resolve';
77
import copy from 'rollup-plugin-copy';
88
import serve from 'rollup-plugin-serve';
9+
import CleanCSS from 'clean-css';
910

1011
// TODO: Wait once this issue will be fixed before update the terser plugin https://github.com/rollup/plugins/issues/1371
1112
// TODO: Remove this hack once this issue will be resolved https://github.com/rollup/plugins/issues/1366
@@ -168,6 +169,19 @@ configs[0].plugins.unshift(
168169
})
169170
);
170171

172+
configs[0].plugins.unshift(
173+
copy({
174+
targets: [
175+
{
176+
src: './src/core.css',
177+
dest: 'dist',
178+
rename: () => 'jarallax.min.css',
179+
transform: (contents) => new CleanCSS().minify(contents).styles,
180+
},
181+
],
182+
})
183+
);
184+
171185
// Dev server.
172186
if (isDev()) {
173187
configs[configs.length - 1].plugins.push(

0 commit comments

Comments
 (0)