image
image

Parallaxer

Parallaxer stack


Parallaxer stack lets you add the stunning parallax effect to any image.

It is very simple to use (unlike many other parallax stacks) and also has a number of other key benefits / advantages:

  1. The parallax is super-lightweight in terms of code
  2. The effect works perfectly on mobile devices (though you disable it on mobile if you wish)
  3. It's great for SEO as the images used in Parallaxer are regular/foreground images meaning that you can add Alt tags to them with descriptions (most other parallax stacks create the parallax effect on background images)

How to use


You simply need to:

  1. Add a Parallaxer stack to the page
  2. Drop in the desired image (This can be either a local image or a warehoused image. You can also opt to add different images for mobile and desktop.)

That's it!

Doing just that will give you a parallax effect with the default settings, like the image below.....

(note: the default is for a very subtle effect - you'll notice the movement most at the bottom of this particular image!)

image

Parallaxer settings


If you want to tweak the default settings then you can do so. For instance you can:

  • State the direction - Select from 8 direction options
  • Change the scale - This adapts how noticable the effect is (tip: more subtle effects are generally better!)
  • Add a delay - You can set up the parallax effect so that it continues to move a little after the user stops scrolling.
  • Add content - You can opt to add some content / other stacks above your image
  • And, if you dare, there is also the option to unleash!!!

Direction

image
Up
image
Down
image
Left
image
Right
image
Up left
image
Up right
image
Down left
image
Down right

Scale

image
10 (default)
image
25
image
40

Delay

image
0 (default)
image
15
image
30

Tip: You will notice this most if you scroll quickly and then stop suddenly!

Unleash!

image

Add content

image
image

You can add content in 1 of 7 different positions.

The header section at the very top of this page has content (a logo and a header) added to the centre. This Parallaxer stack has had a logo added to the top-left.

You should not add too much content as the image will not expand where there is too much content added.

A demo of the Parallaxer stack from Shaking the Habitual.

Demo project built using Source - the FREE 'micro' framework for RapidWeaver.


All images from Pexels