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.
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.
Break away from traditionally presented content to offer an alternative and memorable experience for your visitors
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!
You can (optionally) add images to 2 distinct layers behind your content. As the user scrolls this provides a beautiful horizontal parallax effect.
You can add any content to each Inverter Block. You can state exactly where each should appear on screen.
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!!
This example demonstrates:
This example demonstrates:
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
You can select a colour for the Inverter Block background and also for a 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.
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.
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.
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.
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.
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).
Inverter stack is based upon the jInvertScroll jQuery plugin