Tabris.js Examples - Parallax Scrolling

Moritz Post
March 24, 2015 | 3 min Read

A modern mobile UI should be delightful to use with small details that make the app feel alive. One of such interaction models is parallax scrolling which moves UI planes independently from each other. In this blog post we will explore how such an effect can be implemented with Tabris.js.

One of the keystones in Tabris.js UI development is the direct and fine-grained control over the widget hierarchy. In order to implement a feature like parallax scrolling we don’t need to rely on natively built-in functionality, we can use direct Tabris.js API to customize and tune the effect however we like. The gif to the left shows the parallax example in action.

As we can see, the example makes use of two distinct effects: First the described parallax effect of the image, and secondly, the “sticky” orange bar that stays in place once it is scrolled to the top. We will look at both effects individually.

Parallax scrolling

The example consists of a scrollable composite that holds the image, the orange bar and the main text. To implement the parallax scrolling, we attach a scroll listener to the underlying ScrollView and translate the image by a certain percentage whenever the scroll position changes:

scrollView.on("scroll", function(offset) {
  imageTextView.set("transform", {translationY: offset.y * 0.4});
}

The multiplication factor (0.4) determines the amount of parallax displacement.

The second effect of the example is the orange bar that stays in place once the scroll position has reached the top. This effect also uses the scroll position of the underlying ScrollView but starts out a little different. When the UI is created, the orange bar is moved down by its own height - the image height. Effectively placing the bar on the bottom of the image (bottom aligned):

var titleCompHeight = titleComposite.get("bounds").height;
titleCompY = Math.min(imageHeight - titleCompHeight, pageHeight / 2);
titleComposite.set("layoutData", {left: 0, top: titleCompY, right: 0, height: 64});

When the user starts to scroll, we again make use of the scroll callback to translate the image:

scrollView.on("scroll", function(offset) {
  if (titleCompY - offset.y < 0) {
    titleComposite.set("transform", {translationY: offset.y - titleCompY});
  } else {
    titleComposite.set("transform", {translationY: 0});
  }
});

In the callback we check if the scroll position has moved beyond the vertical position of the orange composite and if that is the case we translate the composite down by a delta to keep it flush aligned with the upper bounds of the ScrollView. If we don’t need to do any translation we just set the translation back to 0.

Take away

Interaction design with Tabris.js is very powerful. The reason the implementation can be so simple, is that Tabris.js allows us to directly react to UI state changes. Once a callback is received we can alter other UI elements and only when that change is applied, a new frame is drawn.

If you’d like to check out the Parallax Scrolling example on your device, you need the Tabris.js Developer App:

[

The Developer App is connected to the Scratchpad on the Tabris.js website so you can easily play with the code yourself.

Here’s the list of “Tabris.js Examples” posts we’ve published so far:

  1. Tabris.js Examples – Hello World!
  2. Tabris.js Examples – User Input
  3. Tabris.js Examples – Local Storage
  4. Tabris.js Examples – Images
  5. Tabris.js Examples – Parallax Scrolling
  6. Tabris.js Examples – Animations
  7. Tabris.js Examples – Drawing on the Canvas
  8. Tabris.js Examples – Network Access

Stay in the loop! Follow @tabrisjs on Twitter.

Moritz Post