Parallax background iOS effect

This forum contains topics that were moved from Get Satisfaction
Michael Brandon
Posts: 0
Joined: Mon Apr 21, 2014 9:17 pm

Parallax background iOS effect

Post by Michael Brandon »

Hi, iOS7 added a cool homescreen background effect that moves with the devices orientation, and it looks like a few people have been able to tap into the "deviceorientation" event using JS and CSS for modern webkits. I was curious if anyone has had any luck with it, or could offer up any advice for the below code;

HTML
<!--<div id='background'
<div id='foreground'
Content for the foreground
<
<--

CSS
#background {
margin: 0 auto;
padding-top: 100px;
height: 568px;
width: 320px;
background-image: url('background.png');
background-size: 360px 608px;
background-position: -20px -20px;
}

#foreground {
text-align: center;
padding: 20px;
background: rgba(255,255,255,0.2);
border-radius: 18px;
}

JS
var background = document.getElementByID(‘background’);
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 > 0) {
xTilt = -xTilt;
} else if (xTilt < -40) {
xTilt = -(xTilt + 80);
}

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

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

Any suggestions, thoughts, or experience is greatly welcomed.

Thanks!

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

Parallax background iOS effect

Post by Kateryna Grynko »

Hi Michael,

Try this jQuery plug-in please: http://plugins.jquery.com/ScrollMagic/

LuisMa Suárez Gutiérrez
Posts: 0
Joined: Mon Aug 18, 2014 9:12 pm

Parallax background iOS effect

Post by LuisMa Suárez Gutiérrez »

Whoa, thats awesome!
I thought only the appery built-in UI components was the extent of jquery in the app builder, just buttons, inputs and grids.

I had no idea you can use a third party jquery plugin,
Can you please direct me to some documentation on importing jquery plugins like Scroll magic?

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Parallax background iOS effect

Post by Evgene Karachevtsev »

Hello,

Please look at this link: http://devcenter.appery.io/documentat...

LuisMa Suárez Gutiérrez
Posts: 0
Joined: Mon Aug 18, 2014 9:12 pm

Parallax background iOS effect

Post by LuisMa Suárez Gutiérrez »

i'm already reading it. thank you

Michael Brandon
Posts: 0
Joined: Mon Apr 21, 2014 9:17 pm

Parallax background iOS effect

Post by Michael Brandon »

Thanks for the link, however I was looking for something that uses deviceorientation specifically and if anyone has any experience using it. Like this; http://hwthorn.github.io/parallaxify/

I'll give this a try though. Thanks for your help.

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

Parallax background iOS effect

Post by Kateryna Grynko »

Hi Michael,

We were able to successfully connect to http://hwthorn.github.io/parallaxify/ and test on mobile device. It works for us.

Michael Brandon
Posts: 0
Joined: Mon Apr 21, 2014 9:17 pm

Parallax background iOS effect

Post by Michael Brandon »

I haven't yet. Do you recommend creating a new project using the js file and exporting it as a plugin, or should I just create a new JS file in my current project and c/p the jquery.parallexify.js into it?

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Parallax background iOS effect

Post by Evgene Karachevtsev »

Hello Michael,

You should just upload the js file for this library to connect

Michael Brandon
Posts: 0
Joined: Mon Apr 21, 2014 9:17 pm

Parallax background iOS effect

Post by Michael Brandon »

What changes did you make to the files to get this to work? My background image is now repeating and I can't get to it cover and the foreground items seem to have taken on a mind of their own. I see the added automatic CSS and class names created as well as the event JS on page load.

Any insight is greatly appreciated. This is my first attempt at uploading a 3rd party JS file into an Appery project.

Thanks!

Post Reply