Adding navigation to parallax scrolling website?

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

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

Similar Messages

  • Navigation menu parallax scrolling

    Hi,
    I have a single page website which i am trying to incorporate a vertical style parallax-scrolling navigation bar. I have the navigate bar underneath my cover photo at the top of the website. However, i am encountering an issue where the navigation bar sometimes jumps behind the cover photo when i scroll back up, i think this may because i haven't fully synchronised the navigation bar opacity settings with the hidden one behind the cover photo at the top of the webpage? (i did see someone post a website project with the exact style of navigation i am trying to create). Any help would be greatly appreciated. Thanks in advance.

    Hi Vikas,
    Thanks for your reply, however i seem to have fixed the issue myself. If the problem recurs, i shall let you know. Thanks again
    Lewis

  • I am looking at online tutorials about parallax scrolling websites but I have a fully updated version via Adobe Cloud. I'm on Windows 8.1 but my Muse doesn't have the 'fill/scroll' menu. Why? Is it only a Mac option?

    I want to create and offer a scrolling website for a restaurant client but I am confused by online tutorials that show a drop down menu with either fill or scroll.  I have checked for updates but I am fully up to date.  Does anyone know why I cannot access this scrolling menu please?

    Hi Vivek,
    Thank you for your kind advice which I greatly appreciate.  However, I think I have solved most of my problems by signing up with Train Simple on a $9 per month technical learning course.  Within a few minutes I was able to locate the fill - scroll menu by simply clicking on the actual text of fill - which for some reason I didn't know about!.  I stayed with the Muse fundamental course all day today and covered everything to do in Muse in great detail.  I am now looking forward to the single page website learning experience with scrolling!

  • Parallax scrolling website with navigation menu.

    I am making a website with parallax scolling. It is going to be a story from top to bottom.
    The story is going to be quite long, so my idea was to put in a fixed navigation menu. If you click on buttons in the menu you go directly to different parts of the story. 
    An example of a website that has parralax scrolling and a menu.
    moto.oakley.com/#maximum-peripheral
    Do i have to use triggers?

    I have done this with the site I am building and it works great until it stops working. After a user is in the site for awhile the links in the navigaion stop working. How is this possible?
    How is it possible that they don't always work? This site is supposed to go live soon. Any help is greatly appreciated.
    Here is the site link: http://annualreports.usafunds.org

  • How to make a navigation for a scroll-down website?

    Hello, I created a one-page website, where you need to scroll down to see the different types of content.
    But how do I add a navigation on it?
    As example, the "About" part is somewhere in the middle of the page, how can I make a navigation which will scroll down automaticly to the "About" part when I click on it?
    I think you know what I mean.
    Greetings

    Use anchor links for the purpose - http://tv.adobe.com/watch/muse-feature-tour/muse-create-anchor-links/.
    Also check this out - http://www.musegrid.com/adobe-muse-tutorials/how-to-use-anchors-for-smooth-scrolling-singl e-page-designs-with-adobe-muse.
    Thanks,
    Vinayak

  • Why is the webpage jumping all over the place with parallax scrolling?

    Hi all, I'm getting a little frustrated here... I've built a looooong (10,200 pixel) parallax scrolling site, when I click 'Preview' it plays like a dream, but when I render the HTML, view in browser or publish to business catalyst to view, it just jumps all over the place. I realise that the page is extremely long, I'm thinking it could be that but just need to clarify it before I rework it all and maybe find out after, that it was something else that was causing it to happen.
    Your views would be greatly appreciated!

    Hi Aish,
    I have found the problem, but not sure where to find the solution as I'm pretty new to Adobe products.
    I built another site to see if I had the same problem, this time I made it shorter to see if the length was the problem. I put in some elements and 'assets', added parallax scroll key frames, left out pretty much most other things to see if I could pin the problem down. I found that I had the exact same problem.
    In the Muse preview it scrolls with the mouse like a dream when I grab the scroll bar and drag it down. But when I preview in business catalyst, export HTML or preview in browser, it goes crazy and won't let me get to the bottom. Further to that, when you scroll back to the top, everything is out of place and gets worse every time you scroll down and back to the top.
    I have a touch screen computer and tried to scroll the screen with my finger rather than dragging the scroll bar down with the mouse. The website works like a dream when I scroll with my finger, even when I scroll back to the top everything stays in place and the whole site works lovely! I then tried the other, long website to see if this was the same case and it was exactly the same case. It scrolls with a finger like a dream, but has a fit when you drag down the scroll bar with a mouse.
    My next question would be could I somehow disable some kind of touch scroll option in only the desktop version of the site, but leave it active in mobile and tablet sites? If I can do this can you please advise me on how to deactivate it, I think that should solve the problem.
    Can you please get back to me with an answer to this? I would be very greatful!
    Marc.

  • Parallax scrolling site incorperating a blog.

    Anyone seen a good parallax scrolling site incorporating a blog. IE does the blog go to a new page wordpress site or what?

    You can integrate blog to compositions and then apply scroll to content.
    Fair amount of discussion is done here :
    https://forums.adobe.com/message/5454035
    Helpful links :
    Creating a Blog in Adobe Muse - Training by MuseThemes.com
    Adding a Business Catalyst Blog to your Adobe Muse website
    https://forums.adobe.com/thread/1439031
    Thanks,
    Sanjit

  • Shaky parallax scrolling

    I designed my website using Adobe Muse.  I'm using linked anchors for my navigation, with the parallax scrolling that Muse allows for.  However, when you click on my links to move down the page, the parallax scrolling seems to shake as the page moves.  It's difficult to explain, it's as if the site is vibrating instead of having the smooth parallax movement that it should.  Can someone please help me figure out how to solve this problem?  If you want to see what I'm talking about, my website is www.robdemeritt.com.  Just click on the links on the side and you'll see what I'm trying to describe.  Any help would be greaty valued!  Thank you!

    Update to the latest version of Muse. Your site was generated using 7.1. The current version is 7.3. There were a number of major improvements in the area of parallax scrolling between 7.1 and 7.3.

  • Parallax Scroll with Muse Disables Page Swiping in Adobe DPS

    Hi,
    I haven't come across a satisfactory answer to this question in the Adobe DPS forum so I'm asking here in case anyone has more insight.
    When using a Muse composition in Adobe DPS that features parallax scrolling, viewing the page as an HTML article leaves the swipe navigation between DPS page disabled. It has something to do with event handlers in the Muse script overriding the DPS left and right swipe functionality. Has anyone come across a solution for this problem?
    Thanks.

    I think this is a bug in the new update. I have made numerous sites since and all of them have gotten the horiztonal scroll. I mentioned it in the bug section and had a staff member help me with my first issue but have not heard anything else since.
    This is a pretty serious bug, you can not launch a website with a horizontal scroll like this.
    on another note, I really like the look of your site, very slick so far!

  • Parallax scrolling to images

    hey i am wondering if you know of a way to add parallax scrolling to image slide tumbnail slide shows ?
    this is what i am working on. i am using the compostion lightbox display, and in there. i have a thumbanil slide show. nowi have managed to get that in there. with the triggors.
    now. i am wanting to see if i can added thumbnail slides that when i hit the slide, it shows the next set of images.
    example.
    engagment| Bridal| wedding
    its one slide show, but when you hit it. you can go to the next slide, like how you have slide 1, 2 and 3.  that what i am thinking is what parallax scrolling is?
    can it be done? if so how?

    Thanks for your reply. I tried applying the following AS2 script to each image:
    For the first movie clip I used:
    animator = createEmptyMovieClip('animator',1);
    bg_1 = animator.attachMovie('star1','bg_1',1);
    bg_2 = animator.attachMovie('star1','bg_2',2);
    bg_1._x = -bg_1._width/2;
    bg_2._x = bg_2._width/2;
    speed = 1;
    starWidth = 950;
    animator.onEnterFrame = function() {
        bg_1._x -= speed;
        bg_2._x -= speed;
        if(bg_1._x <= -bg_1._width) bg_1._x = starWidth;
        if(bg_2._x <= -bg_2._width) bg_2._x = starWidth;
    For the second movie clip I used:
    animator = createEmptyMovieClip('animator',2);
    bg1 = animator.attachMovie('star2','bg1',1);
    bg2 = animator.attachMovie('star2','bg2',2);
    bg1._x = -bg1._width/2;
    bg2._x = bg2._width/2;
    speed = 2;
    starsWidth = 950;
    animator.onEnterFrame = function() {
        bg1._x -= speed;
        bg2._x -= speed;
        if(bg1._x <= -bg1._width) bg1._x = starsWidth;
        if(bg2._x <= -bg2._width) bg2._x = starsWidth;
    And for the third and final movie clip I used:
    animator = createEmptyMovieClip('animator',3);
    bg01 = animator.attachMovie('star03','bg01',1);
    bg02 = animator.attachMovie('star03','bg02',2);
    bg01._x = -bg01._width/2;
    bg02._x = bg02._width/2;
    speed = 3;
    starssWidth = 950;
    animator.onEnterFrame = function() {
        bg01._x -= speed;
        bg02._x -= speed;
        if(bg01._x <= -bg01._width) bg01._x = starssWidth;
        if(bg02._x <= -bg02._width) bg02._x = starssWidth;
    I thought this would work, but when I tested the movie all three movie clips moved together at the same speed. I want each movie clip to move at a different speed, but I'm completely stuck.

  • Using parallax scrolling on a browser fill shape?

    Hi everyone,
    Is it possible to apply parallax scrolling onto a shape that is extended to horizontally fill up the browser? I'm creating a single page scroll website and a want a shape to cover up a certain fraction of the bottom of the browser (I can't use pin because then the shape will move with the bottom of the browser depending on the size of the window.) Parallax works fine on the shape until I extend it to the browser borders and then parallax grays out. Will this be supported in a future update? Is there another way for me to achieve this effect? Thanks!
    Jackie

    From Muse Release Notes - http://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html.
    Note Scroll Motion Effects are not available for 100% browser width objects, pinned objects, items that are inline within text, items within a group or items within a widget.
    You would also find a similar note in the information tooltip for Scroll Motion under the Effects panel in the Control strip. Please feel free to submit it as a feature request in our Ideas section.
    Thanks,
    Vinayak

  • Need Help making a navigation menu for a website

    Alright so I've been having some problems getting this to work correctly. I am making a navigation menu for a website and I'm trying to get when I hover over the main header a drop down appears animated of course below it. I also want when you highlight a specific text line for it to highlight blue along with a rectangle behind it to change to a lighter shade of red.
    Some of the problems  I have been running into is play and stop commands on mouseover and them not stopping when they should and getting the text to change color.
    Thanks for the help.
    Here are some screen grabs of what I am doing
    http://imgur.com/W2bZuF3
    http://imgur.com/W2bZuF3
    http://imgur.com/2GI3y71

    Your page's code is still a bit of a wreck.  Do you ever look at it?
    <html>
    <style type="text/css">#p7MBM_1 {
      width: 951px;
    You need a doctype first - I recommend HTML4.01 Transitional.  Open this (and other pages) in DW and use FILE | Convert > HTML 4.01 Transitional, then save.  But wait until you do the other changes recommended below before doing this.
    Add a <head> tag below the <html> tag.
    Add a <title> tag below the <head> tag.
    Add this below the <title> tag - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Add </head> below this -
    <style type="text/css">
    <!--
    .style10 {font-family: "Goudy Old Style"}
    -->
    </style>
    You may want to change that font-family style to "Goudy Old Style, Geneva, Times, 'Times New Roman', serif", since Goudy is not web safe.
    Move <body> below that </head> you just added.
    That will clean your code up a bit.  Let's look at the page again when you have done these.

  • Parallax Scrolling from top view (bird view)/ resizing and blank spots

    Hello : )
    I was thinking this was going to be easy but some problems occurred
    Currently Im trying to make a parallax scrolling road while seeing it from above, but there are some issues going on.
    the 1st one is that somehow after the second image is gone out of the stage , there are a few blan pixels that are not filled .... and it seems that the speed of the moving is == to the pixels that aren't filled up.
    And i think , just asume  that if i test this on like different screen sizes - lets say this is for a phone - ill get some issues with the scaleX and Y and it will get quite ugly and cubic.
    I did surch for an example or a tutorial but there are only in a X direction like if you see the car from a side view like this
    http://hub.tutsplus.com/tutorials/add-depth-to-your-game-with-parallax-scrolling--active-2 134
    the SWF file  si here
    http://www.stouchgames.com/APKs/Road.swf
    so the current code i have is
    package  {
              import flash.display.MovieClip;
              import flash.events.Event;
              public class MainClass_road extends MovieClip {
                        protected var _road:road = new road();
                        protected var _road2:road2 = new road2();
                        public function MainClass_road() {
                                  _road.x = stage.stageWidth/2
                                  _road.y = stage.stageHeight - _road.height
                                  addChild(_road)
                                  _road2.x = stage.stageWidth/2
                                  _road2.y = y - _road2.height
                                  _road2.alpha = 1
                                  addChild(_road2)
                                  addEventListener(Event.ENTER_FRAME, everyFrame)
                        protected function everyFrame(ev:Event):void{
                                  _road.y +=8
                                  if(_road.y > 400){
                                            trace("zzzz")
                                            _road.y = y - _road2.height
                                  moveBackground2()
                        protected function moveBackground2(){
                                  _road2.y +=8
                                  if(_road2.y > 400){
                                            _road2.y = y - _road2.height
    and the FLA is here
    http://www.stouchgames.com/APKs/Road.fla

    is there a way to do this only with only as3 code and not by this way :
    if the road high graphics are 400 pixels and the stage has 400 height
    1.creating the original _road and setting it`s Y to 0
    2.go in the same movieClip (of the _road) copy and paste the same graphics but at Y = -400
    and then adding the code
                   var speed = 4
                   var _road:road = new road();
                   _road.x = stage.stageWidth/2
                                  _road.y = y
                                  addChild(_road)
                   addEventListener(Event.ENTER_FRAME, everyFrame)
    function everyFrame(ev:Event):void{
                   _road.y += speed
                   if(_road.y > 400 ){
                       trace("zzzz")
                       _road.y = y 
    cause it seems (for me )that if i do it with code only - there is a blank spot which amount is the speed in the EveryFrame function
    and if no ... can i make it smoother without changing the framerate above 30

  • Parallax scrolling for different screens

    Hi there...
    Does anybody know how to deal with different screen sizes and parallax scrolling?
    It know the 100% width option so that is not the issue.....the issue is the height!!
    Laptop versus desktop etc..
    So what is the best height to use so it will fit all screen sizes?
    Thanks, Cor

    Hai Daniel,
    I faced the same problem with the overflow controller.
    Then depending on the number of records that I am showing in the table I have adjusted the size of the overflow controller in pixels.
    my code looks some thing like this.
    lv_oflc_height = 53 + ( lv_actual_visible_rows * 21 ).
    if the filter is on 20 more pixels added to the height.
    <xhtmlb:overflowContainer id     = "OFLC_RCN_HDR"
                                height = "<%= lv_oflc_height %>px"
                                mode   = "SCROLL" >
    and this worked for some standard resolutions with out big difference.
    Best Regards,
    Venkat.

  • Parallax scrolling for phone layouts

    I think the parallax scrolling should be available especially for mobile phone designs, as these need to have all content vertically. Scrolling with the finger is also much more intuitiv than with a mouse, so this effect would give some playful interest to the website on a mobile device.

    So weird that you dont get the problem when taping on a menu button. Still, that anchor thing may be the problem cause now that I remeber anchirs where a little bit to the left out of the effective area, so that could be the problem. I'm gonna try changing that and report results.
    Thanks so much triquita.

Maybe you are looking for

  • What's wrong with my code for comparing date retreived from db and sysdate?

    Hi all, I need to retrive date from the DB and compare it to system date.i have posted the code below.i get java.sql.SQL Exception:Io exception:Socket closed. What's wrong with the code?please help me.Thanks in advance. public boolean date() throws I

  • Data exchange Mainscript (SCRIPT) with script block (DAC)

    Is there any way to exchange data beetwen a Mainscript (SCRIPT) with user-dialoges and script block (DAC) in this way that the script in scriptblock can access to this data? Background: I write a DAC-Application with some script-blocks for reading an

  • Problem in FB60

    Hi, I am using Transaction code FB60 to post Vendor Invoice. In the payment tab, for Pmnt Block, I am choosing the option " Block for Payment". However, after I press Enter or Save the invoice, the Payment Block automatically changes to "Free for Pay

  • Business Area Not visible at document display

    Dear All, I have confi. document spllitting.  Posted documents with busines area and profit centre. But at document display business area filed is not appearing. Only Profit Centre is appearing Please let me know wht is the problem. Regards Partha

  • Sorting Dynamic VO

    Hi, Jdeveloper Version : 11.1.1.4.0 Sorting for dynamic VO that has been created based on the programmatic ViewObject is not working. I tried a sample in Hr Schema with Non-Programmatic VO. if I do table sorting for the dynamic ViewObject, it worked.