Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Add class animation, and shift control to support it

  • Loading branch information...
commit 8bd61cc5614f99b5bd1721e4ebd690537b02343a 1 parent c17d9ed
Alastair McGowan-Douglas Altreus authored

Showing 1 changed file with 46 additions and 6 deletions. Show diff stats Hide diff stats

  1. +46 6 jquery.scroller.js
52 jquery.scroller.js
@@ -8,6 +8,50 @@
8 8 var Scroller = {};
9 9
10 10 /*
  11 + * class - add or remove a class
  12 + *
  13 + * This animation should be used with `shift` because it relies on a
  14 + * negative scroll value.
  15 + *
  16 + * classname: The name of the class to add when the scroll value becomes
  17 + * positive, and to remove when it becomes negative. This uses
  18 + * the jQuery addClass/removeClass functions, so you can specify
  19 + * multiple classnames using spaces.
  20 + */
  21 + Scroller.class = function(classname) {
  22 + var is_on = false; // this is cheaper than using hasClass
  23 + return function(event, args) {
  24 + console.log([args.t, is_on]);
  25 + if (args.t > 0 && !is_on) {
  26 + $(this).addClass(classname);
  27 + is_on = true;
  28 + }
  29 + else if (args.t <= 0 && is_on) {
  30 + $(this).removeClass(classname);
  31 + is_on = false;
  32 + }
  33 + }
  34 + };
  35 +
  36 + /*
  37 + * shift - Shift the scroll position by a number of pixels
  38 + *
  39 + * This control is different from `between` because animations will still play
  40 + * after this one - but they may receive a negative scroll value.
  41 + *
  42 + * by: The number of pixels to shift it by. A positive number will cause
  43 + * later animations to begin that number of pixels of scroll later than
  44 + * it would have.
  45 + */
  46 + Scroller.shift = function(by) {
  47 + return function(event, args) {
  48 + args.scroll_top -= by;
  49 + by *= args.pixel;
  50 + args.t -= by;
  51 + }
  52 + };
  53 +
  54 + /*
11 55 * parallax - Scroll faster or slower than the page to produce a parallax effect.
12 56 *
13 57 * layer: The perceived layer the element will be on. The main page is on layer zero.
@@ -60,7 +104,6 @@
60 104 return function(event, args) {
61 105 var f = from;
62 106 var t = to;
63   - var total_height = t-f;
64 107
65 108 if (f == 'onscreen') {
66 109 f = elem_offset.top - args.view_height;
@@ -69,6 +112,8 @@
69 112 t = elem_offset.top + $(this).outerHeight();
70 113 }
71 114
  115 + var total_height = t ? t-f : args.scroll_range - f;
  116 +
72 117 // Subtract the "from" position from scroll position.
73 118 args.scroll_top -= f;
74 119 f *= args.pixel;
@@ -170,7 +215,6 @@
170 215 });
171 216 }
172 217
173   - console.log(setup);
174 218 self.css(setup);
175 219
176 220 start_at = 0;
@@ -178,8 +222,6 @@
178 222 return function (event, args) {
179 223 var t_speed = speed * args.pixel;
180 224
181   - console.log(args);
182   -
183 225 var deg = 360 * (args.t / t_speed) + start_at;
184 226
185 227 var css = {
@@ -210,8 +252,6 @@
210 252 original_values[key] = self.css(key);
211 253 });
212 254
213   - console.log(original_values);
214   -
215 255 return function(event, args) {
216 256 var css = {};
217 257 var t_speed = speed * args.pixel;

0 comments on commit 8bd61cc

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