Parallaxer allows you to simply and easily add a subtle (or dramatic) parallax effect to images on your web pages. It is really eye-catching and brings a lot of visual interest to your pages.
A parallax effect is achieved when some content (such as an image) scrolls at a different speed than the other content on the page. This creates really interesting effects and (used sparingly) can really add a lot of life to a web page.
Unlike many other parallax stacks, Parallaxer gives you control over the direction of the parallax effect as well as the scale of the effect. In addition you can also easily add content above the image in one of 5 areas.
Parallaxer is mobile friendly! Your parallax effects will look just as stunning on a mobile device as on a desktop.
As the user scrolls any Parallaxer image appears to move slightly creating a beautiful parallax effect.
Parallaxer adds the images as regular content and not as a background image. This allows you to add an Alt Tag for each image to help with accessibility and SEO
You can (optionally) add content on top of your image. This is great for headings or logos but you can add anything.
You can control the direction and scale of the parallax effect.
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.
The above example uses the default direction of 'up'. This moves the image up as you scroll down the page. (It has also been set to be 70% of the height of the browser window.)
The images below show left and right. These move the image from the selected direction. This option can be especially useful if there is content in the photo that suggests a movement.
With Parallaxer you can also add some content over your image. There are 5 zones that you can use to add content to: Centre, Top-Left, Top-Right, Bottom-Left and Bottom-Right.
This is especially useful for adding headings or logos but you can add any other stack (or stacks) that you wish!
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.
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.
If you wish to link to remote images as opposed to using local images then check this box. You will then be able to set a url link to your images.
If you are using a local image then drag-and-drop it into the image well. If you are using a warehoused image then add in the link to the image file.
Note: You should use appropriate image sizes for where your images are being placed. For example if you are using a full-width Parallaxer then you would want to use the same kind of size of image that you would use in a Banner etc.
Use this field to enter an Alt Tag for your image.
Note: This is a key advantage that Parallaxer has over other parallax solutions as most (possibly all) of them use background images which are 'decorative' elements and not classed as content.
By default, the fill mode is set to 'Contain'. This means that the full image will be displayed inside whatever container it is placed in. (If a max-height for the container is set then this will over-ride the height of the image)
The other fill mode option is 'Cover'. This option will fill the space though the image will be cropped (on certain devices / screen sizes) to do so. Using 'Cover' is perfect for things like hero banners where you might want the image to fill (for example) 100% of the browser window.
Note: Selecting 'Cover' as the fill mode opens up some additional 'advanced' options. These allow you to override the default sizings and positioning so that the image appears as you want it to. The default options make the image the full size of the browser window (how much of that you can see will still depend on whether the height of the container has been restricted.
If you are limiting the height of the container to (for example) 50vh (which is half the height of the browser window) then you might also want to limit the size of the image to 50vh otherwise only the top 50% of the image will be seen.
By default, the full image will display and so the height will depend on the width of the container. If you wish to limit the height then check this box.
You can state a max-height that you want the image to appear at. This will crop the picture if the height is greater than the maximum height set.
Note: You can use whatever height/length units you wish. This could be pixels (e.g. 500px) or maybe 50% of the browser window height (e.g. 50vh).
You can adjust how great the parallax effect is by controlling the 'scale'
Note: A lower value produces a more subtle effect. Larger values create more obvious movement.
You can set which direction you want the parallax effect to go in. This can be either up (default), left or right.
Note: Using left and right work especially well with images that portray movement.
You can simply use the image on its own but if you want to add some content over the image then check this box. This will provide a drop-zone where you can add any stack(s) that you wish.
This setting allows you to determine exactly where on the image the content will appear. This can be any one of 5 zones: Centre (default), top-left, top-right, bottom-left or bottom-right.
Note: You will probably want to keep the extent on the content to a minimum.
You can download an example project that uses Parallaxer stack. It has been created using Joe Workman's Blank Theme and demonstrates the various settings that are available with this stack.
You can view a published version of this project file here. Note: This version uses Foundry as the theme but the project file is identical otherwise.