Parallax

A fairly recent design trend is called Parallax which involves (usually) full width page design with background images that scroll at a different rate than the surrounding text. Weaver Xtreme Plus now has the capability to easily generate beautiful Parallax Pages.

Weaver Xtreme Plus supports the creation of parallax based pages and posts. Click to see our Parallax Demo.

Typically, a Parallax page is made up of several banner-like images that split the page into sections. As the user scrolls down the page, each image will scroll while its associated content scrolls over it. There is an interesting movement or Parallax effect. Sometimes the scrolling parallax image will have headline-type text that overlays it. The associated content is typically on a solid background.

Weaver Xtreme Plus allows you to create each page section from a standard Post. You specify an associated Parallax image for each post. The standard post content serves as the associated content that scrolls under the image. If you want overlay “headlines” (or any content, really), you use the standard Manual Post Excerpt to create that content.

Ideally, each Parallax page group will have an associated unique category. You can the use a standard Weaver Xtreme Page with Posts to show the associated Parallax post set. You can use various “tricks” to set the order of the posts on the page – alphabetical works well because you typically won’t display the post title.

You can also use the Weaver Show Posts to show a Parallax group. If you install Weaver Show Sliders, you can take your organization one step further, and use the Show Sliders custom post type to create your Parallax group easily using the Slider Group feature. But you don’t need these – just normal standard post will work easily.

Creating a Parallax Page

You will create several related Posts to create the content of your Parallax page. Here’s the process for creating one post.

1. The Post – Create a new post – either a standard post or a Weaver Show Sliders post. Give each associated post some way to be grouped. Using a Category in a standard post is the easiest way. You can also use a Slider Group to group your plarallax post set for Weaver Show Sliders custom post types. You also should check the “Make this Post a Parallax post” option in the Per Post option box.
2. The Post Content – Now create whatever content you want for this Parallax section. Whatever you add to the post content will be displayed directly under the associated Parallax image. You will likely want to use the Per Post options to hide the post title and post meta information, and simpy use the post body which you should display as a full post.
3. The Image – Select a suitable parallax image to go with each associated post. This one is really the hardest part, but we assume you will have the creativity to select images for a fantastic parallax page. Typically, you will want your image to be full width, and of enough height to create an interesting scroll effect. Because Weaver Xtreme is repsonsive, no matter what size of image you pick, it will expand to cover the entire width. The height affects how “fast” the image seems to scroll. Images 600 to 1100 px width and about 600px high work quite will, but you will want to try different sizes until you are pleased with the result. It is quite subjective! You will want the image to be compressed so that the load size is on the order of 100K or so. Much bigger, and you site will be slow to load. Much smaller, and the image can be grainy.You specify the parallax image using the Per Post Background image definition on the Weaver Xtreme Plus Per Post options box on the Post edit page. You can specify two different images – one for desktops, and a second, optional image for mobile devices. The mobile image isn’t required, but would ideally be somewhat smaller in size for faster delivery to mobile devices.
   
   
4. The Image View Hieght – You must specify a view height for each of your Parallax images – again in the Per Post option box. This is how much of the image is actually displayed in the screen. Heights of 200 to 400 px tend to look good. Again, your choice. Your image must be taller than the view height! So, mixing 200 or 300 px view heights with 600px high or so images works fairly well. You can mix view heights and image sizes.
5. The Image Content – Some Parallax sites leave the scrolling images with no covering content, while others put summary or “headline” content over the image. This is separate content than that defined by the post content. In order to keep each Parallax section all together, the Manual Excerpt Box is used to create this content. (If you don’t see the Excerpt box, you probably have to open the “Screen Options” tab in the upper right corner, and check the “Excerpt” box.)You can use any HTML you wish in the Excerpt Box. By default, Weaver Xtreme defines suitable CSS styling for such content to display over most images:

   .parallax-content {
   	padding-top:	1.0em;
   	font-size:		130%;
       color:			rgba(255,255,255,0.8);
   	text-shadow: 	3px 3px 8px rgba(150, 150, 150, 0.5);
   }
   .parallax-content h1 {
   	font-size:		180%;
   }
   

   This represents semi-transparent white characters with a shadow to help readability. You can style these yourself in the Per Post style box.

   

   Post Parallax Settings

6. The Image Width – By default, the parallax image will be displayed in the full width of its enclosing area – usually the post. You can retain any margins or padding of the post by checking the “Do not make BG image full width of enclosing area” option.
7. Full Browser Width Layout – The Parallax posts will normally be constrained by the width of their containing HTML areas – the Post at the lowest level. The Parallax effect can look great even on non-full-width themes, but the norm might be considered to haved the Parallax images take up the full width of the browser.One way to get full width Parallax images is to use a full width theme – for example Full Width Dark or Full Width Light, or one you’ve made to be full width on your own.

   In addition, Weaver Xtreme supports new Per Page options that make this easy to do on a per page basis, even if the rest of the theme is not full width. This requires just two simple settings to achieve:

   1. On the Page that will display the Parallax posts (either a Page with Posts, or a standard Page using
      No posts found.
      ), add the class wvrx-fullwidth to the Add Class to area: container and Add Class to area: content options.
   2. Step 2 is more of a do not do: Do not check the “Do not make BG image full width of enclosing area” option on the Per Post option box (although you can check this on some of your Parallax posts to achieve some interesting variety.
      

      Page Parallax Optoins

Parallax Shortcode

[parallax img=’url’ height=400 class=’custom-class’]Slide Overlay Content Text[/parallax]

In addition to the more systematic approach of using posts to create Parallax “slides”, Weaver Xtreme Plus provides the simple Parallax Shortcode requires image link shortcode to define a Parallax slide virtually in any content, including regular pages.