Skip to content

Commit 7abd936

Browse files
markdalgleishmarkdalgleish
committed
Add 'responsive' option
1 parent 2a5481e commit 7abd936

7 files changed

+175
-94
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_Store
2+
node_modules

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,9 @@ $.stellar({
146146
horizontalOffset: 0,
147147
verticalOffset: 0,
148148

149+
// Refreshes parallax content on window load and resize
150+
responsive: true,
151+
149152
// Select which property is used to calculate scroll.
150153
// Choose 'scroll', 'position', 'margin' or 'transform',
151154
// or write your own 'scrollProperty' plugin.
@@ -163,9 +166,6 @@ $.stellar({
163166
// Hide parallax elements that move outside the viewport
164167
hideDistantElements: true,
165168

166-
// Set how often the viewport size is detected
167-
viewportDetectionInterval: 1000,
168-
169169
// Customise how elements are shown and hidden
170170
hideElement: function($elem) { $elem.hide(); },
171171
showElement: function($elem) { $elem.show(); }

‎jquery.stellar.js

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Stellar.js v0.4.0
33
* http://markdalgleish.com/projects/stellar.js
44
*
5-
* Copyright 2012, Mark Dalgleish
5+
* Copyright 2013, Mark Dalgleish
66
* This content is released under the MIT license
77
* http://markdalgleish.mit-license.org
88
*/
@@ -17,10 +17,10 @@
1717
verticalScrolling: true,
1818
horizontalOffset: 0,
1919
verticalOffset: 0,
20+
responsive: false,
2021
parallaxBackgrounds: true,
2122
parallaxElements: true,
2223
hideDistantElements: true,
23-
viewportDetectionInterval: 10000,
2424
hideElement: function($elem) { $elem.hide(); },
2525
showElement: function($elem) { $elem.show(); }
2626
},
@@ -165,10 +165,11 @@
165165
this._defineElements();
166166
this._defineGetters();
167167
this._defineSetters();
168+
this._handleWindowLoadAndResize();
168169

169-
this.refresh();
170+
this._detectViewport();
171+
this.refresh({ firstLoad: true });
170172

171-
this._startViewportDetectionLoop();
172173
this._startAnimationLoop();
173174
},
174175
_defineElements: function() {
@@ -207,7 +208,25 @@
207208
positionProperty[self.options.positionProperty].setTop($elem, top, startingTop);
208209
};
209210
},
210-
refresh: function() {
211+
_handleWindowLoadAndResize: function() {
212+
var self = this,
213+
$window = $(window);
214+
215+
if (self.options.responsive) {
216+
$window.bind('load.' + this.name, function() {
217+
self.refresh();
218+
});
219+
}
220+
221+
$window.bind('resize.' + this.name, function() {
222+
self._detectViewport();
223+
224+
if (self.options.responsive) {
225+
self.refresh();
226+
}
227+
});
228+
},
229+
refresh: function(options) {
211230
var self = this,
212231
oldLeft = self._getScrollLeft(),
213232
oldTop = self._getScrollTop();
@@ -220,7 +239,7 @@
220239
this._findBackgrounds();
221240

222241
// Fix for WebKit background rendering bug
223-
if (navigator.userAgent.indexOf('WebKit') > 0) {
242+
if (options && options.firstLoad && /WebKit/.test(navigator.userAgent)) {
224243
$(window).load(function(){
225244
var oldLeft = self._getScrollLeft(),
226245
oldTop = self._getScrollTop();
@@ -236,6 +255,16 @@
236255
self._setScrollLeft(oldLeft);
237256
self._setScrollTop(oldTop);
238257
},
258+
_detectViewport: function() {
259+
var viewportOffsets = this.$viewportElement.offset(),
260+
hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;
261+
262+
this.viewportWidth = this.$viewportElement.width();
263+
this.viewportHeight = this.$viewportElement.height();
264+
265+
this.viewportOffsetTop = hasOffsets ? viewportOffsets.top : 0;
266+
this.viewportOffsetLeft = hasOffsets ? viewportOffsets.left : 0;
267+
},
239268
_findParticles: function(){
240269
var self = this,
241270
scrollLeft = this._getScrollLeft(),
@@ -456,16 +485,18 @@
456485
}
457486

458487
this._animationLoop = $.noop;
459-
clearInterval(this._viewportDetectionInterval);
488+
489+
$(window).unbind('load.' + this.name).unbind('resize.' + this.name);
460490
},
461491
_setOffsets: function() {
462-
var self = this;
492+
var self = this,
493+
$window = $(window);
463494

464-
$(window).unbind('resize.horizontal-' + this.name).unbind('resize.vertical-' + this.name);
495+
$window.unbind('resize.horizontal-' + this.name).unbind('resize.vertical-' + this.name);
465496

466497
if (typeof this.options.horizontalOffset === 'function') {
467498
this.horizontalOffset = this.options.horizontalOffset();
468-
$(window).bind('resize.horizontal-' + this.name, function() {
499+
$window.bind('resize.horizontal-' + this.name, function() {
469500
self.horizontalOffset = self.options.horizontalOffset();
470501
});
471502
} else {
@@ -474,7 +505,7 @@
474505

475506
if (typeof this.options.verticalOffset === 'function') {
476507
this.verticalOffset = this.options.verticalOffset();
477-
$(window).bind('resize.vertical-' + this.name, function() {
508+
$window.bind('resize.vertical-' + this.name, function() {
478509
self.verticalOffset = self.options.verticalOffset();
479510
});
480511
} else {
@@ -563,22 +594,6 @@
563594
setBackgroundPosition(background.$element, bgLeft, bgTop);
564595
}
565596
},
566-
_startViewportDetectionLoop: function() {
567-
var self = this,
568-
detect = function() {
569-
var viewportOffsets = self.$viewportElement.offset(),
570-
hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;
571-
572-
self.viewportWidth = self.$viewportElement.width();
573-
self.viewportHeight = self.$viewportElement.height();
574-
575-
self.viewportOffsetTop = hasOffsets ? viewportOffsets.top : 0;
576-
self.viewportOffsetLeft = hasOffsets ? viewportOffsets.left : 0;
577-
};
578-
579-
detect();
580-
this._viewportDetectionInterval = setInterval(detect, this.options.viewportDetectionInterval);
581-
},
582597
_startAnimationLoop: function() {
583598
var self = this,
584599
requestAnimFrame = (function(){

‎jquery.stellar.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
11
{
2-
"name": "jquery.stellar",
3-
"version": "0.4.0",
4-
"title": "Stellar.js",
5-
"author": {
6-
"name": "Mark Dalgleish",
7-
"url": "http://markdalgleish.com"
8-
},
9-
"repository": {
10-
"type": "git",
11-
"url": "git://github.com/markdalgleish/stellar.js.git"
12-
},
13-
"bugs": {
14-
"url": "https://github.com/markdalgleish/stellar.js/issues"
15-
},
16-
"licenses": [{
17-
"type": "MIT",
18-
"url": "http://markdalgleish.mit-license.org"
19-
}],
20-
"dependencies": {
21-
"jquery": ">=1.4.3"
22-
},
23-
"description": "Parallax scrolling made easy",
24-
"keywords": [
25-
"parallax",
26-
"scroll",
27-
"iOS"
28-
],
29-
"homepage": "http://markdalgleish.com/projects/stellar.js",
30-
"maintainers": [{
31-
"name": "Mark Dalgleish",
32-
"url": "http://markdalgleish.com"
33-
}],
34-
"files": [
35-
"jquery.stellar.js"
36-
]
37-
}
2+
"name": "jquery.stellar",
3+
"version": "0.4.0",
4+
"title": "Stellar.js",
5+
"author": {
6+
"name": "Mark Dalgleish",
7+
"url": "http://markdalgleish.com"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git://github.com/markdalgleish/stellar.js.git"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/markdalgleish/stellar.js/issues"
15+
},
16+
"licenses": [
17+
{
18+
"type": "MIT",
19+
"url": "http://markdalgleish.mit-license.org"
20+
}
21+
],
22+
"dependencies": {
23+
"jquery": ">=1.4.3"
24+
},
25+
"description": "Parallax scrolling made easy",
26+
"keywords": [
27+
"parallax",
28+
"scroll",
29+
"iOS"
30+
],
31+
"homepage": "http://markdalgleish.com/projects/stellar.js",
32+
"maintainers": [
33+
{
34+
"name": "Mark Dalgleish",
35+
"url": "http://markdalgleish.com"
36+
}
37+
],
38+
"files": [
39+
"jquery.stellar.js"
40+
],
41+
"devDependencies": {
42+
"grunt": "~0.3.17"
43+
}
44+
}

‎src/jquery.stellar.js

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
verticalScrolling: true,
99
horizontalOffset: 0,
1010
verticalOffset: 0,
11+
responsive: false,
1112
parallaxBackgrounds: true,
1213
parallaxElements: true,
1314
hideDistantElements: true,
14-
viewportDetectionInterval: 10000,
1515
hideElement: function($elem) { $elem.hide(); },
1616
showElement: function($elem) { $elem.show(); }
1717
},
@@ -156,10 +156,11 @@
156156
this._defineElements();
157157
this._defineGetters();
158158
this._defineSetters();
159+
this._handleWindowLoadAndResize();
159160

160-
this.refresh();
161+
this._detectViewport();
162+
this.refresh({ firstLoad: true });
161163

162-
this._startViewportDetectionLoop();
163164
this._startAnimationLoop();
164165
},
165166
_defineElements: function() {
@@ -198,7 +199,25 @@
198199
positionProperty[self.options.positionProperty].setTop($elem, top, startingTop);
199200
};
200201
},
201-
refresh: function() {
202+
_handleWindowLoadAndResize: function() {
203+
var self = this,
204+
$window = $(window);
205+
206+
if (self.options.responsive) {
207+
$window.bind('load.' + this.name, function() {
208+
self.refresh();
209+
});
210+
}
211+
212+
$window.bind('resize.' + this.name, function() {
213+
self._detectViewport();
214+
215+
if (self.options.responsive) {
216+
self.refresh();
217+
}
218+
});
219+
},
220+
refresh: function(options) {
202221
var self = this,
203222
oldLeft = self._getScrollLeft(),
204223
oldTop = self._getScrollTop();
@@ -211,7 +230,7 @@
211230
this._findBackgrounds();
212231

213232
// Fix for WebKit background rendering bug
214-
if (navigator.userAgent.indexOf('WebKit') > 0) {
233+
if (options && options.firstLoad && /WebKit/.test(navigator.userAgent)) {
215234
$(window).load(function(){
216235
var oldLeft = self._getScrollLeft(),
217236
oldTop = self._getScrollTop();
@@ -227,6 +246,16 @@
227246
self._setScrollLeft(oldLeft);
228247
self._setScrollTop(oldTop);
229248
},
249+
_detectViewport: function() {
250+
var viewportOffsets = this.$viewportElement.offset(),
251+
hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;
252+
253+
this.viewportWidth = this.$viewportElement.width();
254+
this.viewportHeight = this.$viewportElement.height();
255+
256+
this.viewportOffsetTop = hasOffsets ? viewportOffsets.top : 0;
257+
this.viewportOffsetLeft = hasOffsets ? viewportOffsets.left : 0;
258+
},
230259
_findParticles: function(){
231260
var self = this,
232261
scrollLeft = this._getScrollLeft(),
@@ -447,16 +476,18 @@
447476
}
448477

449478
this._animationLoop = $.noop;
450-
clearInterval(this._viewportDetectionInterval);
479+
480+
$(window).unbind('load.' + this.name).unbind('resize.' + this.name);
451481
},
452482
_setOffsets: function() {
453-
var self = this;
483+
var self = this,
484+
$window = $(window);
454485

455-
$(window).unbind('resize.horizontal-' + this.name).unbind('resize.vertical-' + this.name);
486+
$window.unbind('resize.horizontal-' + this.name).unbind('resize.vertical-' + this.name);
456487

457488
if (typeof this.options.horizontalOffset === 'function') {
458489
this.horizontalOffset = this.options.horizontalOffset();
459-
$(window).bind('resize.horizontal-' + this.name, function() {
490+
$window.bind('resize.horizontal-' + this.name, function() {
460491
self.horizontalOffset = self.options.horizontalOffset();
461492
});
462493
} else {
@@ -465,7 +496,7 @@
465496

466497
if (typeof this.options.verticalOffset === 'function') {
467498
this.verticalOffset = this.options.verticalOffset();
468-
$(window).bind('resize.vertical-' + this.name, function() {
499+
$window.bind('resize.vertical-' + this.name, function() {
469500
self.verticalOffset = self.options.verticalOffset();
470501
});
471502
} else {
@@ -554,22 +585,6 @@
554585
setBackgroundPosition(background.$element, bgLeft, bgTop);
555586
}
556587
},
557-
_startViewportDetectionLoop: function() {
558-
var self = this,
559-
detect = function() {
560-
var viewportOffsets = self.$viewportElement.offset(),
561-
hasOffsets = viewportOffsets !== null && viewportOffsets !== undefined;
562-
563-
self.viewportWidth = self.$viewportElement.width();
564-
self.viewportHeight = self.$viewportElement.height();
565-
566-
self.viewportOffsetTop = hasOffsets ? viewportOffsets.top : 0;
567-
self.viewportOffsetLeft = hasOffsets ? viewportOffsets.left : 0;
568-
};
569-
570-
detect();
571-
this._viewportDetectionInterval = setInterval(detect, this.options.viewportDetectionInterval);
572-
},
573588
_startAnimationLoop: function() {
574589
var self = this,
575590
requestAnimFrame = (function(){

0 commit comments

Comments
 (0)