1 Reply Latest reply on Aug 23, 2014 11:40 AM by byChadWelch

    Adding navigation to parallax scrolling website?

    byChadWelch

      Hello!

       

      I'm building a parallax scrolling website, with different sections.  The scrolling in question is quite long, so I have some navigation set up on the side to jump to the needed place on the timeline. 

       

      How would I go about this?  I tried using the stop at, but it acts wonky with the scrolling...it jumps to the label, but it doesn't seem to take the scroll navigation control into account.  I also tried using the following code:

       

      sym.$("stage").scrollTop(0,2157); 
      

       

      ...but it jumps to the top of the site, every time, no matter what x/y coordinates I input.  I am using the following code to control the parallax scrolling on the stage: 

       

      // scrolling controls animation
      var animationHeight = 24000
      var stageHeight = sym.$("Stage").height()
      var scrollPos = sym.$("Stage").scrollTop();
      var duration = sym.getDuration();
      var percent = scrollPos / (animationHeight - stageHeight);
      var time = duration * percent;
      // Update timeline
      sym.stop(time);
      

       

      Help? 

       

      Thanks,

      Chad

        • 1. Re: Adding navigation to parallax scrolling website?
          byChadWelch Level 1

          So, I figured this one out. 

           

          If you want to add navigation that jumps to a particular point in the scroll, the above code is correct, however, my number was switched. 

           

          I have a hidden object named "floating stage" that I use to tell me where the browser window is at any given time.  I mark the Global X/Y position for the point I want to jump to.  My marker's global position was X: 0, Y: 2157.  I was putting in the correct numbers, but they need to be switched for the code.  Not sure why, someone smarter than me who has a better grasp on coding could probably give us all an answer. 

           

          SO.  Select your text/navigation button/whatever, click on the add action button to the left of it, and add a click action. 

           

          Then, type this in:

           

          sym.$("stage").scrollTop(2157,0);

           

          When you click on that particular link, it will jump/scroll to the point indicated in the action. 

           

          Thanks!

          Chad