Parallax background iOS effect

This forum contains topics that were moved from Get Satisfaction
Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Parallax background iOS effect

Post by Evgene Karachevtsev »

Hello Michael,

  1. Upload "jquery.parallaxify.min.js" to the project
  2. Please add class to the mobile container element on the page, i.e. "parallaxify-container"
  3. Create CSS file with the following rule:
    pre .parallaxify-container {
    background: url(URL_TO_THE_IMAGE) no-repeat;
    }/pre
  4. On page load event please run the following JS code:
    pre$.parallaxify();/pre
Michael Brandon
Posts: 0
Joined: Mon Apr 21, 2014 9:17 pm

Parallax background iOS effect

Post by Michael Brandon »

Should I also add this to the onLoad JS??

window.addEventListener('deviceorientation', function(eventData) {
// Retrieving the front/back tilting of the device and moves the
// background in the opposite way of the tilt

var yTilt = Math.round((-eventData.beta + 90) * (40/180) - 40);

// Retrieve the side to side tilting of the device and move the
// background the opposite direction.

var xTilt = Math.round(-eventData.gamma * (20/180) - 20);

// Thi 'if' statement checks if the phone is upside down and corrects
// the value that is returned.
if (xTilt &gt 0) {
xTilt = -xTilt;
}
else if (xTilt &lt -40) {
xTilt = -(xTilt + 80);
}

var backgroundPositionValue = yTilt + 'px ' + xtilt + "px";

background.style.backgroundPosition = backgroundPositionValue;
}, false);

It still doesn't want to run. Thoughts?

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Parallax background iOS effect

Post by Kateryna Grynko »

Hi Michael,

  1. Please share your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell on what page you are trying to implement this.

  2. On what device/OS do you test it?

  3. Please open this app and tell us whether the effect works for you:
    https://chart.googleapis.com/chart?ch...

Post Reply