FXParallax: parallax in Java version 2

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 the FXParallax category you can check out my previous blog posts about this library.

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:

VBox vBox = new VBox();
ParallaxPane parallaxPane = new ParallaxPane();
String url = ParallaxPaneWithImageTest.class.getResource("small-business.jpg").toExternalForm();
parallaxPane.setContent(new ImageView(url));
vBox.getChildren().add(parallaxPane);

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):

<VBox styleClass="main-container">
  <strong><ParallaxPane styleClass="first-image">
    <image>
      <Image url="@small-business.jpg" />
    </image>
  </ParallaxPane></strong>
</VBox>

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:

<ParallaxPane styleClass="video">
  <MediaView>
    <mediaPlayer>
      <MediaPlayer autoPlay="true" mute="true">
        <media>
          <Media source="@Swimming_10835.mp4" />
        </media>
        <cycleCount>
          <MediaPlayer fx:constant="INDEFINITE" />
        </cycleCount>
      </MediaPlayer>
    </mediaPlayer>
  </MediaView>
</ParallaxPane>

These demos are all present in the repository, in the test folder.

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.

As usual the jar is available for download and through Maven, for details check the FXParallax documentation page, which has been updated.