Tag Archives: phonegap

Updated: Parallax Effects in Hybrid/Web Apps

A while back I wrote about adding parallax effects to your HTML/JS experiences to make them feel a bit richer and closer to a native experience.  I’ve just added this subtle (key word *subtle*) effect to a new project and made a few changes I wanted to share here.

If you are wondering what I am talking about with “parallax effects” – Parallax movement is where objects in the background move at a different rate than objects in the foreground, thus causing the perception of depth.  Read more about it if you’re interested.

First, here’s a quick video of this latest app in action.  It’s a hybrid MobileFirst app, but this technique could be used in any Cordova/PhoneGap/MobileFirst/mobile web app experience.  The key is to keep it subtle and not too much “in your face”, and yes, it is very subtle in this video.  You have to watch closely.

The techniques that I wrote about in the previous post still apply – I’ve just added a bit more to cover more use cases.

First let’s look at the CSS.

body {
    background-image: url('../images/cloud_advisor_bkgd.png');
    background-attachment: fixed;
    background-position: center;
    background-size: auto 120%;
}

This sets the background image and default position.  The distinct change here is that I set the background size to “auto” width and 120% height.  In this case, you can have a huge image that shrinks down to just slightly larger than the window size, or a small image that scales up to a larger window size.  This way you don’t end up with seams in a repeated background or a background that is too big to highlight the parallax effect effectively.

Next let’s take a quick look at the JS involved.

var position = "center";
var lastPosition = "center";
var contentCSS = "";
var body = $("body");
var content = $(".content");
window.suspendAnimation = false;

var xMovement = 15;
var yMovement = 30;
var halfX = xMovement/2;
var halfY = yMovement/2;

window.ondeviceorientation = function(event) {
 var gamma = event.gamma/90;
 var beta = event.beta/180;

 var temp = 0;

 //fix for holding the device upside down
 if ( gamma >= 1 ) {
  gamma = 2- gamma;
 } else if ( gamma <= -1) {
  gamma = -2 - gamma;
 }

 // shift values/motion based upon device orientation
 switch (window.orientation) {
  case 90:
   temp = gamma;
   gamma = beta;
   beta = temp;
   break;
  case -90:
   temp = -gamma;
   gamma = beta;
   beta = temp;
   break;

 }

 // update positions to be used for CSS
 var yPosition = -yMovement - (beta * yMovement);
 var xPosition = -xMovement - (gamma * xMovement);
 var contentX = (-xMovement - xPosition)/2;
 var contentY = (-yMovement - yPosition)/2;

 // generate css styles
 position = xPosition.toFixed(1) + "px " + yPosition.toFixed(1) + "px";
 contentCSS = "translate3d( " + (contentX.toFixed(1)) + "px, " + (contentY.toFixed(1)) + "px, " + " 0px)";
}

function updateBackground() {

 if (!window.suspendAnimation) {
  if ( position.valueOf() != lastPosition.valueOf() ) {

   body.css( "background-position", position);
   content.css( "-webkit-transform", contentCSS);
   lastPosition = position;
  }
 } else {
  lastPosition = "translate3d(0px, 0px, 0px)";;
 }

 window.requestAnimationFrame(updateBackground);
}

window.requestAnimationFrame(updateBackground);

The html where this would be used would be something like this:

<body>
  <div class="content">put your foreground stuff here.</div>
</body>

There are some subtle but important changes here:

  1. In the requestAnimationFrame loop, it only applies changes *if* there are changes to apply.  This prevents needless calls to apply CSS even if the CSS styles hadn’t changed.  In this, I also truncate the numeric CSS string so that it isn’t reapplying CSS if the position should shift by 0.01 pixels. Side note: If you aren’t using requestAnimationFrame for HTML animations, you should learn about it.
  2. If you used my old code and were holding the device upside down, it wouldn’t work.  Not even a little bit.  This has that fixed (see comments inline above).
  3. This moves the background in CSS, which doesn’t cause browser reflow operations, and moves the foreground content (inside of a div) using translate3d, which also doesn’t cause browser reflow operations.  This helps keep animations smooth and the UX performing optimally.
  4. I also added a global variable to turn parallax on and off very quickly, if you need it.

The result is a faster experience that is more efficient and less of a strain on CPU and battery.  Feel free to test this technique out on your own.

If you use the code above, you can modify the xMovement and yMovement variables to exaggerate the parallax effect.

Embarking Upon A New Adventure

I’m excited to finally announce that I have embarked upon a new adventure!  Today marks my first day as a MobileFirst Developer Advocate for IBM!

IBM

So, what does that mean?

It is very similar to what I was doing back at Adobe focusing on developers.  I’m excited to engage with the development community around building mobile apps and leveraging cloud services to meet critical business needs.  I’ll be focused on IBM’s MobileFirst platform, including Worklight – a platform for building and delivering mobile applications leveraging Apache Cordova (PhoneGap), and Bluemix – IBM’s scalable cloud computing platform, which can be used for everything from hosted services, “big data”, security, back-ends for mobile apps, Java, node.js, ruby, and much, much more… Seriously, check out everything that Bluemix has to offer.

