Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

refactor to enable better performance #2

Merged
merged 2 commits into from

2 participants

@pixshatterer

Hi Dave, I changed the way events are bound, since i ran into some issues related to fast scrolling, and following some recommendations already mentioned by John Resig (Mr.jQuery in the flesh :) ) in an analysis made by him about a choice made by twitter about using scroll events http://ejohn.org/blog/learning-from-twitter/

pixshatterer added some commits
@pixshatterer pixshatterer code refactor for declarations, and due to issues with fast scrolling…
…, now the event triggers and setInterval wich updates the element position and once there are no changes, starts to listen the event again
e1d2b9b
@pixshatterer pixshatterer namespace added to scroll event to avoid conflicts 76bfc4f
@davecranwell davecranwell merged commit cde7495 into davecranwell:master
@davecranwell
Owner

Nice one!

@pixshatterer

thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 22, 2011
  1. @pixshatterer

    code refactor for declarations, and due to issues with fast scrolling…

    pixshatterer authored
    …, now the event triggers and setInterval wich updates the element position and once there are no changes, starts to listen the event again
Commits on Oct 27, 2011
  1. @pixshatterer
This page is out of date. Refresh to see the latest.
Showing with 53 additions and 32 deletions.
  1. +53 −32 jquery.scrollParallax.js
View
85 jquery.scrollParallax.js
@@ -83,8 +83,14 @@
return this.each(function() {
//defined accessible $this var in standard way for use within functions
- var $this = $(this);
-
+ var $this = $(this),
+ //timestamp,last position for the interval & FPS ~= 30
+ ts,FPS = 34,lastPos = {x:0,y:0},intervalActive,
+ //find current position so parallax can be relative to it
+ currentPosArray=$this.css("backgroundPosition").split(" "),
+ currentXPos=parseInt(currentPosArray[0].replace(/[^0-9\-]/g, "")),
+ currentYPos=parseInt(currentPosArray[1].replace(/[^0-9\-]/g, ""));
+
//extend options in standard way
if (options) {
$.extend(settings, options);
@@ -99,37 +105,52 @@
debug("out of view");
}
});
-
- //find current position so parallax can be relative to it
- var currentPosArray=$this.css("backgroundPosition").split(" ");
- var currentXPos=parseInt(currentPosArray[0].replace(/[^0-9\-]/g, ""));
- var currentYPos=parseInt(currentPosArray[1].replace(/[^0-9\-]/g, ""));
-
- //recalculate position on scroll
- $(window).bind('scroll', function(){
- if($this.hasClass("inview")){
- var offset = $this.offset();
+
+ function updateElemPos(){
+ var newXPos,newYPos,
+ offset = $this.offset();
- //calculate new position
- if(settings.axis.match(/x/)){
- var Xpos = offset.left - $(window).scrollLeft();
- var newXPos = (-(Xpos) * settings.speed) + currentXPos;
- }else{
- var newXPos = currentXPos;
- }
- if(settings.axis.match(/y/)){
- var Ypos = offset.top - $(window).scrollTop();
- var newYPos = (-(Ypos) * settings.speed) + currentYPos;
- }else{
- var newYPos = currentYPos;
- }
-
- debug("new X position: "+ newXPos);
- debug("new Y position: "+ newYPos);
-
- $this.css({'backgroundPosition': parseInt(newXPos) + "px " + parseInt(newYPos) +"px"});
- }
- });
+ //calculate new position
+ newXPos = (settings.axis.match(/x/))?
+ parseInt((-(offset.left - $(window).scrollLeft()) * settings.speed) + currentXPos) + "px":
+ currentPosArray[0];
+
+ newYPos = (settings.axis.match(/y/))?
+ parseInt((-(offset.top - $(window).scrollTop()) * settings.speed) + currentYPos) + "px":
+ currentPosArray[1];
+
+ if(typeof intervalActive == 'undefined'){
+ lastPos.x = newXPos;
+ lastPos.y = newYPos;
+ }
+
+ intervalActive = true;
+
+ debug("new X position: "+ newXPos);
+ debug("new Y position: "+ newYPos);
+
+ if((newXPos !== lastPos.x) || (newYPos !== lastPos.y)){
+ $this.css({'backgroundPosition': newXPos + " " + newYPos});
+ lastPos.x = newXPos;
+ lastPos.y = newYPos;
+ }else{
+ clearInterval(ts);
+ intervalActive = false;
+ $(window).bind('scroll.parallax',onScroll);
+ }
+ }
+
+ function onScroll(){
+ if($this.hasClass("inview")){
+ if(!intervalActive){
+ ts = setInterval(updateElemPos,FPS);
+ $(window).unbind('scroll.parallax');
+ }
+ }
+ }
+
+ //recalculate position on scroll
+ $(window).bind('scroll.parallax',onScroll);
});
};
Something went wrong with that request. Please try again.