Search jQuery

jQuery Forum

iOS7-like parallax background

in Using jQuery Plugins • 9 years ago

I'm trying to achieve a "parallax background" like in iOS7 where the background moves with mouse movement on hover of the element and device orientation.

I found parallaxify ( https://github.com/hwthorn/parallaxify ) and the demos seem to work perfectly, but when I try to implemnt it, it doesn't work.

I want the backgrounds of #input and #backgroundFix to animate / move when the mouse is over them or when the device is being tilted.

I included the script, here on line 499:https://googledrive.com/host/0BwJVaMrY8QdcWHhEb3k5U3A4WXc/jquery.parallaxify.js

And I initialised it, like so: $('#input, #backgroundFix').parallaxify(); or line 997

However, in the page, the header's background illustration / image is not moving.

Here is the page:https://googledrive.com/host/0BwJVaMrY8QdcWHhEb3k5U3A4WXc/KE_home.html

I would greatly appreciate any and all help in achieving this effect!

Replies(8)

jakecigar

Re: iOS7-like parallax background

9 years ago

In the demo the background image is larger than the div. Is yours?

JΛ̊KE

xmasmi

Re: iOS7-like parallax background

9 years ago

It is a repeating background so it should always be bigger.

The element has a fluid width so it depends on the viewport. In the viewport I'm currently viewing in, the element is smaller than the background image, but the script is still not working.

jakecigar

Re: iOS7-like parallax background

9 years ago

Try a simpler page with a much larger background image on a simple <div>.

JΛ̊KE

xmasmi

Re: iOS7-like parallax background

9 years ago

Okay, I did so here: http://jsfiddle.net/GS7XM/2/

I was messing around with the different attributes and got it working on mousemove, but it still doesn't work on device tilt.

Here is the JS that powers it: https://googledrive.com/host/0BwJVaMrY8QdcWHhEb3k5U3A4WXc/jquery.parallaxify.js

Any idea how to get it working on device tilt?

jakecigar

Re: iOS7-like parallax background

9 years ago

Ouch! Tilting is tough! I wrote shake detection some time ago. You can play with the accelerometer or gyroscope in javascript.

I found this article while searching for a better example.

window.ondeviceorientation = function(event) {
  alpha = Math.round(event.alpha);
  beta = Math.round(event.beta);
  gamma = Math.round(event.gamma);
}