2 Replies Latest reply on Jun 25, 2014 1:24 PM by CZester

    Edge Commons Parallax on iOS

    Bobby Bol Level 1

      Hi all,

       

      I'm using the Parallax function from Edge Commons to build a parallax website.

       

      It looks great on all browsers, and most mobile devices, except everything Apple iOS.

       

      On any device running iOS, there's no animation when scrolling.

       

      I know that basic parallax scrolling isn't supported in iOS (yet), but would there be some workaround using touch functions?

       

       

      The following code works just as well as the Edge Commons function by the way, may be this could be modified to work with iOS?

       

      $(window).scroll(function(e){

       

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

       

              var docHeight = $(document).height();

       

              var winHeight = $(window).height();

       

              var scrollPercent = (scrollTop) / (docHeight - winHeight);

       

              var percentageScrolled = (scrollPercent*100)/100;

       

              var pos = Math.round(percentageScrolled*sym.getDuration());

       

            sym.stop(pos)

       

      });

        • 1. Re: Edge Commons Parallax on iOS
          carta mundi Level 1

          Hello...i'm having a little bit the same question...

           

          the parallax wont work on my ipad or iphone with ios...maybe you have an answer?

           

          I've made a simple parallax that changed with scroling..

           

          The script that i have put in is:

          http://cdn.edgecommons.org/an/1.1.2/js/min/EdgeCommons.js

           

          I hope you have already a work-around, and like to hear it..

           

          i'm a edge-starter ;-(

          • 2. Re: Edge Commons Parallax on iOS
            CZester Level 1

            Yea man. I had the same problem. Solution: Just add this code you've used for compositionReady event also for "touchmove" event  . It should appear when you click little plus symbol right to the Stage. Let me know if that worked for you.

             

                    var scrollTop = $(window).scrollTop()

             

                    var docHeight = $(document).height();

             

                    var winHeight = $(window).height();

             

                    var scrollPercent = (scrollTop) / (docHeight - winHeight);

             

                    var percentageScrolled = (scrollPercent*100)/100;

             

                    var pos = Math.round(percentageScrolled*sym.getDuration());

             

                    sym.stop(pos)