Skip to content

Commit

Permalink
readme update and version bump
Browse files Browse the repository at this point in the history
  • Loading branch information
wstoettinger committed Dec 21, 2015
1 parent 168945e commit 4fd8b85
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 1 deletion.
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,39 @@ Also, keep in mind that once initialized, the parallax plugin presumes a fixed p
jQuery(window).trigger('resize').trigger('scroll');
```

### Using inner HTML for complex content

You can use the following syntax to enable complex content for the parallax:

```html
<div class="parallax-window">
<div class="parallax-slider">
<span style="position:absolute; top: 400px; left: 400px;">Some Text</span>
<p>Some other Content</p>
</div>
</div>
```
Please note, that the div with class "parallax-slider" is essential here.

You then need to initialize it through JS and provide the naturalWidth and naturalHeight options in order to be rendered correctly.

```
$('.parallax-window').parallax({
naturalWidth: 600,
naturalHeight: 400
});
```

This also makes it possible to use responsive images in the slider:

```html
<div class="parallax-window">
<div class="parallax-slider">
<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">
</div>
</div>
```

## Options

Options can be passed in via data attributes of JavaScript. For data attributes, append the option name to `data-`, as in `data-image-src=""`.
Expand Down
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"name": "parallax.js",
"version": "1.3.2",
"version": "1.4.0",
"homepage": "http://pixelcog.com/parallax.js/",
"description": "Simple parallax scrolling effect inspired by spotify.com implemented as a jQuery plugin",
"authors": [
"Mike Greiling <[email protected]> (http://pixelcog.com)"
"Wolfgang Stöttinger <[email protected]> (http://www.wolfography.at)"
],
"main": "parallax.min.js",
"license": "MIT",
Expand Down

0 comments on commit 4fd8b85

Please sign in to comment.