Skip to content
This repository
Browse code

Added documentation for version 1.1 features

  • Loading branch information...
commit 12f3259340b185430b39d10331d82bbf0502a42a 1 parent 660fcbf
Joel Besada authored

Showing 1 changed file with 27 additions and 4 deletions. Show diff stats Hide diff stats

  1. +27 4 README.md
31 README.md
Source Rendered
@@ -6,7 +6,7 @@ follows when scrolling.
6 6 Demo: http://joelb.me/scrollpath
7 7
8 8 Author: Joel Besada (http://www.joelb.me)
9   -Version: 1.0 (2012-02-01)
  9 +Version: 1.1 (2012-02-06)
10 10 Copyright 2012, Joel Besada
11 11
12 12 MIT Licensed (http://www.opensource.org/licenses/mit-license.php)
@@ -19,6 +19,8 @@ Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The
19 19
20 20 The plugin also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.
21 21
  22 +As of version 1.1, the plugin also allows you to animate the scroll position to a given waypoint in the path.
  23 +
22 24 __Are you using jQuery Scroll Path on any of your sites?__ I'd love to hear about it, and I might include links here for showcasing the plugin being used in the wild.
23 25
24 26
@@ -28,6 +30,8 @@ This guide aims to help you with getting started using the plugin. In addition t
28 30 ### The Files
29 31 To include the plugin on your page, grab the _min.jquery.scrollpath.js_ or _jquery.scrollpath.js_ file from the _script/_ folder of this repo. If you want to include the scrollbar, make sure to include the _scrollpath.css_ stylesheet from _style/_ aswell.
30 32
  33 +__Note: This plugin requires jQuery 1.7+__
  34 +
31 35 ### Drawing the Path
32 36 To start drawing your path, we need to get the `Path` object from the plugin. This is done by calling `$.fn.scrollPath("getPath");`, which returns the object. For anyone who has used canvas before, you can think of the `Path` object the same way as the canvas context object.
33 37
@@ -58,13 +62,16 @@ I recommend reading [this tutorial about arcs](http://www.html5canvastutorials.c
58 62 Rotates the screen around the current position to the given radian angle. These rotations aren't added to the path if the browser doesn't support CSS transforms.
59 63
60 64 #### The Options Parameter
61   -The optional `options` parameter takes an object with the properties `rotate` and `callback`. The rotate property is used to rotate to a given radian angle when moving along the path. The callback property lets you specify a function that will be called every time the __end point__ of the path is reached. Here is an example of rotating a full rotation along a line and firing an alert at the end:
  65 +The optional `options` parameter takes an object with the properties `rotate`, `callback` and `name`. The rotate property is used to rotate to a given radian angle when moving along the path. The callback property lets you specify a function that will be called every time the __end point__ of the path is reached. Specifying the name property allows you to set a reference to the end point of the path, which can later be used as a target for the `scrollTo` method.
  66 +
  67 +Here is an example of a named path, rotating a full rotation along a line and firing an alert at the end:
62 68
63 69 path.lineTo(500,500, {
64 70 rotate: 2 * Math.PI,
65 71 callback: function() {
66 72 alert("You've reached the end!");
67   - }
  73 + },
  74 + name: "myPath"
68 75 });
69 76
70 77 ### Initating the Plugin
@@ -86,4 +93,20 @@ Here's an example:
86 93
87 94 Once you initate the plugin, it will automatically center the screen to the first point in the path. While scrolling, the plugin will also always make sure that the center of the screen follows the path. Also, whenever the window is resized, the plugin makes sure it re-centers itself
88 95
89   -__You should now have everything set up and ready to go!__
  96 +__You should now have everything set up and ready to go!__
  97 +
  98 +### Scrolling Programmatically (Animations)
  99 + $.fn.scrollPath( "scrollTo", name [, duration, easing, complete] );
  100 +
  101 +Once the plugin has been initalized, you can use the `scrollTo` method above to animate or jump (with `duration` set to 0) to given points in the path. These points are specified with the name parameter, which you can set on the different path end-points while creating the path.
  102 +
  103 +The last three parameters `duration, easing, complete` work the same way as the [jQuery .animate() method](http://api.jquery.com/animate/). You can use custom easing functions by for example including the popular [jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/) in your project. Here's an example using a easing method from the easing plugin:
  104 +
  105 + $.fn.scrollPath("scrollTo", myPath, 1000, "easeInOutSine", function() {
  106 + alert("Animation complete!")
  107 + });
  108 +
  109 +Changelog
  110 +---------
  111 +__Version 1.1 (2012-02-06)__:
  112 +Added support for programmatically scrolling/animating to specified points in the path.

0 comments on commit 12f3259

Please sign in to comment.
Something went wrong with that request. Please try again.