Skip to content

Commit 4fd8b85

Browse files
committed
readme update and version bump
1 parent 168945e commit 4fd8b85

File tree

2 files changed

+35
-1
lines changed

2 files changed

+35
-1
lines changed

Diff for: README.md

+33
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,39 @@ Also, keep in mind that once initialized, the parallax plugin presumes a fixed p
5050
jQuery(window).trigger('resize').trigger('scroll');
5151
```
5252

53+
### Using inner HTML for complex content
54+
55+
You can use the following syntax to enable complex content for the parallax:
56+
57+
```html
58+
<div class="parallax-window">
59+
<div class="parallax-slider">
60+
<span style="position:absolute; top: 400px; left: 400px;">Some Text</span>
61+
<p>Some other Content</p>
62+
</div>
63+
</div>
64+
```
65+
Please note, that the div with class "parallax-slider" is essential here.
66+
67+
You then need to initialize it through JS and provide the naturalWidth and naturalHeight options in order to be rendered correctly.
68+
69+
```
70+
$('.parallax-window').parallax({
71+
naturalWidth: 600,
72+
naturalHeight: 400
73+
});
74+
```
75+
76+
This also makes it possible to use responsive images in the slider:
77+
78+
```html
79+
<div class="parallax-window">
80+
<div class="parallax-slider">
81+
<img src="/path/to/image.jpg" srcset="/path/to/image-400px.jpg 400w, /path/to/image-800px.jpg 800w, /path/to/image-1200px.jpg 1200w" sizes="100vw">
82+
</div>
83+
</div>
84+
```
85+
5386
## Options
5487

5588
Options can be passed in via data attributes of JavaScript. For data attributes, append the option name to `data-`, as in `data-image-src=""`.

Diff for: bower.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"name": "parallax.js",
3-
"version": "1.3.2",
3+
"version": "1.4.0",
44
"homepage": "http://pixelcog.com/parallax.js/",
55
"description": "Simple parallax scrolling effect inspired by spotify.com implemented as a jQuery plugin",
66
"authors": [
77
"Mike Greiling <[email protected]> (http://pixelcog.com)"
8+
"Wolfgang Stöttinger <[email protected]> (http://www.wolfography.at)"
89
],
910
"main": "parallax.min.js",
1011
"license": "MIT",

0 commit comments

Comments
 (0)