Image

Inverter Stack

A horizontal parallax stack for RapidWeaver

Inverter Stack

Inverter is a RapidWeaver stack that lets you present your web page content horizontally as opposed to the traditional vertical format. It provides a novel and interesting effect that is sure to be appealing to your visitors. It also includes options to add a parallax effect.

Inverter Features

Normally when a user scrolls down a web page they are taken from the top to the bottom. Not so with Inverter stack. The same scroll action instead moves the user from the left of the screen to the right. This provides a really interesting effect that lends itself well to uses such as stories, timelines, tutorials, step-by-step guides and so much more. Absolutely any other content stack can be added to Inverter stack meaning that your options for how you use this stack are endless.

Visual interest

Break away from traditionally presented content to offer an alternative and memorable experience for your visitors

Scroll effect

The user's scroll action generally takes them from the top of a web page to the bottom. With Inverter stack, the same scroll action takes them from left to right!

Parallax effect

You can (optionally) add images to 2 distinct layers behind your content. As the user scrolls this provides a beautiful horizontal parallax effect.

Extensive options

You can add any content to each Inverter Block. You can state exactly where each should appear on screen.

Inverter Examples

The horizontal scrolling effect works well on all device types. Each of these examples have been built with a 'mobile first' mentality which meant that each Inverter block was limited to around 375px. This means that a full content block can fit on most mobile screens.

To also help optimise these for mobile, certain stacks are omitted at the mobile breakpoint. This is required because if any content block is too tall then the bottom of it will be clipped. As such, to see the full content of these examples, please view on a tablet or desktop device. But do also check out how well they work on mobile!!

Example 1
Timeline

This example demonstrates:

  • Creating a timeline effect
  • Positioning content
  • Embedding a slider
  • Embedding a button
Image
Example 2
Full height image

This example demonstrates:

  • Using a full height image / photo background
  • Adding images to the front / content layer to add a 3rd level image parallax effect
  • Embedding a video
  • Embedding a quiz (using Quzzer stack)
Image
Example 3
Additional content

This example demonstrates:

  • Using content outside of the Inverter stack to create an interesting opening effect
  • Using warehoused SVG images
  • Embedding columns
  • Embedding a slider
Image
Example 4
Storytelling

This example demonstrates:

  • Using one image pinned to the top and another pinned to the bottom
  • Positioning elements
  • Using the background and border controls
  • Embedding an accordian
  • Embedding tabs
Image
Example 5
Wide Image

This example demonstrates:

  • Using a very wide image (10000px!)
  • Using a footer
  • Using a page background instead of a parallax effect
Image
Buy now

Buy this stack for

Inverter Stack Settings

Image
Warehoused images?

If you wish to link to remote images as opposed to using local images then check this box. You will then be able to set a url link to your images.

Rear image

To create a parallax effect, 2 images can be used in Inverter stack. The 'rear' image is the one that is displayed furthest back in layers to give the impression that the image is nearer the horizon.

Note: You should use wide images for this. A recommended size is 3000px x 800px.

If you want an image to cover the whole height of the screen then you would maybe want an image of 3000px x 1200px.

Near image

The 'near' image is the one that is displayed closer to the front (i.e. nearer you than the horizon).

Note: You should use an even wider image for this. A recommended size is 4500px x 600px.

You should also ensure that the near image has transparent sections so that the rear image can be seen behind.

Pin to bottom?

The default is that both images are pinned to the bottom of the screen. If either of the images that you are using would look better being pinned to the top of the screen then you can uncheck this box.

Image widths

The image widths allow you to manually set how wide you want them to appear (regardless of what size they actually are). The values that you choose will affect how they appear when scrolling. The default values will likely be fine but feel free to experiment for different effects.

Note: For the parallax effect to work as it should then the rear image should be less wide than the near image. This is what gives a natural looking differences in speed when scrolling.

Note too that the content section should be wider than both of these images.

Scroll width

This determines what width the content (front layer) should be. This value is how far to the right that the user will be able to scroll.

Note: This value should be greater than the image widths. It should also be greater than the end point of your furthest content block.

Scroll speed

The width of your content will affect how fast / slow the scroll action appears. If it seems to fast or slow then you can adjust it using this slider.

Note: The lower the number the faster the speed (and vice versa).

Blocks offset

This setting allows you to determine how far from the top of the screen you want the top of your content blocks to be.

Note: You will want to keep this value reasonably small as any content that does not fit on the page will be clipped from the bottom. You therefore do not want to 'waste' too much space at the top.

Inverter Block Stack Settings

Image
Start point

This lets you state how far from the left this content block should begin. I.e. the user will have to scroll (horizontally) this amount before they see this block.

Width

You need to set a fixed width for each block as an Inverter web page will not function as a responsive web page typically would.

Note: You should use block widths that will display ok to people using mobile devices as well as those using desktops.

You should also not add to much content to any single block as blocks that have too much content will be clipped at the bottom of the page.

You might find it useful to hide non-critical stacks that you add on mobile devices. This would let you add more content for display on a desktop/tablet.

Colours

You can select a colour for the Inverter Block background and also for a border.

Border

You can determine what width the border should be.

Note: If you don't want a border then simply slide this control to 0.

Padding

You can apply padding so that all of the stacks that you place within the content block are nicely spaced away from the stack border.

Inverter Notes

Use only the Inverter stack on the page!

The Inverter stack should really be the only content stack on the page (exceptions below) as this stack provides the functionality to allow all of the content that is added to it to be displayed horizontally across the screen.

Exceptions

A notable exception to this would be the addition of a fixed navigation bar as this will not be affected by the horizontal scrolling. You'll see a fixed navigation bar used in all of the examples.

Adding content outside of the Inverter stack can be done but when you start scrolling it will scroll as normal whereas everything in the Inverter stack will scroll horizontally. You can achieve some quite nice results with this if you don't add too much content and start your Inverter blocks further to the right. You'll see a couple of examples of this approach in the example projects.


Positioning your blocks

You need to manually set the start point for each content block that you add. To help you with this you can easily see the start and end points of each block already added. You can use these numbers to guide where you should make the starting point of each new block.

Adding content

Do not add too much content to any Inverter block. Whatever does not fit (height-wise) onto the screen will be clipped from the bottom. This will obviously be most likely on a mobile device. Depending on the nature of your content it might be beneficial to hide some of the stacks that you add for people using mobile devices (you'd generally achieve this by simply using the regular 'hide this stack' setting for each stack).

Tutorial

Note: This particular example of Inverter stack has not been designed for mobile. Please view on a tablet or desktop device.

Inverter stack is based upon the jInvertScroll jQuery plugin

© Shaking the Habitual Contact Us
Let us know if you agree to cookies

We use cookies to give you the best online experience. Please let us know if you agree to the use of all of these cookies. You can read more about the cookies we use, and all other aspects of data use and privacy in our Privacy Policy.