how to add parallax to a Scrollview?

Question

I want to use famo.us standard Scrollview but have a background image which is scrolling at a different speed to give a parallax effect.

Rather than setting up timers and getPosition stuff, i was wondering if there's a way to hook into an event stream, or somehow pipe the Scrollviews position into a transformation that's applied to another object? For example use the modifier within the scrollview and a modifier chain and then apply that to another imageSurface?

The examples are a bit thin here so would appreciate any pointers.

Answer 1

To answer your question, the way to pipe scroll events is to use the sync property of scrollview to get updates on scroll.

That is..

scrollview.sync.on('start',function(e){ // Do Something });
scrollview.sync.on('update',function(e){ // Do Something });
scrollview.sync.on('end',function(e){ // Do Something });

However for rendering objects in sync and ensuring precision on such, I have found the Engine prerender function to be wonderful.

So I would do something like this.

Engine.on('prerender',function(){

  // Divide by scalar to get effect

  var parallaxEffect = 2.0
  var bgPos = -contentScrollview.getPosition() / parallaxEffect;

  imageView.state.setTransform(Transform.translate(0,bgPos,0)));

})

Hope these pointers help!

Answer 2

This is a bit of a lazy answer, but let me link you to one of the famous demos created by their HackerLab alumni. It demonstrates using famous to create some complex scrolling/swiping animations.

I've learned a lot about Famo.us from the code in the demos, however this hasn't been made available to those outside the beta list yet. So I cloned the project files.

UltraVisual: A Parallax Scrolling Demo

https://github.com/KraigWalker/famous-UltraVisual

A more advanced scrolling animation demo

https://github.com/KraigWalker/famous-IFTTT

Hope this helps you out!