Parallax Scrolls differently on diff browser widths

I spent lots of time setting up scrolling. (Select "Menu" to see scroll) And it works great when I preview in Browser. BUT  the black bar doesn't line up properly (as it is in the screenshot) if the width of the browser is different. Is it possible for the black bar and menu text align like this on different size browser widths?
here's the temp link to the site
http://cafemaddalena.businesscatalyst.com/index.html
Thanks.

Vikas:
Sorry, I realized I forgot to post a thank you for your quick response. I implemented your solution straight away. It worked perfectly, and helped me understand parallax scrolling a bit more.
The Muse forum is awesome! You and other staff are so quick to post replies. This really helps mitigate the frustration that occurs when you are on a deadline and have a glitch you can't work out. I hope you'll send a link to this post to your manager, so they can be reminded of what a great job you and the other Muse forum team are doing!
Alas, I wish there were staff experts regularly helping folks in the Edge forum. I feel we've been forgotten there... :-(

Similar Messages

  • If Muse does not support responsive design, can someone tell me why I have seen 100% browser width

    If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

    If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

  • Parallax scrolling not adjusting to different browser size, help?

    Hello everyone,
    I am putting together this parallax website, http://natashajackson.businesscatalyst.com/index.html and it works on my 15 in mac book, but does not adjust size for smaller or larger screens. I can't seem to make the timing for all the "scrolling effects" line up for all browser sizes.
    I have watched many muse tutorials and have figured out how to avoid horizontal scrolling, but again, it only appears to be working on my 15 in book.
    The below photo shows my layout properties. Any magical tips that I am missing? I look forward to your feedback!
    Thank you

    Hey manna9er I was able to figure out the 100% browser width and it turned out to be pretty simple. At first I was "Placing" my images into muse and scaling them to the width of browser, and it never was 100% width. I found that you cannot "Place" you must use the "Rectangle Tool" and create box the width of the browser, make sure that it is 100% browser width, the border line turns red and a tool tip informs you, as seen in image)
    Next use the "Fill" option on your top menu bar-->select "Choose Image Background"--> upload image file-->scale to whatever size/style you want. (see image below)
    For parallax go to Window-->scroll effects--> and play with Motion, Initial Motion, Key Point and Final Motion. Parallax takes some toying with to get desired effect.
    Hope this helps

  • Parallax Scrolling and Browser Magnification

    This is probably an unresolvable issue at this point, but it seems one of the BIG drawbacks to using Parallax Scrolling is that it only works as planned if the user of the site is viewing it at 100% Magnification.  Any change up or down in magnification results in a different set of parameters for final motion, and if you're using it hoping that the final location of the moving object aligns with another fixed object in the overall design in some fashion, you're in for a big disappointment, and an embarrassing result if you're a designer.  I'm hoping that there is some way in the future that the writers of this code will please include whatever math is necessary to compensate for changing browser magnification.

    I realised the problem that i was having...thanks so much. I will explain for the help of others. Avoid putting the anchor in a "Composition" element. This i did inadvertantly since i had many layers. If you put it in one of them the smoothe scrolling will not work. This possibly holds true for grouped objects. I will also post the site to show that i have finally gotten it working. Thanks Zak and all the parties that showed kindness in answering me.
    Best regards
    http://www.raiora.com/index.html

  • 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

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

  • How do I achieve browser width images with scroll motion set to 0?

    How do I achieve browser width images with scroll motion set to 0?
    An example can be seen here with the green image: http://www.qooqee.com/templates/aroma
    I can get the rectangle to stretch the width of the browser but not the image fill. (see - http://www.tomwellsassociates.com)
    My Muse fill settings:
    Fill type: Solid
    Colour: None
    Fitting: Tile vertically
    Position: Bottom Centre
    Scroll motion: On (Up - 0)
    Image Size:
    3311 x 3311 px
    Display: Apple imac 27"
    Any suggestions/help would be much appreicated...

    Please check out: http://forums.adobe.com/message/5701908
    Cheers,
    Vikas

  • Discover New Parallax Scrolling with Adobe Muse CC | Creative Cloud for Design | Adobe TV

    Terry White, Adobe worldwide evangelist, shows how Adobe Muse CC lets you create stunning effects with just a few clicks. Make images and elements move in different directions at different speeds when scrolling — all without writing code.
    http://adobe.ly/12yzGv0

    There has to be a way to create a Re: Discover New Parallax Scrolling with Adobe Muse CC | Creative Cloud for Design | Adobe TV slideshow that fills browser width. It's not a problem for desktop, but it is a problem for laptops/tablets/phones.
    How did the site in the tutorial do it? Terry said it was created in Muse.
    Here is a test site that I've been working on - I would love to make it responsive w/o having to create separate tablet/phone sites:
    http://mandm.businesscatalyst.com
    Any suggestions?

  • What's the point of browser width when elements will still show up outside of it in a browser window?

    I'm working on my first website and I'm so incredibly frustrated with browser width parameters.
    Don't judge it yet, but notice that some of the elements will gladly go outside of the browser width... (such as the rock on the right under "portfolio")
    http://timdodddummytest.businesscatalyst.com/index.html#top
    So I'm struggling with the concept of browser width if things can just go beyond it. How do I hide it behind the browser width so to speak?
    Also, what if I wanted this whole site to just be the width of the screen so it looks great on a full screen 27" or something and not just 960 pixels wide? I do have it set for HiDpi but it still only takes up the center third of a larger monitor...
    Any help would be great! Thanks!

    Regarding the rock on the right, you could add a black frame above the rock to act as a mask.
    Regarding full width, you can have your images "scale to fill" under the fitting options when importing an image in a frame.
    The only problem with that is the image will increase in size based on the browser width, and based on your design I don't think you want your images scaling up to much based on the parallax scroll layering you have happening. This is where testing is involved to see what it would look like scaled up and down. (see attached link)
    Not sure if I would design a site based on a specific screen size, it's a bit safer to go with a smaller width to accommodate multiple screen sizes.
    The link below is a way  to see how your site will be viewed on multiple screen resolutions.
    Screenfly / Test Your Website at Different Screen Resolutions
    Hope this helps... Nice site by the way...

  • Muse 7.0 plus Chrome: browser does not show images full browser width

    Hi there,
    I have a serious problem with the latest Muse version: the images which I use as parallax-masks for the background won't work with Chrome, though Safari and Firefox are not showing any problems. The issue: Chrome does either not scale the images to 100% browser-width or does not show them at all, or even shows the images cut into narrow stripes. This problem did not show in the previous version of Muse.
    Of course I already restarted application and computer. System: Mac OSX Mavericks.
    What to do now? The presentation with the client is very soon and this bug makes me very nervous.
    Best,
    bartl

    The problem bartl encountered and reported was fixed by the 7.1 release (November 21st). The problem you're describing sounds different.
    As of yet, I'm unable to reproduce what you're describing. The URL you've provided views the same in all the browsers I've tried, Chrome (32.0.1700.77) and non-Chrome, Mac and Windows.
    That said, looking at your master page I don't think you've created what you intended. At present there are two full screen slideshows on your A-master. On contains no images and the other contains a single image. Both are set to have thumbnails and the thumbnails container is off the right side of the page.
    If you look at your "Master Slideshow" layer in the Layers panel, you'll see the two slideshows. I think you'll want to delete one of them and, given your design, turn off thumbnails for the remaining one.
    Also, if you don't plan to have multiple images in the full screen slideshow, you'd be better off using a background fill image rather than the slideshow widget.
    I remain a bit puzzled how/why you're seeing different behavior in your instance of Chrome. Have you cleared your browser cache?
    On an unrelated note, if you set the page fill and stroke to none and set the browser fill to the most common color from the garage door image, it will avoid the momentary appearance of a white page on a grey background when your home page first loads. Instead the site visitor would see a blank page that's the most common color from the slideshow image, until that image loads.

  • My Page is flashing with parallax scrolling....

    I am having an issue that my page "flashes" when using parallax scrolling.
    you can find the page here:
    hursey.com/rlf
    it occurs at the bottome section of the page as you scroll down.
    Any thoughts as to the cuase or remedy for this would be much appreciated!
    As a side note I am also trying to resolve another dilemma where in the same section, I am trying to hide the type that comes in from the right for a portion of the page. You will see it come in over the browser area, then under other elements (which I want).  I tried to place a rectangle over that area and tie it to the edge of the browser to have it go "full width" but that is not working.
    Again any thoughts are appreciated!

    Thanks. It would be helpful if you could send us your .muse file so we have a file that reproduces this Safari-specific flash. Could you send the file to [email protected] along with a link to this thread? If the file is larger than 20Mb you can use a service like Adobe SendNow, SendThisFile or WeTransfer. Thanks.
    If you want to obscure the text before it reaches the page, I think you'll need to draw an opaque object on top and set the scroll motion settings for that object so it stays in the position where it needs to be to obscure the text as the text is sliding across.

  • Parallax scrolling too fast outside of Muse preview

    I'm trying to get the hang of parallax scrolling, but how it previews with Muse differs greatly from any actual browser.
    I export the HTML file, it pops open in Chrome and looks great. But if I try to open the HTML file from the folder into Chrome, or preview the site after it's uploaded to the web, suddenly the scrolling is way too fast. Everything disappears with one flick of the mouse scroll wheel. It also happens in Firefox and IE.
    I've tried importing scripts, but again, it effects the Muse preview, but not the actual site in the end.
    Is this a common problem? How should I approach to work around this?
    Thanks!
    I'm using the latest version of Muse. Chrome is up to date. I am on a Windows 7 computer.

    Hi,
    This is an odd issue. Please provide your site URL to test it. You can publish a trial site on Business Catalyst.
    Regards,
    Aish

  • Parallax Scrolling and HiDPI in Adobe MUSE

    Hi all,
    I have a small problem. I've upgraded to the latest version of Adobe Muse and enabled on my latest project the HiDPI feature. I've now found that when I replace the pictures linked to my parallax scrolling effect, the pictures are not the correct size anymore. They shrink in size and start to tile. I even tried to use a super-size the pictures and still nothing. Is this a known issue?? Is there are way around it or is there something I'm missing and need to change.
    Many thanks,
    Thomas

    Hi Zak, There is nothing on the page yet expect a small .svg logo, two 100% width rectangles beneath the browser bottom guide, two anchors and a widget from MuseResource.com for magnetic scrolling between anchors.

  • Why are my images scrolling from outside the Page width?

    Why are my images scrolling from outside the Page width? I am positive i has all the settings correct, to have an image parallax scroll from the edge of the page into the page and out again. But the images are flying in from the browser width - not the page width. This is not the effect I am after.
    Any suggestions on how to fix this? Given the key position is only linked to the height, I can't for the life of me work out how to ensure the images start moving from a certain position onthe left and right of the page.
    Thanks

    I think the effect you are seeing is a result of how the lineHeight is set up. By default, the lineHeight will be calculated as 120% of the size of the largest thing on the line -- in your case, this is the inline graphic. This is designed to leave space between the line before and the line with the graphic. So it is taking the height of the graphic, multiplying by 120%, and making this the distance between the previous line and the line with the graphic. So the bigger the graphic, the bigger the space above the graphic. Normally this works well with text, but in this case you may want to get closer to "set solid". You can do this by setting the lineHeight to 100%. Or you may wish to leave a couple of percent for the descenders of the previous line. Or, another alternative that may work well for you if you really know exactly where you want the line set, you could measure the graphic, add on the number of extra pixels to leave for the descenders, and make the lineHeight a constant. So you could do something like this:
    <img lineHeight="104%" height="411"/>
    or this:
    <img lineHeight="423" height="411"/>
    Obviously you would still need to specify the source and any other parameters you want on the image.
    Note that if you are trying to fit a 200 pixel high graphic into a 200 pixel high container, you will hit the same problem -- in order to fit the graphic, the container will have to be slightly bigger than the graphic in order to fit the descenders on the last line. This is true even if the last line contains only the graphic, and no descenders (or text) at all.
    Hope this helps,
    - robin

  • BROWSER WIDTH SLIDESHOW on ADOBETV OR WHAT???

    So there seems to be much discrepancy over whether or not it's possible to create a full-size slideshow within MUSE. I recently watched Terry White's video on Parallax Scrolling and in the video was yet again another example of a full-screen slideshow:
    http://tv.adobe.com/watch/creative-cloud-for-design/discover-new-parallax-scrolling-with-a dobe-muse-cc/
    (i'm sure we've all seen many examples)
    Unfortunately.. I still can't get it to work.. So please.. somebody, please settle this for me.. Can I create a browser width slide show and if so, how on earth do I do it?

    Actually, there is no full screen slideshow in Terry's video. What is in Terry's video are a number of 100% browser width rectangles that contain background images that are set to "Scale to Fill". These are arranged in panels vertically as you scroll down on his one page site. Because they are within 100% browser width rectangles and set to "Scale to Fill" they will resize when the browser window is resized in width.
    That said, support for full browser window slideshows is a common request. While it is not among the new features in the June release, it is on our "To Do" list.
    Until there is native support in Muse, there are at least a couple approaches I've encountered for achieving, or simulating, a full browser window slideshow in Muse.
    1) Create a slideshow, send it to the back and pin it to the top center of the browser window.
    The hero images in the slideshow will be fixed size, so this is a simulation and a visitor on a Cinema Display will be able to resize the browser window wider than you'll likely want to set the width of the hero images, but this approach can be used effectively for some designs and is easily achieved fully within Muse.
    2) Leverage some degree of coding and manual uploading of files, along with a JavaScript library such as backstretch.
    This thread <http://forums.adobe.com/message/5325056#5325056> contains a customer discussion of how to achieve a full browser window slideshow using backstretch.

Maybe you are looking for