I love parallax effects, and I adore mouse parallax effects in particular. There’s something about the dreamy, seemingly interactive way the page moves that invokes a sense of complexity and maybe even wonder. So as soon as I got my OutSystems basics down, I started trying to implement Matthew Wagerfield’s and Claudio Guglieri’s parallax.js.
The documentation on GitHub is really clear about its’ use. Either put the (compiled) parallax.min.js file in the project resources (which would mean the Resources folder found in the Data tab in our case), install the library through npm (which is not really available to us), or import the file via the hosted CDN instead. We’ll use the latter because it’s the easiest option.
The parallax effect is imported and ready to use! The GitHub documentation is really clear (and helpful) about how to use it.
The parallax effect needs a container to happen inside of; the GitHub example gives that container an ID called ‘scene’. All child elements of that container that have a ‘data-depth=”x.x”‘ property will become moving elements (however, an element with attribute data-depth=”0.0″ is an unmoving element, too).
The following code can then be used to initiate the parallax effect:
var scene = document.getElementById('scene'); var parallaxInstance = new Parallax(scene);
I called my own Parallax container ‘jsscene’.
"var scene = document.getElementById(""" + jsscene.Id + """); var parallax = new Parallax(scene);"
Now fill up your scene with some items, add some data-depth, write some smart CSS, and there you go! The parallax page of your dreams is here. I’d say it was a breeze!
This example was inspired by Tatsuya Azegami’s CodePen.
Thanks for reading and see you in the next post!