Create a mouse-controlled parallax background effect

[Rss Bot 1]

Sites with parallax scrolling continue to be popular for a reason: they create a pleasant and engaging browsing experience for the user. We've already looked at the best stunning parallax scrolling websites to inspire you, but what do you do if you want to make one of your own?

Luckily, French creative developer Renaud Rohlinger is here to show you the ropes for how to create a parallax scrolling background that you can control with your mouse. Check out the amazing results on his site, and then learn from Rohlinger himself below on how you can replicate the effect in your next project.

01. Define the HTML document framework

Opening to a monochrome splash screen, the site immediately juxtaposes animated 3D backgrounds with Japanese typography

The first step is to define the framework of the HTML document. This consists of the HTML container that describes the document as having sections for head and body. While the head section links the external JavaScript and CSS files, the body section is used to define the page content elements in step 2.

02. Identify the HTML content

The body content consists of display text and a div container using the data-parallax attribute. It is this container element that will be used for the parallax background, with each of its child elements to be styled with the required background images. In this example, the container has three image layers to be created from the child div elements.

03. Create a CSS parallax container

Scrolling down, things get more colourful, with encouragement to follow the cat character, and click your way through to the main portfolio

Create a new file called styles.css. The first step in this file sets the default content colour to be white, and the settings for the parallax background container. Fixed positioning is applied to the parallax container to allow it remain in the same position as content scrolls over it. A default colour is applied as the page colour, while a negative z-index allows the container to appear under the page content.

04. Set up CSS parallax layers

Each of the image layers is set to use absolute positioning with a size to match the browser window. The parallax image in this example will be be based on a specific sized pattern that is set to repeat. You may choose to only repeat the image vertically using repeat-y, or horizontally using repeat-x.

05. Use CSS background layers

Keen to find development work from the site’s publicity, Renaud wastes no chance to showcase his WebGL prowess

While each of the image layers share the position and size settings defined in step 4, each layer uses a unique image. The nth-child selector is used to reference each individual element within the parallax container. The background-image attribute is used to draw two lines which creates a grid effect when tiled. Lower layers use darker colours to help provide a perception of depth.

06. Perform JavaScript layer initiation

Create a new file called code.js. This step finds the parallax container and initiates each of its image layers with the data-index attribute that will be used in step 7. This must be performed from a function attached to the browser window’s load event, so that the code is only executed when the page’s body content is ready.

07. Calculate JavaScript mouse movement

The effect relies on moving the images associated with each parallax layer in response to mouse movement. The parallax container identified in step 6 has a mousemove event listener attached, which triggers a function to reposition background images of the parallax layers whenever there is mouse movement. Each layer has a motion calculation based on the index number applied in step 6.

This article was originally published in creative web design magazine Web Designer. Buy issue 290 now.

Related articles:

• 10 best CSS frameworks in 2019
• How to add animation to SVG with CSS
• 52 web design tools to help you work smarter in 2019

View the full article