My name is Pedro DV. I’m a Software Engineer and Software Designer. I work as a
JavaFX and Swing Freelancer and
Consultant, but more generally can be described as a Front End Freelancer and Consultant
since I also have experience in web technologies, building web apps, etc,
and have experience in
User Interface Design
and User Experience.

I’ve added two new controls to FXParallax library. The first and most important one, ParallaxPane, creates the possibility of adding a parallax effect to any Node subclass. The second, AnimatedScrollPane extends ScrollPane by making the scroll animated.

In this post I’m going to describe the mentioned additions to FXParallax.

New version details

ParallaxPane

ParallaxPane is a new control that creates the ability to add a parallax effect to any Node subclass. The API is pretty simple all you have to do is set the Node you’d want to have a parallax effect added to, by calling setContent(Node).

ParallaxPane automatically takes care of what “position” of the clipped content to show depending on the ParallaxPane’s screen position.

The video above shows a demo of the ParallaxPane, two ParallaxPane’s exist in this scene, both containing an ImageView object. As you can see those two ImageView’s have a parallax effect.

These are the images that have been used:

The following code snippet shows an example of how you can define a ParallaxPane, in this case we’re setting an image (through the use of ImageView) as the ParallaxPane’s content:

ParallaxPane also has a convenience method that you can use when you simply want to set an Image as its contents. That method is conveniently called setImage, and receives an Image object. You can also use the constructor that receives a Node or the constructor that receives an Image object.

If we wanted to have it defined declaratively, in FXML, it could look like this (using the ParallaxPane convenience constructor with a @NamedArg Image parameter):

AnimatedScrollPane

Another detail about the previous demo is that it’s using the new AnimatedScrollPane, a regular ScrollPane could also be used but AnimatedScrollPane adds an extra interesting effect by having the scroll be animated. You’ll also notice that modern applications, like for instance Google Chrome, usually scroll their contents through a subtle animation.

AnimatedScrollPane has the same API as ScrollPane, in fact it extends from ScrollPane. The current limitation is that, for now, it’s implemented with only vertical scroll in mind.

In the future there might be a ScrollPane skin that you can use, so you can add animated scroll to a regular ScrollPane.

Setting a different Node as content of ParallaxPane

As I said above, any Node can be set as the content of ParallaxPane, the following demo shows a video with a parallax effect (the second ParallaxPane contains a video), this is achieved by setting a MediaView as the contents of the ParallaxPane.

And the FXML code snippet that declares the ParallaxPane with the video:

Conclusion

ParallaxPane and AnimatedScrollPane have been added to the FXParallax library, the former adds the ability of adding a parallax effect to any Node and the other control adds a nice scrolling animation to a ScrollPane like control.