image

Pilion 2018

Parallaxer Example file

This project file has been put together to demonstrate the options available when using [Parallaxer stack]


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 theme adds a small margin around everything.

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). Whether it does fill the browswer window depends on the window size and the height / width of the image. If the browser window isn't big enough then it will just display at whatever height the photo is when the width of it is the full width of the browser.

Parallaxer - Effect Direction

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

  • UP - which is the default and is the most common parallax effect
  • 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 directions. (The banner image above uses the default 'up' direction)

image
DIRECTION: UP
image
DIRECTION: RIGHT
image
DIRECTION: LEFT

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 5 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)
  • 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)
  • 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.

image
image
image
image
Mountains
image
Photo by Cezi
image
COME ON!

Parallaxer - Effect Scale

Parallaxer allows you to adjust the scale of the parallax effect from 10 to 50 (I will increase this limit in the next update!).

The smaller the number that you choose the more subtle the effect. Parallax effect works best when it is more subtle but you can play about with this number to see what works best with your images. Using a larger scale works best if the image is bigger than the container otherwise the quality of the image may be reduced.

image
SCALE: 10
image
SCALE: 30
image
SCALE: 50
image
LET'S GO!
  • All images by Cezi © 2018