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

Similar Messages

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

Parallax scrolling involved with HTML

Good evening,
Have a parallax scrolling involved with HTML. However, now each function is disabled. Horizontal and vertical wipe will not work ... someone has an idea?
Thank you!

I unfortunately can not share the code because of copyright. I'll ask tomorrow what I can tell. Hope for your understanding ...
Is there a way to disable the HTML? with a button or something else?
Siconn

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!

Issues with navigation menu

I hope someone out there can help me. I created a site and all of the pages I created weeks ago naturally turned the navigation text (where it says "home" or whatever) to white when selected with all the unselected pages a dull grey. This worked out well since you could tel where you were and see what other pages you could go to. But now I tried to create a new page and the default seems to be that, when selected, the new page text is a dark gray and all the other links in the navigation menu are even darker gray, which blends into my background and makes them unreadable. Why would it do this? Does anyone know of a ways to manually change the color of the navigation links when they are selected? Thanks people

I'm with you ... I'd like to know the answer to this one too ... can't see the gray against backgrounds all the time. Also, if you wanted to use the one page for reading by expanding the excerpts you can't read them because they are gray! Help please someone ....

Parallax Scrolling: Problems with scroll wheel

Hi,I'm syue
I learn parallax effect from this video.
It helps me a lot ,but I have a problem with scroll wheel
Everything looks nice on my computer.
But when I make a test on different computers.It will show something like this...
https://docs.google.com/file/d/0B-eo1Bu6k3N-cEw2c3dyWEpfNDA/preview
I don't know how to explain the situation so I make this video.
I also chick my code and it shows me everything is fine.
I don't know how to solve this problem
Can you give me some advice?
Best regards. :-D

I know many people who have 30 gig and no wheel problem. I have an 80 gig and no problem. Finding your warranty (or buying the extended warranty) would be useful.
Good luck.
Kid

Why do pages scroll over a navigational menu pinned to the top of my master page?

I am trying to create a static menu bar across the top of the entire site, but all pages continue to scroll over top of this menu, regardless of arrangment etc. How do I make page content go 'under' the nav menu pinned at the top of my master page?

You need to put you Navigation items on a new layer, then make sure that layer is on top.

How can i create a multilingual website with a menu for each one?

I have all the pages in spanish and the same pages in english ej. Contacto and Contact ...should be sister or child pages? I need two diferent menus (one for spanish pages master, another menu for the english pages master) but the menu feature mixes everything. Is there a solution to this?
Thank you

Hi Carme,
It might be easier for you to set up your menus manually, so you can control what is the the Español and English menus, rather than fuss with child and sister pages.
Click and drag out that menu widget that you want to work with > click > click on blue arrow > window opens > under "Menu Type" choose "Manual". Then you can manually enter the titles for and English Language menu. Get that working exactly as you want it to ( colours, roll-over etc ) When you're happy with that one, copy and paste a duplicate of that English menu. You can then go in and change all the English to Spanish. When these are done, then go through both menus and link the buttons to the appropriate language pages.
This way, you don't have to worry about page higharchy, sisters, siblings or anything else. You have better control. It might also prove helpful in the fact that there have been issues in the past with pages navigating once uploaded to the web, who's page names consist of special character language markers like: ñöäãũ
You may want to consider when naming your actual pages that the search engines will be using, ( i.e samplepagespanishpage.com* ) to omit these special characters. Sometimes they cause problems and the site won't work properly. However, if you manually do your menu names, these special characters can be used and it shouldn't cause an issue.
* - If you check into the "Page Properties" under "Metadata" - "Page Name" is where you may want to consider omitting the special characters. "Page Title" I believe you can keep the special characters. This is the information that people would see in Google.
I hope this helps.

Interactive website demonstration with rollover menu

Hello,
I have a problem that is really bugging me - hopefully someone here has some advice to offer
I have been asked to produce an interactive demonstration of a website with a menu structure similar to this one:
http://www.arsenal.com/home
The user can move the mouse over some of the menu options to bring down a submenu - sometimes, that submenu even has a submenu of its own when moused over. For reference, take a look at the arsenal web page, move the mouse over the 'first team' menu option, and then over the 'players' submenu option.
Here is how the project is planned to be done: The user starts at the home page, and is free to move around the website to learn about its functions, by using the top menu. When clicking on a menu option, the user is taken to the corresponding slide/project.
My problem is that I am unable to get this menu to work as it should in the project, i.e. dropping down when mousing over and allowing the user to click on the submenu options, and allowing for a second submenu to appear when mousing over a submenu option.
I have tried using rollover slidelets and images, but the 'rollover area' placed over the menu option prevents the user from moving down to the submenu without having it disappear.
Any thoughts on how to solve this menu issue? I am using Captivate 5.5 on Windows 7.
/Oswald

Hello,
If the menu structure is as complicated as what I see in the example, really you need another application. IMO this was created in Dreamweaver, where you have the dropdown menus available right away. It can also be realized in Flash, but this is not something Captivate was designed to achieve, really.
I have been trying to simulate such a behavior using Text Captions with click boxes to have the hyperlinks and using Effects to slide in/out. But you have to tweak the effects-XML to achieve this. Just trying to offer you the correct advice, even though I try always to push Captivate as far as possible: for the menus you need a real webdesign application, not a rapid authoring tool like CP.
Lilybiri

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

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly? As I can't pin it, I keep it on top of the page with scroll effect 0. It collapse, shows the menu buttons but doesn't close back once it reaches the

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly?
As I can't pin it, I keep it on top of the page with scroll effect 0.
It collapse, shows the menu buttons but doesn't close back once it reaches the anchorpoint.

Muse won't let you, at least not that I know of. You could find the class in the code that muse gives it position: fixed…I think. You could paste it into the head area of your page properties to override the class. I believe something like this would give you persistent nav bar, pinned at the very top, on mobile:
#youmuseclass {position: fixed;}
I wouldn't use any parallax on mobile either, the performance is terrible.

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!

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">

</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.

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.

Image box with opacity gradients, and other parallax scrolling inhancements

First i want to say great job Muse Team, this is starting to get really interesting:
I've been playing around with parallax scrolling over gradients for effect,   but i'm dreaming about fading in full screen fields of texture.   without the weight of massive .png
1)      I would love to see the Background Image folder persist in the rectangle Fill > Gradient menu, with the options to tile etc.
2)     This feature along with speed and rotation controls for anchor finding, would really crack this thing wide open for me.
could be implemented with 2 lines coming off anchors:
one line straight down that can be rotated like a hand on a clock, to set the landing orientation.
and the second a diagonal line (thinking photoshop curves), to set the approach speed.
Maybe holding shift with the hand tool could rotate the design page, though i have no idea what rotation would do to the exhisting scrolling menu, i guess ill leave implementation to you!
3)     One last tweak, the option to remove scroll bars entirely from the page properties menu would be nice, but intil then i found this bit of code for the bleeding edge:
Insert as HTML to hide the horizontal scrollbar:
<style>
html,body{
overflow-x:hidden;
</style>
thanks for your time

Be sure your images are stacked properly in the order you need them in your Layers panel.
If that doesn't solve your problem please provide a link or screenshots so we can see your problem.

Parallax scrolling website with navigation menu.

Similar Messages

Maybe you are looking for