image

image

Parallaxer

Parallax effects

Add stunning parallax effects to images in your RapidWeaver / Stacks projects

Eye-catching effects

Simply and easily add subtle (or dramatic) parallax effects, to images on your web pages. With Parallaxer you can control the parallax direction, scale of effect and delay.
Scroll down the page and see the different parallax effects triggered as you go!

Features

Parallaxer lets you do a lot more than just enable a moving image on scroll!

expand-arrows
Effect direction

You can apply the effect in any one of 8 direction - e.g. up, down, left, right and even diagonally!

phone-laptop
Works on mobile

The parallax effect works on all devices

cubes
Add content

You can add stacks content on top of the parallax image

image-polaroid
Image size

Use the default image size or control the height yourself - allowing you to create full width effects whilst limiting the height.

images
Multiple images

Supply a different image for use on smaller and larger devices

A word of warning

This page has a lot more parallax images than would really be recommended. The key with using these is to use sparingly for the greatest effect. Subtlety will give the end user the best experience.

So be warned! There are images moving in all directions below! Seeing them together like this is the best way to showcase the range of options available.

woman-at-lake-image

Examples

You will most often use Parallaxer with images (such as the woman at the lake above) but the examples on this page all use different patterns as these nicely demonstrate the different effects that Parallaxer stack can offer.


Direction of effect

The full-width image above (of the woman at a lake) uses the direction of 'up-left'. For information, the image in this example has also been set to be 70% of the height of the browser window.

The images below demonstrate all 8 available directions. The effect for these has been set to be quite subtle but to see the movement pick a point on the image and see how it moves in relation to a fixed element like the border or the heading.

image
UP
image
DOWN
image
Left
image
Right
image
UP Left
image
UP Right
image
Down left
image
Down right

Addition of content

With Parallaxer you can also add some content over your image. There are 7 zones that you can use to add content to: Centre, Top-Left, Top-Right, Top-Full, Bottom-Left, Bottom-Right and Bottom-Full.

This is especially useful for adding headings or logos but you can add any other stack (or stacks) that you wish!

image
Top left
image
Top right
image
Bottom left
image
Bottom right

Adjusting 'Scale'

You can adjust the scale of the parallax effect. A higher number creates a more dramatic and obvious effect. You'll probably want to generally use a lower number though as the more gentle, subtle effect is often preferred.

image
10
image
20
image
30
image
40

Adding a 'delay'

You can add a delay so that when the user stops scrolling the parallax effect continues fo a little while. This can create a really nice smooth effect that looks really natural.

To make the movement more obvious scroll down and then quickly stop scrolling. You'll see the image on the right continue to move slightly for a short while.

jumping-on-sand
Delay: 0
jumping-on-sand
Delay: 30

Unleashing!

All of the examples so far allow us to view the parallax effect through the 'window' of whatever containing stack we have placed our image in. To achieve the parallax effect the image is scaled behind what you can see and then moves (in whatever direction you have chosen) behind this window and, importantly, filling the window at all times (this is why the image is scaled). All of the examples on this page (so far) do this.

The new unleashed mode does not scale the image at all and instead, the full image moves across the screen (still using the scale factor to determine the size of the effect).

This option will not be appropriate / desirable for every image but it can provide a really interesting effect for certain uses. (NB: The option to cancel this effect on mobile has been selected in the Parallaxer stack)

image
Unleashed

Get Parallaxer

You can get this stack on its own or as part of our hugely discounted stacks bundle.

Our stacks bundle includes Parallaxer and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

  • Grid Enabler
  • Magic Mouse
  • Magic Mouse 2
  • Markdown Link
  • Parallaxer
  • Scroller Plus
  • Source Addons
  • Splider 2


Popular

image

Parallaxer

Parallaxer lets you simply and easily add a beautiful parallax effect to images

Over 60% off!

image

Stacks bundle

Get ALL of our stacks in one incredible bundle deal!

FAQs

Below are some of the most common questions about this and our other stacks.

Stack FAQs

Sure. Check out this additional demo page where we show the parallax effects using more traditional images.


General FAQs

Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.

All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.

We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source