Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Allow background position animation, support right/bottom positions, use inversion factor in calculations, allow repeated init of elements without ID attribute #14

Merged
merged 7 commits into from

2 participants

@dzuelke

Flag "background" can be set to animate background-position instead of element position (only allows pixel values, 0% and top/left, the rest is too complex/slow to compute due to how "100%" makes the background stick to the right/bottom of the container).

If the element was positioned using properties "right" or "bottom", then we make sure that those properties continue to be used for changing position.

ID attributes were used before to check if an element already is in the list of elements to work on, now compares DOM elements instead so no "id" attribute must exist.

Inversion factor cleans up the code a little :)

@dzuelke dzuelke use positive or negative multiplier for inversion internally, that wa…
…y conditions testing for negative are not necessary anymore
f1c0c49
@cameronmcefee

Good stuff. I'll test it out when I have a chance and merge it in.

@dzuelke

Found one issue already, doing another push soon... I'm actually trying to get background images to move too, just a bit of an issue with percentages as positioning, probably can't do that...

@dzuelke

16d0a96 makes sure that if the position is declared using right or bottom instead of left or top, those properties are used for positioning just in case the parent ever resizes and the positioning relative to the right or bottom of the parent should be maintained.

3f02a4a was the original point of my fiddling: moving stuff around via background-position :)

@cameronmcefee

Sorry I haven't merged this in yet. It's been a busy week. I'll give it a test and get it in there soon.

@dzuelke
@cameronmcefee cameronmcefee merged commit 23c16fd into cameronmcefee:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 12, 2011
  1. @dzuelke

    use positive or negative multiplier for inversion internally, that wa…

    dzuelke authored
    …y conditions testing for negative are not necessary anymore
Commits on Oct 14, 2011
  1. @dzuelke
  2. @dzuelke
  3. @dzuelke
Commits on Oct 15, 2011
  1. @dzuelke

    use DOM element comparison rather than ID comparison; that way elemen…

    dzuelke authored
    …ts without an id attribute do not get registered again when their plax params are modified
  2. @dzuelke

    Mutate using top/right/bottom/left position properties as declared to…

    dzuelke authored
    … maintain position even in the event of resizes
Commits on Oct 17, 2011
  1. @dzuelke
This page is out of date. Refresh to see the latest.
Showing with 47 additions and 16 deletions.
  1. +47 −16 js/plax.js
View
63 js/plax.js
@@ -55,11 +55,12 @@
var layer = {
"xRange": $(this).data('xrange') || 0,
"yRange": $(this).data('yrange') || 0,
- "invert": $(this).data('invert') || false
+ "invert": $(this).data('invert') || false,
+ "background": $(this).data('background') || false
}
for (var i=0;i<layers.length;i++){
- if ($(this).attr('id') == layers[i].obj.attr('id')){
+ if (this === layers[i].obj.get(0)){
layerExistsAt = i
}
}
@@ -70,18 +71,48 @@
}
}
+ layer.inversionFactor = (layer.invert ? -1 : 1) // inversion factor for calculations
+
// Add an object to the list of things to parallax
layer.obj = $(this)
- layer.startX = this.offsetLeft
- layer.startY = this.offsetTop
-
- if(layer.invert == false){
- layer.startX -= Math.floor(layer.xRange/2)
- layer.startY -= Math.floor(layer.yRange/2)
+ if(layer.background) {
+ // animate using the element's background
+ pos = (layer.obj.css('background-position') || "0px 0px").split(/ /)
+ if(pos.length != 2) {
+ return
+ }
+ x = pos[0].match(/^((-?\d+)\s*px|0+\s*%|left)$/)
+ y = pos[1].match(/^((-?\d+)\s*px|0+\s*%|top)$/)
+ if(!x || !y) {
+ // no can-doesville, babydoll, we need pixels or top/left as initial values (it mightbe possible to construct a temporary image from the background-image property and get the dimensions and run some numbers, but that'll almost definitely be slow)
+ return
+ }
+ layer.startX = x[2] || 0
+ layer.startY = y[2] || 0
} else {
- layer.startX += Math.floor(layer.xRange/2)
- layer.startY += Math.floor(layer.yRange/2)
+ // animate using the element's position
+ if(layer.obj.css('right') != 'auto') {
+ // positioned using the "right" propery, not "left", so we should mutate that in case the parent element resizes
+ layer.startX = $(this.parentNode).width() - this.offsetLeft - layer.obj.width()
+ layer.hProp = 'right'
+ layer.xRange = -1 * layer.xRange
+ } else {
+ layer.startX = this.offsetLeft
+ layer.hProp = 'left'
+ }
+ if(layer.obj.css('bottom') != 'auto') {
+ // positioned using the "bottom" propery, not "top", so we should mutate that in case the parent element resizes
+ layer.startY = $(this.parentNode).height() - this.offsetTop - layer.obj.height()
+ layer.vProp = 'bottom'
+ layer.yRange = -1 * layer.yRange
+ } else {
+ layer.startY = this.offsetTop
+ layer.vProp = 'top'
+ }
}
+
+ layer.startX -= layer.inversionFactor * Math.floor(layer.xRange/2)
+ layer.startY -= layer.inversionFactor * Math.floor(layer.yRange/2)
if(layerExistsAt >= 0){
layers.splice(layerExistsAt,1,layer)
} else {
@@ -222,14 +253,14 @@
for (i = layers.length; i--;) {
layer = layers[i]
- if (layer.invert != true) {
- layer.obj
- .css('left',layer.startX + (layer.xRange*hRatio))
- .css('top', layer.startY + (layer.yRange*vRatio))
+ newX = layer.startX + layer.inversionFactor*(layer.xRange*hRatio)
+ newY = layer.startY + layer.inversionFactor*(layer.yRange*vRatio)
+ if(layer.background) {
+ layer.obj.css('background-position', newX+'px '+newY+'px')
} else {
layer.obj
- .css('left',layer.startX - (layer.xRange*hRatio))
- .css('top', layer.startY - (layer.yRange*vRatio))
+ .css(layer.hProp, newX)
+ .css(layer.vProp, newY)
}
}
}
Something went wrong with that request. Please try again.