Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

allow animation of backgrounds using background-position

  • Loading branch information...
commit 3f02a4a9440be0ae7e5353ebad93ce49bb0920d9 1 parent 16d0a96
David Zülke authored
Showing with 44 additions and 20 deletions.
  1. +44 −20 js/plax.js
64 js/plax.js
View
@@ -55,7 +55,8 @@
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++){
@@ -74,23 +75,40 @@
// Add an object to the list of things to parallax
layer.obj = $(this)
- 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
+ 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.startY = this.offsetTop
- layer.vProp = 'top'
+ // 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)
@@ -235,9 +253,15 @@
for (i = layers.length; i--;) {
layer = layers[i]
- layer.obj
- .css(layer.hProp, layer.startX + layer.inversionFactor*(layer.xRange*hRatio))
- .css(layer.vProp, layer.startY + layer.inversionFactor*(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(layer.hProp, newX)
+ .css(layer.vProp, newY)
+ }
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.