Skip to content

Commit f269d29

Browse files
kasparsjkasparsj
committed
added color and backgroundColor properties
1 parent ecb0f78 commit f269d29

File tree

6 files changed

+188
-9
lines changed

6 files changed

+188
-9
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ scale
5959

6060
rotate
6161

62+
color
63+
64+
backgroundColor
65+
6266
opacity
6367

6468
### Options

‎examples/bg.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Color & background tweening | jquery-data-parallax examples</title>
6+
<link rel="stylesheet" href="css/examples.css" type="text/css">
7+
</head>
8+
<body>
9+
<div style="height: 2000vh; background-color: white;" data-parallax='{"backgroundColor":"#FF0001", "color":"#00ffff"}'>
10+
<p style="position: fixed; left: 50%; top: 50%; width: 200px; margin-left: -100px; margin-top: -10px;"> &downarrow; SCROLL DOWN &downarrow;</p>
11+
</div>
12+
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
13+
<script src="https://cdn.rawgit.com/kasparsj/jquery.requestAnimationFrame/master/jquery.requestAnimationFrame.min.js"></script>
14+
<script src="../jquery.data-parallax.js"></script>
15+
</body>
16+
</html>

‎examples/hero-bg.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head lang="en">
44
<meta charset="UTF-8">
5-
<title>Hero section background | jquery-data-parallax examples</title>
5+
<title>Hero section background image | jquery-data-parallax examples</title>
66
<link rel="stylesheet" href="css/examples.css" type="text/css">
77
</head>
88
<body>

‎examples/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<body>
88
<ul>
99
<li><a href="sections.html">Classic parallax sections</a></li>
10-
<li><a href="hero-bg.html">Hero section background</a></li>
10+
<li><a href="hero-bg.html">Hero section background image</a></li>
11+
<li><a href="bg.html">Color & background tweening</a></li>
1112
<li><a href="Dave%20Gamache.html">Experiment: recreating Dave Gamache Parallax Demo uing [data-parallax]</a></li>
1213
</ul>
1314
</body>

‎jquery.data-parallax.js

Lines changed: 164 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,14 @@
108108
animation.transform = new Transform(new TransformMatrix());
109109
}
110110

111+
if (typeof options.color != "undefined") {
112+
var colorOptions = mergeOptions(options.color, globalOptions);
113+
animation.color = new Scene($this, colorOptions, 0xffffff);
114+
}
115+
if (typeof options.backgroundColor != "undefined") {
116+
var bgColorOptions = mergeOptions(options.backgroundColor, globalOptions);
117+
animation.bgColor = new Scene($this, bgColorOptions, 0xffffff);
118+
}
111119
if (typeof options.opacity != "undefined") {
112120
var opacityOptions = mergeOptions(options.opacity, globalOptions);
113121
animation.opacity = new Scene($this, opacityOptions, 1);
@@ -179,6 +187,18 @@
179187
this.style['-o-transform'] = transform;
180188
this.style.transform = transform;
181189
}
190+
if (animation.color && animation.color.needsUpdate()) {
191+
var fromColor = RGBColor.fromString(animation.color.getFrom(style.color)),
192+
toColor = RGBColor.fromString(animation.color.to);
193+
fromColor.interpolate(toColor, animation.color.getProgress());
194+
this.style.color = fromColor.toString();
195+
}
196+
if (animation.bgColor && animation.bgColor.needsUpdate()) {
197+
var fromColor = RGBColor.fromString(animation.bgColor.getFrom(style.backgroundColor)),
198+
toColor = RGBColor.fromString(animation.bgColor.to);
199+
fromColor.interpolate(toColor, animation.bgColor.getProgress());
200+
this.style.backgroundColor = fromColor.toString();
201+
}
182202
if (animation.opacity && animation.opacity.needsUpdate()) {
183203
var newOpacity = animation.opacity.getValue(parseFloat(style.opacity));
184204
this.style.opacity = newOpacity;
@@ -245,6 +265,10 @@
245265
}
246266
return value;
247267
}
268+
269+
function interpolate(from, to, progress) {
270+
return (to - from) * progress + from;
271+
}
248272

