New Parallax control for Java (JavaFX)


Parallax is a visual effect where you combine two layered images moving at different speeds to achieve a sense of depth.

Think about when you’re driving on the road and you see the trees close to you moving fast whereas the trees that are further away will move in the same direction but slower, the result is that you perceive the trees that are moving faster to be closer to you and the others to be further.

If you are a fan of video games you’ve certainly seen this effect before: two images are placed one over the other, the background moves slower, and the foreground, which could be the player’s avatar or the foreground where he stands moves faster.

This is an often used trick in the video games world. It started to be used quite long ago, an example is the Super Mario video game series.

Super Mario game using a parallax effect

This effect has been adopted in the user interface area, where you can see it used on web sites and also some applications.

Parallax on a web site – source:–GIF-Parallax-Building-animation

My goal was to bring this to JavaFX in the form of a control, where you could, through a simple API, add a parallax effect.

Parallax in a ListView

My primary objective was to bring this to the ListView, that is, have a control with an API similar to the ListView where you could set the background image and the list of items just like in the JavaFX ListView.

Implementing ParallaxListView

To have a parallax effect the items in the ListView, that is, the cells, need to scroll at a faster rate than the background image.

This new control will use the JavaFX ListView with a transparent background, layered in front of a background image.

The first challenge is that the scroll of the JavaFX ListView is done through jumps, that is, when you do a scroll action the position will jump from the original position to the end position without going through the intermediate position values. This will break the effect, since there is no movement like in the real world, only a discrete set of positions. In the real world the objects in the foreground move faster through a translation animation, remember this is about mimicking real world phenomenon like the driving example I gave earlier, to give a sense of depth.

So to accomplish this I had to implement my own ListView scrolling as well as the background scrolling, which when scrolling animates through a set of positions. The following is a live capture turned into a GIF of an example application using the ParallaxListView, the live version image quality and animation is better:

ParallaxListView example (image quality and animation worse than live version)

Where to get it

For now you can get it here:

I decided to stick with JavaFX 8 as Java 9 is still relatively new and some folks might have not yet migrated. This way Java 8 and Java 9 programs can use it.

I’m using private API, namely VirtualFlow, but this has turned into public API in JavaFX 9 so it will be easy to migrate the ParallaxListView code.

The test folder has an example of how to use the control. You have to scroll through the mouse wheel to see the effect.

Conclusion and Further Developments

The ParallaxListView can give a nice touch to your application, adding a bit of flair, however don’t overuse this effect.

In the next days I plan to add the following:

  • Add support for scrolling through the Scroll Bar.
  • Add API to change the height of the background image in relation with the foreground
  • Add the ability to specify the orientation of the ParallaxListView: Hoizontal or Vertical
  • Add a documentation page
  • Also provide a general purpose control that lets you specify a background and an arbitrary scrollable foreground control.


Update to JMetro implementation and documentation

It’s been too long since my last post! I plan on posting more regularly in the coming future.

Meanwhile, I took the opportunity to re-design this site which was looking pretty bad. Also thought my free open source libraries needed more attention, namely documentation so I’ve started working on that. The first one is going to be JMetro, you can check out the documentation here.

While I was looking over JMetro to write the documentation, I noticed some bugs and also a few aesthetic issues that I fixed:

  • Spinner: remove white background glitch with some style classes
  • List Box: added border around control
  • Slider: Somehow the fix to the slider when in vertical orientation, that fixed the fact that the fill started from the top instead of the bottom got lost. I re-implemented this fix.

Still haven’t had time with the font rendering issue. You can notice poor font rendering in JMetro on Windows with text in big font sizes. This is probably a JavaFX bug/problem because I’ve seen this elsewhere on images in other people’s blog posts and also other applications I’ve worked on.

Toggle Switch for java


A Toggle Switch is a control that is very popular nowadays, especially on touch based devices. You can see it in Android:


In iOS (6 and 7):


And in Windows 8:


Functionally it works just like a check-box but for touch devices it has one big advantage: when your finger is over the touch device it won’t obscure the control and so you can see an instant feedback when you press it. The disadvantage is obviously that this control takes up more space.


My implementation of the Toggle Switch allows you to change the text for the on and off state that appears right next to the toggle switch. You can also style the control using just CSS. It comes with a CSS implementation that gives it a metro look.


Below you can see a live demonstration of the control, in a light and a dark theme.


Toggle Switch (JMetro Light Theme)

Toggle Switch (JMetro Dark Theme)

Toggle Switch (JMetro Dark Theme)


You can grab the control and the accompanying metro style CSS by going to the jfxtras repository.

Further Developments

Currently it’s still not possible to style the Toggle Switch to look like the Android toggle switch using just CSS because it’s not possible to specify that the on and off text should appear inside the control and not outside as in the case of Metro. I’d also like to add the possibility to turn the animation on or off through CSS.