It is my mission to help you, the developer or business decision maker be successful, and now I have access to IBM’s tools, knowledge and services to back me up!

Will I still be building apps and services?

  • YES – stay tuned for more info

Will I still be helping you build apps, and writing about development tools, paradigms, and best practices?

  • YES – it’s my mission to help you make the right decisions and be successful

Will I see you at the next development conference, hackathon, or meetup?

  • YES, and I can’t wait to show you everything IBM has to offer.  

Will I still be flying drones?

  • Of course! However, I won’t be blogging about drones and creative tools quite so much. Follow me on Flickr to see images from my latest flights, and feel free to ask me questions.

I had a great run with Adobe, and am thankful for all of the opportunities while there.  I worked on many amazing projects, worked with a lot of great (and very, very smart) people, and was able to continually push the envelope on both the development and creative/media sides. For which I am grateful.

Now, let the next adventure commence!

Your business has tough questions? Let’s ask Watson.

DevNexus 2014 PhoneGap Presentations

I’ve just wrapped up my presentations for this year’s DevNexus event in Atlanta – it has been a great event, filled with tons of information on web, mobile, and back-end development. I had 3 sessions on PhoneGap – One intro, one advanced, and one a mobile frameworks panel.

Below are my presentations.  I didn’t record them this time, since they were being recorded by the conference organizers, so expect to see a video once they’re released.

Just press the space bar, or use the arrow keys to view the presentation in your browser.

Getting Started with PhoneGap and Cross Platform Mobile Development

View Presentation …

intro_2_pg

(Lesson learned, never make changes to you presentation/environment after midnight when you have the first session of the day – it will always bite you)

Designing & Architecting for PhoneGap & the Mobile Web

View presentation …

architecture_pg

Enjoy, and feel free to reach out with any questions!

Automating PhoneGap Builds

I’ve recently had several conversations with PhoneGap users around processes for automating the compilation of PhoneGap apps.  This could be either in automated tasks using GruntAntMaven, or any other task manager, or could be in continuous integration environments like Jenkins CI.

If you’re interested in this, here are a few options… First of all, PhoneGap Build has a REST API. You can use this to programmatically create new projects, update projects, trigger new builds (even just for specific platforms), etc… This can integrate with your build scripts and tie into any workflow.

If you’re using GitHub, it is possible to tie into hooks triggering PhoneGap Build to recompile every time you commit your code.  Here’s an example of it in action, or you can just use this service which is already setup: http://autobuild.monkeh.me/ (from the same author) – Just be careful with your user/pass in plain text. Update: You can also use the Autobuild service using a clientID variable instead of sending through username and password details via HTTP.

If you aren’t using PhoneGap Build, you’re not out of luck.  All PhoneGap CLI commands are based on scripts, which themselves can be scripted.  You could use ANT’s exec command, the Maven exec plugin, Grunt exec or Grunt shell plugins, Jenkins execute shell, or any other task runner to manually invoke the PhoneGap CLI. You just need to make sure all your environment and path variables are correct to access SDKs and required programs. However, there’s one caveat… iOS builds require Xcode/Apple developer tools, which have to be run on a Mac.

If you’re using Jenkins, this might be a good one to check out: Jenkins CI + PhoneGap & Cordova

PhoneGap Presentations from HTML5DevConf

I was  searching the web earlier this week for an older presentation from a few months back, and just happened to stumble across my recent presentations from HTML5DevConf from this past October. Looks like the videos were posted in November, but I’m just seeing them now. I had two sessions: Designing and Architecting PhoneGap and Mobile Web Apps and Getting Started with PhoneGap and Cross-Platform Mobile Development, and if you weren’t able to attend them, you’re still in luck! Here are the videos from those sessions:

Designing and Architecting PhoneGap and Mobile Web Apps

Tired of Hello World? In this session, we explore best practices to build real-world PhoneGap applications. We investigate the Single Page Architecture, HTML templates, effective Touch events, performance techniques, modularization and more. We also compare and contrast the leading JavaScript and Mobile Frameworks. This session is a must If you plan to build a PhoneGap application that has more than a couple of screens.

Getting Started with PhoneGap and Cross-Platform Mobile Development

Unfortunately, I ran into network issues which prevented some of my samples from working in this one, but you’ll still be able to get the point.

HTML has emerged as a powerful alternative to “native” to enable cross-platform mobile application development. In this session, you learn how to leverage your existing HTML and JavaScript skills to build cross-platform mobile applications, how to access the device features (camera, accelerometer, contacts, file system, etc) using JavaScript APIs, and how to package your HTML application as a native app for distribution through the different app stores.

You can also check out highlights from HTML5DevConf and find my presentation assets and materials online here.