No scroll effects with responsive?

Discussion in 'General Muse' started by Carl, Feb 12, 2016.

  1. deeksha

    deeksha New Member

    1
    0
    i have understood the concept but i need more updates about this
     
  2. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    272
    45
    Hey @deeksha , I wish there were more to say about this topic, however as of now the only way to achieve Scroll Effects in Muse is to create a NonResponsive design, which means the classic 3 layouts (Desktop, Tablet, Mobile). We are all hoping that Adobe will address this and fix it in a future update, however there is no known timeline rite now for that. I hope that helps, if you have anymore questions please feel free to ask!
     
  3. So honestly i cant believe that muse didn't think about scrolling effects on responsive design. Such a simple thing as a background-attachment:fixed; became a true nightmare. Maybe just altering the css file and adding that line to the specified div will get the things done. I haven't tried it yet, but it must work.

    But event though it works, you will have to do this each time you update the site as muse overwrites the previous versions. Or is there a way to keep CCS unaltered ?
     
    Last edited: Feb 8, 2017
  4. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    WD, this post is very old, and as such, so is some of the information.
    It is possible today to use scroll effects in the latest version of Muse, the catch is you need to use them on 'Fixed' Break points.
    You can still have a responsive site, with multiple BP's but the scroll effects are limited to fixed, not fluid.
    Although this may sound limiting, actually it isn't. Most designs today (responsive), are using a combination of fixed and fluid breakpoints in the same site design. Alott of designers are finding they prefer fixed BP's and don't use any fluid BP's.
    Personally, I like a combination of the two.
    Hope this helps
    Dj
     
    WD Community Managers likes this.
  5. I am starting to think using plain css is easier than use muse i swear, but ill give it a try. In my case i need to fix a background and fix a "<div>" element on the bottom of the page. (things that are very easy with only html and css) but i like the way muse helps to structure the projects and some widgets are pretty nice. Can you help me a bit in pining the element on bottom and fix the bg ? i tried to modify the css and it didnt work... god knows why. I also tried switching to fixed widths and export again and it didnt work
     
  6. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    WD, not sure what your running into when trying to 'Pin' something, or 'Fix' a background (as in place a BG image?).
    Sorry to ask more questions, but I would like to help. Give me a better sense of what your trying to do (IE: I want a fixed background image that other things scroll over, or I want to pin a button to a specific location). Maybe a screen shot of a site your attempting to replicate ect.
    Thanks
    Dj
     
  7. Allright, you will clearly understand if you check out. http://wdcommunitymanagers.com from desktop and then from mobile. In the desktop version ( pure CSS, HTML ) you can see how backgrounds have a fixed positions , you can also see how there is a sticky element in the bottom right. On the other hand, if you check the mobile version (made with muse), those elements are not fixed nor attached. Thanks for your help. Hope you can guide me in this. I am using the last muse version.
     
  8. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    WD, those effects are pretty easy in Muse, with or with out a fixed layout.
    Try this..... set up a new page, make it long for affect.
    Go to the top of Muse and open the Browser fill at the top of Muse.
    Then inside there, place your background image (setting it to scale to fill) and set the alignment as you like. Make sure to un check 'Scrolling'.
    Then add a a few rectangles at different places on the page (making them all 'Stretch to Browser width). Make sure to leave some space between them to get the result you want.
    Now, preview in browser and you should see the rectangles scroll but now the background.
    For the sticky item, just place a rectangle (fill it with anything you want or just a color). Place it at the edge of your page anywhere you want it (I'd suggest playing to see where it is always visible to the viewer).
    Select the rectangle and go back to the top of the Muse interface, selecting one of the Dots in the 'Pin' area. Probably the upper right is the easiest for this purpose.
    Now when you preview in Browser, you'll see the background fixed, the rectangles moving at scroll except for the one that sticks to the browser.
    Hope this helps
    Dj
     
  9. Thank you very much ill be on it. let you know how it went. Best regards
     

  10. OK now that i tried what you told me, it seems you cant pin on browser while using the mobile version of the page. it is unavalible, i can do it in the desktop version though, but i need to do it on mobile not desktop.
     
  11. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    WD, when you are saying 'Mobile' version, are you talking about a separate Mobile site, not just a responsive break point?
    Dj
     
  12. Indeed. So i figure out that what i have to do then is to use a fixed layout with multiple break points and dont include mobile nor tablet. end of story right?.
     
  13. Now a new problem appeared, even though everything seems to work fine, the scroll bar on the bottom is displaying in browser for no reason at all.
     
  14. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    WD, the only thing I've found that often does that, is something slightly off the page area.
    Dj
     
  15. Thank you very much for your help. but i had to go back to css and html. Check out the final version of http://wdcommunitymanagers.com from a mobile phone and tell me if that can be achieved with muse. i didnt find a proper way to implement the parallax . Best Regards
     
  16. Rick Huizinga

    Rick Huizinga New Member

    1
    0
    It sounds like this will make one background image for the entire page, where the example site provided (http://wdcommunitymanagers.com/) has two different background images.

    I'm trying to accomplish the same thing with a fluid width page, but as in the example site, want to have a different background image appear between the various rectangles that contain the page content.
     

Share This Page