Home Forums Weaver Xtreme Theme Parallax

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #74677
    ROBIN
    Participant

    I read the documentation for creating a Parallax page.  This will be my first try with this concept.  I understand different images as the background and then the content that corresponds to that image, scrolling over it.

    My client wants just one background image with the scrolling boxes going over the top.  This site is the inspiration.  MTN MOD (mtnmoddesign.com)  I think it is just one image and then a lot of content instead of sections.

    If we take that concept one step forward how would I do this:

    What if I wanted one large image then content sections that scroll over the background image just like the inspiration site and then multiple transparent Excerpt Boxes that took turns with different content boxes how would I do that?

    Example:  Box with content, scroll over background picture; then a transparent Excerpt box that says Pools like a header; then content about pools, then a transparent excerpt box that says Hot Tubs; then content about hot tubs.  My question is basically how can I have multiple Excerpt Boxs over the same background image.

    I don’t care if the background image scrolls.

    Let me know if you can’t follow and I will do my best to rephrase.

    Thanks for any help you can provide.

     

     

    #74678
    scrambler
    Moderator

    I see no parallax effect in the page you linked to, just regular content that scrolls so I am not sure I understand what you are after.

    What parallax is, is a content box that is actually a window over a fixed image. As the box moves up it passes over the fixed image, giving the impression the images moves inside the box while the box itself moves up.

    see here an example

    Nicola Trwst Biography

    What you are describing “how can I have multiple Excerpt Box over the same background image”, sounds like you just want a page with a fixed background, and the content scrolling over it.

    If that is it, just set the background, and we can use CSS to make it fixed, so that as you scroll, the background image does not scroll with the content.

    #74679
    ROBIN
    Participant

    Thanks Scrambler

    To take this further.

    I am imagining I put a specific image in the Per Page Style Box” for the background, which I have done for each page that I want this effect on.

    Then do I create Boxes with my content on page or do I create Posts with content?

    I will have all my content created then I will come back to ask how to make it scroll.

    Baby steps!

    Thanks for your help!

    #74680
    scrambler
    Moderator

    Content boxes can be created any way you like, pick the method that is easier for you

    • Using blocks (probably the easiest these days)
    • Using HTML
    • Using Posts
    #74686
    ROBIN
    Participant

    I was able to fix the background using CSS

    Questions I have:

    1.  Is there a better way to have the background show prior to the content or do you think just using return spacing was the best idea.  I might make this area smaller as I get things figured out.
    2. How do I get the White Box with content to go all the way to the edges and not have any background showing below the content box?  Like the inspiration site.

    Right now I am mimicking the content from Mountain Mod Design .  I will change that later, but I wanted to have something to show you.

    The site is  Blue Mountain Pools

    #74688
    scrambler
    Moderator

    1- do you mean get padding above the content?

    If so using css padding is the best way, not return spacing

    2-I don’t see any white box in your site. If you mean how to get a content box to expand all the way to the edge of the browser, there are two approach depending on the rest of the design.

    Have the content area set to full width with no padding or margin, then add padding or margin to content boixes that need left and right space.

    or have normal padding/margin on the content area, but use the method described in section (D) of the guide article below to expand just one content box.

    Full Width Designs – Weaver Xtreme Guide (weavertheme.com)

    #74689
    ROBIN
    Participant

    I am so sorry, the page wasn’t showing correctly.  I had to disable some plugins for it to show what I had saved.  That was weird.  The box should be there now.

    I took the exact same piece of Box html code and pasted it 5 times.  The first three times show the background behind the boxes.  The last 2 don’t.  What this tells me is with enough content I will lose the background showing on the bottom of the page.

    Do you have any idea why the first 3 boxes are showing the background around them? I reduced the size of the background image so it wasn’t so tall, but it didn’t seem to help.

    I have used every option on the container area and I still get the background showing behind the boxes.

    Any help you can give would be greatly appreciated.

     

    #74692
    scrambler
    Moderator

    You have right and left padding on the content area so you see the site BG. Get rid of the content area padding to fix that.

    You also have a small space between the two blocks that comes from a margin on the H1

    If you have set the h1 top margin manually change it to zero

    Or add a rule to set the h1 top margin to zero everywhere or just on that page

     

    #74693
    scrambler
    Moderator

    But I am thinking the easier thing to do may be to set the content background to white, and use a fixed Background on the overall site background instead

    #74694
    ROBIN
    Participant

    I found some default padding that I wasn’t aware of!

    That fixed it!

    I had almost given

    Thanks so much for all your help!

     

     

     

    #74695
    scrambler
    Moderator

    looking good 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.