249273
function Scene($el, options, maxValue) {
250274
this.$el = $el;
@@ -306,20 +330,154 @@
306330
this.state = Scene.STATE_AFTER;
307331
}
308332
},
309-
getValue: function(value) {
310-
typeof this.from != "undefined" || (this.from = value);
333+
getProgress: function() {
311334
if (this.state == Scene.STATE_BEFORE) {
312-
return this.from;
335+
return 0;
313336
}
314337
else if (this.state == Scene.STATE_DURING) {
315338
var posPx = scrollTop - this.startPx,
316339
percent = posPx / this.durationPx,
317-
aniPos = this.ease.call(this, percent);
318-
return (this.to - this.from) * aniPos + this.from;
340+
progress = this.ease.call(this, percent);
341+
return progress;
319342
}
320343
else {
321-
return this.to;
344+
return 1;
345+
}
346+
},
347+
getFrom: function(defaultValue) {
348+
typeof this.from != "undefined" || (this.from = defaultValue);
349+
return this.from;
350+
},
351+
getValue: function(value, progress) {
352+
this.getFrom(value);
353+
typeof progress != "undefined" || (progress = this.getProgress());
354+
return interpolate(this.from, this.to, progress);
355+
}
356+
};
357+
358+
function RGBColor(r, g, b, a) {
359+
this.r = r || 0;
360+
this.g = g || 0;
361+
this.b = b || 0;
362+
this.a = typeof a === "number" ? a : 1;
363+
}
364+
RGBColor.fromArray = function(array, result) {
365+
result || (result = new RGBColor());
366+
if (array.length < 3) {
367+
return result;
368+
}
369+
result.r = parseInt(array[0]);
370+
result.g = parseInt(array[1]);
371+
result.b = parseInt(array[2]);
372+
if (array.length > 3) {
373+
result.a = parseFloat(array[3]);
374+
}
375+
return result;
376+
};
377+
RGBColor.fromString = function(string, result) {
378+
if (string.match(/^#([0-9a-f]{3})$/i)) {
379+
return RGBColor.fromArray([
380+
parseInt(string.charAt(1),16)*0x11,
381+
parseInt(string.charAt(2),16)*0x11,
382+
parseInt(string.charAt(3),16)*0x11
383+
], result);
384+
}
385+
if (string.match(/^#([0-9a-f]{6})$/i)) {
386+
return RGBColor.fromArray([
387+
parseInt(string.substr(1,2),16),
388+
parseInt(string.substr(3,2),16),
389+
parseInt(string.substr(5,2),16)
390+
], result);
391+
}
392+
return RGBColor.fromArray(string.replace(/^rgb(a)?\((.*)\)$/, '$2').split(/, /), result);
393+
};
394+
RGBColor.fromHSV = function(hsv, result) {
395+
result || (result = new RGBColor());
396+
var r = hsv.v,
397+
g = hsv.v,
398+
b = hsv.v;
399+
if (hsv.s != 0) {
400+
var f = hsv.h / 60 - Math.floor(hsv.h / 60);
401+
var p = hsv.v * (1 - hsv.s / 100);
402+
var q = hsv.v * (1 - hsv.s / 100 * f);
403+
var t = hsv.v * (1 - hsv.s / 100 * (1 - f));
404+
switch (Math.floor(hsv.h / 60)){
405+
case 0: r = hsv.v; g = t; b = p; break;
406+
case 1: r = q; g = hsv.v; b = p; break;
407+
case 2: r = p; g = hsv.v; b = t; break;
408+
case 3: r = p; g = q; b = hsv.v; break;
409+
case 4: r = t; g = p; b = hsv.v; break;
410+
case 5: r = hsv.v; g = p; b = q; break;
411+
}
412+
}
413+
result.r = r * 2.55;
414+
result.g = g * 2.55;
415+
result.b = b * 2.55;
416+
result.a = hsv.a;
417+
return result;
418+
};
419+
RGBColor.prototype = {
420+
getHue: function(maximum, range) {
421+
var hue = 0;
422+
if (range != 0) {
423+
switch (maximum){
424+
case this.r:
425+
hue = (this.g - this.b) / range * 60;
426+
if (hue < 0) hue += 360;
427+
break;
428+
case this.g:
429+
hue = (this.b - this.r) / range * 60 + 120;
430+
break;
431+
case this.b:
432+
hue = (this.r - this.g) / range * 60 + 240;
433+
break;
434+
}
435+
}
436+
return hue;
437+
438+
},
439+
interpolate: function(to, progress) {
440+
var src = HSVColor.fromRGB(this),
441+
dst = HSVColor.fromRGB(to);
442+
src.interpolate(dst, progress);
443+
RGBColor.fromHSV(src, this);
444+
},
445+
toString: function() {
446+
if (this.a !== 1) {
447+
return "rgba("+this.r.toFixed()+","+this.g.toFixed()+","+this.b.toFixed()+","+this.a.toFixed(2)+")";
448+
}
449+
return "rgb("+this.r.toFixed()+","+this.g.toFixed()+","+this.b.toFixed()+")";
450+
}
451+
};
452+
453+
function HSVColor(h, s, v, a) {
454+
this.h = h || 0;
455+
this.s = s || 0;
456+
this.v = v || 0;
457+
this.a = typeof a === "number" ? a : 1;
458+
}
459+
HSVColor.fromRGB = function(rgb, result) {
460+
result || (result = new HSVColor());
461+
var maximum = Math.max(rgb.r, rgb.g, rgb.b);
462+
var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
463+
result.h = rgb.getHue(maximum, range);
464+
result.s = (maximum == 0 ? 0 : 100 * range / maximum);
465+
result.v = maximum / 2.55;
466+
result.a = rgb.a;
467+
return result;
468+
};
469+
HSVColor.prototype = {
470+
interpolate: function(to, progress, precision) {
471+
this.h = interpolate(this.h, to.h, progress);
472+
this.s = interpolate(this.s, to.s, progress);
473+
this.v = interpolate(this.v, to.v, progress);
474+
this.a = interpolate(this.a, to.a, progress);
475+
},
476+
toString: function() {
477+
if (this.a !== 1) {
478+
return "hsva("+this.h+","+this.s+","+this.v+","+this.a.toFixed(2)+")";
322479
}
480+
return "hsv("+this.h+","+this.s+","+this.v+")";
323481
}
324482
};
325483

‎jquery.data-parallax.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)