Skip to content

Commit 8101fa7

Browse files
committed
Improved usage documentation.
1 parent e525ed6 commit 8101fa7

File tree

1 file changed

+30
-5
lines changed

1 file changed

+30
-5
lines changed

README.md

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ Usage
1919

2020
### Quickstart
2121

22+
Include module and dependencies.
23+
```html
24+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
25+
<script src="http://durated.github.io/angular-parallax/angular-scroll.min.js"></script>
26+
<script src="http://durated.github.io/angular-parallax/angular-parallax.min.js"></script>
27+
```
28+
29+
Define transitions and expose to template.
2230
```js
2331
angular.module('myApp', ['duParallax']).
2432
controller('MyCtrl', function($scope, parallaxHelper){
@@ -27,16 +35,33 @@ angular.module('myApp', ['duParallax']).
2735
);
2836
```
2937

38+
Apply parallax scrolling with the `du-parallax` attribute, define `y` position with the transition named `background`.
3039
```html
3140
<section ng-controller="MyCtrl">
3241
<img src="img.png" du-parallax y="background" alt="" />
3342
</section>
43+
```
3444

35-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
36-
<script src="http://durated.github.io/angular-parallax/angular-scroll.min.js"></script>
37-
<script src="http://durated.github.io/angular-parallax/angular-parallax.min.js"></script>
45+
### `createAnimator`
46+
47+
```js
48+
parallaxHelper.createAnimator(easingFactor, min, max, offset);
3849
```
3950

51+
### Animatable attributes
52+
53+
Attributes can be literals or a function called with a parameter object containing `scrollY`, `elemX`, `elemY`. The function should return the change in pixels relative to the objects current position if associated with y or x, otherwise the desired new value.
54+
55+
* y
56+
* x
57+
* rotation
58+
* opacity
59+
60+
```html
61+
<img src="img.png" du-parallax y="accelleratedScroll" y="moveInFromLeft" opacity="fadeIn" rotation="'35deg'" alt="" />
62+
```
63+
64+
4065
Example
4166
-------
4267

@@ -51,8 +76,8 @@ Building
5176
Authors
5277
-------
5378

54-
* @oblador
55-
* @fisshy
79+
* [Joel Arvidsson](https://github.com/oblador)
80+
* [Joachim Karlsson](https://github.com/fisshy)
5681

5782
License
5883
--------

0 commit comments

Comments
 (0)