Skip to content

Commit acc5b83

Browse files
author
Pablo Largo Mohedano
committed
Improved animation, better usage of requestAnimationFrame
Modified positioning from top/left to transform: position (), which have a lower paint time (https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/). Maybe the requestAnimationFrame would be improvable in a loop.
1 parent 18b6ff3 commit acc5b83

File tree

1 file changed

+10
-14
lines changed

1 file changed

+10
-14
lines changed

parallax.js

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -233,19 +233,15 @@
233233
}
234234

235235
this.$mirror.css({
236-
transform: 'translate3d(0px, 0px, 0px)',
236+
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
237237
visibility: this.visibility,
238-
top: this.mirrorTop - overScroll,
239-
left: this.mirrorLeft,
240238
height: this.boxHeight,
241239
width: this.boxWidth
242240
});
243241

244242
this.$slider.css({
245-
transform: 'translate3d(0px, 0px, 0px)',
243+
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
246244
position: 'absolute',
247-
top: this.offsetTop,
248-
left: this.offsetLeft,
249245
height: this.imageHeight,
250246
width: this.imageWidth,
251247
maxWidth: 'none'
@@ -271,6 +267,8 @@
271267
setup: function() {
272268
if (this.isReady) return;
273269

270+
this.lastRequestAnimationFrame = null;
271+
274272
var $doc = $(document), $win = $(window);
275273

276274
var loadDimensions = function() {
@@ -320,19 +318,17 @@
320318

321319
render: function() {
322320
this.isFresh || this.refresh();
323-
$.each(this.sliders, function(){ this.render() });
321+
$.each(this.sliders, function(){ this.render(); });
324322
},
325323

326324
requestRender: function() {
327325
var self = this;
326+
window.cancelAnimationFrame(self.lastRequestAnimationFrame);
328327

329-
if (!this.isBusy) {
330-
this.isBusy = true;
331-
window.requestAnimationFrame(function() {
332-
self.render();
333-
self.isBusy = false;
334-
});
335-
}
328+
self.lastRequestAnimationFrame = window.requestAnimationFrame(function() {
329+
self.render();
330+
self.isBusy = false;
331+
});
336332
},
337333
destroy: function(el){
338334
var i,

0 commit comments

Comments
 (0)