0 Replies Latest reply on Jan 19, 2015 9:52 AM by NEW EXPORT ACCOUNT

    A parallax scrolling method that works with PhoneGap

    NEW EXPORT ACCOUNT

      Hi,

       

      I made a parallax scrolling page into a PhoneGap app, yet...maybe because scrolling is disabled in PhoneGap, it doesn't animated with "scrolled".

       

      What workaround is there? Is there maybe something to un-sandbox about PhoneGap javascript?

       

      Thanks in advance! So much fun making scrolling animations! (seems iOS 8 supports scrolling events in the new style webview too)

       

      Here is some code:

      var d = document.createElement("div");

      sym.$(d).css({

        position:   "absolute",

        top:        "0px",

        height:     "200%",

        visibility: "hidden"

      }).html(" ");

      document.body.appendChild(d);

       

       

      // prevent Edge Animate stage from scrolling

      sym.getSymbolElement().css({ position:"fixed" });

       

       

      // animation frame loop: check scroll position

      // each frame and move animation accordingly

      var lastScrollTop = 0;

      var animate = function() {

        var scrollTop = $(window).scrollTop();

        if (scrollTop != lastScrollTop) {

        lastScrollTop = scrollTop;

        var maxScroll = $(document).height()-$(window).height();

        var scrollPos = scrollTop / maxScroll;

        // scrollPos is 0..1

        sym.stop( scrollPos * sym.getDuration() );

        }

        requestAnimationFrame(animate);

      }

      requestAnimationFrame(animate);

       

      So how to modify that to make scrolling animations in PhoneGap Build ?