Eye-catching effects
Features
Parallaxer lets you do a lot more than just enable a moving image on scroll!
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.
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.
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!
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.
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.
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)
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:
Popular
Parallaxer
Parallaxer lets you simply and easily add a beautiful parallax effect to images
Over 60% off!
Stacks bundle
Get ALL of our stacks in one incredible bundle deal!
October Special
STH_Oct23 during checkout!
FAQs
Below are some of the most common questions about this and our other stacks.
Stack FAQs
Sure. Check out this 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.
