0

I have a scrollview and an image as a background in different surface with lower z-index. I want to scroll the image with half the speed of the scrollview.

Any ideas on how to implement it ?

user732456
  • 2,638
  • 2
  • 35
  • 49
  • Can you say what you have tried or found on this so far? – jwg May 19 '14 at 13:38
  • I found the way to do it with a fixed size image which is bigger than the screen height. There are a lot of tutorials that explains it. The problem with this solution is that my items count in the scrollview varies which leaves me with single parameter to change and that is the velocity. I want the velocity to be fixed as a proportion of the scrollview velocity. This means that I have to dynamically add the background image from time to time or there might be other solution – user732456 May 19 '14 at 14:01
  • Hmmm, writing this I got an idea. Maybe if i use 2 scrollviews I can do what I want – user732456 May 19 '14 at 14:20
  • you mean have a background scrollviews that wraps around forever? that sounds like an interesting approach (like feedback!). did you try and can you post a self-answer here? – dcsan Jul 01 '14 at 08:30

1 Answers1

0

I can't give you a COMPLETE solution, but this should take you down a decent path.

1) Famo.us has worked on multiple scrollViews. Each has a slightly different method to get the 'scrollTop' value from it.

  • The one created earlier only gives you the scrollTop value for the first visible element in the list. So, in this case you can get how many elements have been scrolled away and calculate the actual value yourself. OR if you have a small, and limited number of the elements in the scrollView you should wrap all the elements in a single view and pass a singleView to the scrollView. This way Famo.us has to do calculations for off-screen elements, but if the number of elements is small enough, it can make many animations/calculations much easier.

  • The second scrollView was call LimitedScrollView internally. I don't have much experience with it yet, but it should give you the correct values anyway.

2) ScrollView fires events on scroll. use that to update the value of a transitionable.

Pseudo Code:

scrollView.on('scroll', function(){
  transitionable.set(scrollView.scrollTop)
});

3) You can now bind the transform value for the background to the transitionable.

Pseudo Code:

background.transformFrom(function(){
  return Transform.translate(0, -transitionable.get()/2, 0);
});

Now, things should work correctly.

Hope that helps.

Naman Goel
  • 1,525
  • 11
  • 16
  • It should work. In general, the transitionable is the single most important class in famo.us for developers. – Naman Goel Feb 09 '15 at 17:09