Give your site the impression of depth with a parallax effect controlled by mouse movements.
Parallax scrolling is no longer the guaranteed attention-grabber it used to be, but there are other ways of using parallax techniques to engage your visitors and enhance your user experience.
Take a look at Mr Fisk's site, designed by BMO, and you'll notice a different sort of parallax going on: its brightly-coloured main image moves in 3D, in response to your mouse movements.
It's an impressive effect that's not too hard to implement; simply follow these steps to give your site an eye-catching sense of depth.
Create your own eye-catching site with the perfect web hosting service and website builder tool. And, along the way, save your design files in the best cloud storage.
01. Initiate HTML
The first step is to define the HTML document, which consists of the HTML container for storing the head and body sections. While the head section is primarily responsible for loading the external CSS and JavaScript resources, the body section will store the content elements to be created in step 02.
The technique will allow any content container using the data-parallax attribute to display the effect. Each first level child element will display with the parallax presentation. This example sets three child layers for the parallax, but you can add more if you want to. You can also add content to these layers such as text or images; PNG or SVG with transparency will work best.
Create a new file called 'styles.css'. The first set of rules in this file sets the default size of the parallax container and its position mode. It's important to use relative positioning so that the child elements can be placed in relation to wherever the container is located. The width and height are set to cover the full screen to allow for maximum interactivity.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
Each of the first level elements inside the data-parallax container are sized and positioned to appear centrally. Along with parents relative positioning, percentage is used as the measurement unit, allowing the sizing and positioning to be placed in relation to the parallax container. For this example, a transparent red background is used to demonstrate the effect – you can replace this with PNG or SVG image of your choice using @background: url ("your image here").
Create a new file called 'code.js'. JavaScript will be used to control responses to the user's mouse interactions. We don't want the JavaScript to run any of the JavaScript code until the page has fully loaded, hence the code for steps 06 and 07 placing a function triggered by the load event, which activates when the window has completed loading.
window.addEventListener("load", function(){
*** STEP 6 HERE
});
06. Node search
The first activity of JavaScript to execute immediately after the page is ready is to find all of the parallax layers. Firstly, the parallax containers are found, followed by their children. Each child has an index number applied to them under the 'data-index' attribute.
ar nodes = document.querySelectorAll("[data-parallax]");
for(var i=0; i<nodes.length; i++){
var children = nodes[i].children;
for(var n=0; n<children.length; n++){
children[n].setAttribute("data-index", n+2);
}
*** STEP 7 HERE
}
07. Parallax listeners
The final step is to apply an event listener for any mouse movement occurring over the parallax container. Any such actions trigger a feature to calculate the new positions of the parallax layers based on the mouse position and the data-index attribute defined in step 06 – resulting in each layer updating at different paces. The result of each calculation is applied to the layers via the style attribute.
nodes[i].addEventListener("mousemove", function(e){
var elms = this.children;
for(var c=0; c<elms.length; c++){
var divisor = parseInt(elms[c].getAttribute("data-index"));
var startX = this.offsetWidth/4;
var startY = this.offsetHeight/8;
elms[c].style.left = startX-(((e.screenX/divisor)-e.clientX)/3)+"px";
elms[c].style.top = startY-(((e.screenY/divisor)-e.clientY)/3)+"px";
}
});
Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners.
