Skip to content

Commit 3fbf5db

Browse files
committed
update readme.md to utilize github flavored code highlighting
1 parent 61112f4 commit 3fbf5db

File tree

1 file changed

+16
-8
lines changed

1 file changed

+16
-8
lines changed

README.md

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,41 @@ Simple parallax scrolling effect inspired by [Spotify.com](http://spotify.com/)
88

99
Download and include `parallax.min.js` in your document after including jQuery.
1010

11-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
12-
<script src="/path/to/parallax.js"></script>
11+
```html
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
13+
<script src="/path/to/parallax.min.js"></script>
14+
```
1315

1416
## Usage
1517

1618
### Via data attributes
1719

1820
To easily add a parallax effect behind an element, add `data-parallax="scroll"` to the element you want to use, and specify an image with `data-image-src="/path/to/image.jpg"`.
1921

20-
<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>
22+
```html
23+
<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>
24+
```
2125

2226
### Via JavaScript
2327

2428
To call the parallax plugin manually, simply select your target element with jQuery and do the following:
2529

26-
$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});
30+
```javascript
31+
$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});
32+
```
2733

2834
### Notes
2935

3036
What parallax.js will do is create a fixed-position element for each parallax image at the start of the document's body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.
3137

3238
Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath. Also, if there is no other content in this element, you will need to ensure that it has some fixed dimensions otherwise you won't see anything.
3339

34-
.parallax-window {
35-
min-height: 400px;
36-
background: transparent;
37-
}
40+
```css
41+
.parallax-window {
42+
min-height: 400px;
43+
background: transparent;
44+
}
45+
```
3846

3947
## Options
4048

0 commit comments

Comments
 (0)