Parallaxer Example file

This project file has been put together to demonstrate the options available when using Parallaxer stack by Shaking the Habitual.

---

Full Width / Banner image

The banner image at the top of this page is a full-width image and to do this the Parallaxer stack was just added directly to the page (as opposed to within any container stack). It will fill edge-to-edge if the theme that you are using supports this (as opposed to placing your content within a container).

This image has been resized to 2000px wide and has a file size of 279kb (you wouldn't want to use a file size that is much bigger than this if you can avoid it). In the stack settings the height for this image has been restricted to be at most 100% of the browser window height (using '100vh in the stack settings). So that it fits the full browser window on any device the 'Fill Mode' of 'Cover' has been selected.

Parallaxer - Effect Direction

Most other parallax effect stacks (or plugins etc) only allow for one direction of effect. Parallaxer offers 4 directions:

• DOWN - which is the default and is the most common parallax effect
• UP - this will move the image in the opposite direction to the default
• LEFT - this will move the image from the left (i.e. in a left-to-right direction)
• RIGHT - this will move the image from the right (i.e. in a right-to-left direction)

The 3 images below demonstrate these 3 of the 4 directions. (The banner image above uses the default 'up' direction)

Parallaxer - Adding Content

Parallaxer allows you to add content on top of your image. Depending on the size of your image you will likely only want to use small amounts of content (certainly for displaying on mobile). You can however add absolutely any stack (or stacks) that you like.

Parallaxer has 7 preset areas that you can choose to use:

• TOP-LEFT - this adds content to the top-left corner (the example below adds a logo here)
• TOP-RIGHT - this adds content to the top-right corner (the example below adds some text here - and a slight margin on the top and right to move it away from the edges a little)
• TOP-FULL - this adds content that will be pinned to the top of the container (full-width)
• BOTTOM-LEFT - this adds content to the bottom-left corner (the example below adds a button here - and a slight margin on the bottom and left to move it away from the edges a little)
• BOTTOM-RIGHT - this adds content to the bottom-right corner (the example below adds a photo credit here - on a slightly opaque background with some padding applied so that there is some space around the text)
• BOTTOM-FULL - this adds content that will be pinned to the bottom of the container (full-width)
• CENTRE - this adds content in the very centre of the image (very useful for Headings - such as in the Banner)

Additionally, the first 4 of these have been added into a 4 column stack which has been set to display these in a 2x2 grid (on desktop) and stacked on mobile. Adding the parallaxer stack to any container such as this will limit the width (and therefore height) to that of the container.

NB: You should be careful though to not add too much content as (unlike containers with background images) Parallaxer uses foreground images and therefore these can not overflow in the same way.

Parallaxer - Unleashing!

Parallaxer offers the ability to 'unleash' your image. This setting removes the scale from the image (that is used normally to give the extra image size needed for the movement to happen) and so the image appears as it would normally. Instead the effect scale is used to control how far/fast the image moves across the page. The image below has been placed outside of this container stack and so is free to move across the whole page. NB: The effect has been disabled on a mobile device.

Note about the images

All images have been downloaded from Unsplash and resized and optimised to ensure that the images are small enough in size to work well online (but big enough to fill their space without degradation). The images have all been added to the RW project by dragging-and-dropping but Parallaxer stack offers the option of warehousing too.

---

I have included the credits below (in order of appearance on the page):