Parallax Documentation

[DaveBricker]

I’ve searched the help files and forums for “parallax.” I found one instance of someone saying they were going through the documentation, but I’m either missing something obvious or this documentation is buried somewhere in an unsearchable place. If you can provide a link, I’d love to start exploring this.

[scrambler]

You need the “Plus” Plugin  for parallax.

Then go to Appearance > + Xtreme Plus > Parallax > Red circle with a question mark in it

If you do not have Plus yet, you can read here

http://demo.weavertheme.com/wp-content/plugins/weaver-xtreme-plus/includes/help/plus-help.html#parallax

You can see an example here

Parallax!

[DaveBricker]

Got it. Thank you.

[DaveBricker]

So I used the shortcode to set up a sample page at http://beyondpointandclick.com/msa/services/

I set the visible height of the parallax images at 175px which is half of their actual (350px) height.

It all works, but my images are scaled way up. How can I make a parallax image within the content area that displays at 100% scale?

Thanks,

Dave

[scrambler]

Parallax areas are designed to be full browser width, so your images are streched to the full width of the browser, but because you are using a non full width design, the part outside the wrapper gets clipped.

Temporarily add the rule below to main options > Fonts & Custom > Custom CSS Rule box to see what happens (it undoes the clipping)

#container, #content, .post-area {overflow:visible;}

So you need to use larger images, large enough to cover a full screen width.

To answer your question: “How can I make a parallax image within the content area that displays at 100% scale?”

The image in the parallax area is done with a background image which size it set to be “Cover”. This is done so that no matter what the size of the browser, the parallax window will always be covered with some of the image.

We can change that to “auto” or “contain”, but then you may end up with some empty space in the parallax window whe scrolling on some device sizes.

You can try it by adding the rule below in main options > Fonts & Custom > Custom CSS Rule box. Make sure to test the behavior on different browser sizes.

.parallax-base {background-size:auto !important;}

But , the parallax effect really looks the best on a full width design 🙂

[DaveBricker]

Thank you for the wonderful, detailed response. That’s excellent support and it’s appreciated. background-size:auto helped, but you’ll see that each box is offset incrementally to a point where the bottom one is completely invisible. Any suggestions? This is almost there.

http://beyondpointandclick.com/msa/services/

[scrambler]

OK, so I spent a little time trying to figure out the dynamic at play with the image sizes.

I believe the important thing here is that your images need to be high enough that they can be scrolled over from top to bottom of the browser.

The problem is that this will vary from browser to browser, on a desktop, the vertical scrolling could be over 1000px, on a laptop it could be half that.

As a result, there is no way to control what part of the image is seen in both the vertical and horizontal direction.

Using Background-size:auto allows you to control which part is viewed horizontally, but then you need to make your images a lot higher vertically, so they can cover the whole scrolling range of the browser, right now they dont and this is why you are progressively missing more an more. But if you shrink your browser vertically, you will notice that the problem goes away.

Once you make your images a lot higher, it will work on taller browsers, but the vertical area of the image that will be seen will be different depending on the size of the browser the site is seen on.

I believe Background-size:cover is a choice that makes sure that there never is any blank space in any direction, but as a result, there is no way to control which part of the image will be seen on any given device.

So you will have to make a choice.

• Either use BS:cover make all your images bigger in both direction, and let whatever portion be visible during scrolling.
• Or use BS:auto if you need control over what horizontal area must be visible, but then make images taller and you wont know which vertical portion is seen on any given devices, and you even run the risk that on some odd browser size, some are ends up not covered by any images.

If the reason you wanted to control which part is visible is because of the text you have in the image, you should use images with no text, and add the text as real text over the image area using the method of the Excerpt box explained in item #5 of the help.

We can then tune the CSS to position it where you want like upper right

[DaveBricker]

Got it. Thanks so much.

[Author]

Posts