Famo.us/Angular Sticky Background Position ScrollView Sync

Question

I'm trying to create functionality very similar to most websites these days.

The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.

We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.

Here is a pen. http://codepen.io/LAzzam2/pen/XJrwbo

I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.

scrollObject.sync.on("update", function (event) {
        console.log('update');
        test(event);
    });

here is the function positioning the backgrounds.

function test(data){
  var scroller = document.getElementsByClassName('famous-group');
  styles = window.getComputedStyle(scroller[0], null);
  tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
  var distanceTop = -(parseInt(tr));

  var sections = document.getElementsByClassName('section');

  sections[3].style.backgroundPosition="50% "+distanceTop+"px";
  sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
  sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};

Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.

That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?

**There are known issues, only works in -webkit browsers as of now

Answer 1

I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:

function test(data){
  var scrollViewPosition = scrollObject.getAbsolutePosition();
  var newBackgroundPosition = // Calculate the new background position
  var newForegroundPosition = // Calculate the new foreground position
  var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
  var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};