Horizontal scrolling website 100% height and width

Discussion in 'General Muse' started by Perqua, May 17, 2016.

  1. Perqua

    Perqua Member

    14
    1
    Hi guys,

    I'm struggling with a website I'm building for a client. We are trying to achieve something like this:

    http://ao.com/life/kitchen/kitchen-tips/wasteless/

    I have made several landscape backgrounds which need to connect and align perfectly while scrolling horizontal. De landscape background should be covering the entire screen always. So far I haven't gotten further than getting things to scroll, but not align. I tried messing around with circles and squares first, which seemed to work but after putting in the content it just doesn't align the way it needs to.

    I have built a blog based on Vigor theme before (in older muse version) http://perqua.com/blog.html#top

    I tried re-creating this with the landscape but doesn't work out at all. Does anyone have tips or advice how to be able to create a horizontal scrolling website with elements that need to align? Any help is much appreciated!
     
  2. Perqua

    Perqua Member

    14
    1
  3. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,410
    251
    Perqua, in order to move from where you are, to the example is a matter of playing with Parallax Scrolling.
    If you are familiar with setting that up you should be able to recreate the example site in Muse.
    If you aren't then here are a couple of things to start you off.
    You will need to design using a fixed vs. fluid design at this time (in this version of Muse 'Scrolling effects' only work in a fixed design.
    This means if you want other device sizes (ie: tablet and phone) you will need to make alternate versions for those. The way we used to design in the old Muse.
    This link is to one of our older tutorials, and it introduces a bit of scroll motion effects.
    http://www.muse-themes.com/blogs/ne...r-effect-with-motion-scrolling-training-video

    And this one...



    And this is from Adobe on the subject.



    There are many tutorials about this if you google 'Parallax scrolling and Adobe Muse'.
    Hope this helps
    Dj
     
    Last edited: May 17, 2016
  4. Perqua

    Perqua Member

    14
    1
    That's exactly what I did. I made the general pages in fluid design and the scrolling pages in fixed with alternate layouts. I made several websites with both horizontal and vertical parallax effects, but horizontal usually with stand alone graphics (like the parachute in your example), the thing I'm struggling with is how to set up the entire landscape background to scroll horizontally. Like the buildings and clouds in the first example I provided. The landscape is the background that needs to scroll horizontally and stand alone graphics (like clouds, cars, air balloons etc) will be on top of that with different scroll speeds, animations and trigger/target options.
     
  5. Perqua

    Perqua Member

    14
    1
    Ok, so I started testing with basic graphics to see if I could manage to get it to work and it's starting to look like it's going to!

    http://fliertest02.businesscatalyst.com/index.html

    I'm now going to replace some elements with illustrations and see how that looks.
     
  6. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,410
    251
    Perqua, great start
    Dj
     
  7. Perqua

    Perqua Member

    14
    1

Share This Page