In this article, we will develop a fun parallax effect using CSS custom properties for the movie, The Hobbit. At the end of this article, you should be able to create this parallax effect like below:

Here is the complete code you can check on CodePen.

Without further ado, let’s begin with a basic understanding of what the parallax effect means.

What is the Parallax Effect?

The parallax effect is a visual phenomenon that occurs when objects at different distances move at varying speeds across the observer’s field of vision. This effect creates an illusion of depth and motion in a two-dimensional space, making it a popular technique in web design to add a dynamic, engaging layer to a webpage.

How It Works in Frontend

In the context of frontend, the parallax effect is achieved by moving the background at a different speed or direction compared to the foreground content as the user scrolls or moves mouse. This differential movement simulates a 3D effect, adding a sense of immersion and interactivity to the user experience.

Applications in UX

There are some benefits the parallax effect can bring to the user experience such as:

Enhancing User Engagement: By incorporating depth and motion, the parallax effect captivates users, encouraging them to spend more time exploring the content.
Storytelling: Parallax effect can be effectively used to create a narrative journey, guiding users through different sections of a site in a visually appealing manner.
Visual Appeal: It adds an aesthetic quality to a website, making ordinary pages look more sophisticated and visually interesting.

Considerations for Use

While the parallax effect can enhance the user experience, it’s important to use it judiciously. Overuse can lead to distractions, longer loading times, and potentially a negative impact on SEO if not implemented correctly. It’s also crucial to ensure that it doesn’t hinder the accessibility and navigability of the website.

Having grasped the concept of the parallax effect and its advantages for web pages, it’s often said that a picture is worth a thousand words. So, let’s take a look at some examples next.

Parallax Examples

Now let’s take a look at the overview of how the parallax effect for today’s demo is structured.

Skeleton Code

This article primarily concentrates on developing the parallax effect for background images. Therefore, other aspects of frontend development won’t be covered in this article. To facilitate your quick understanding of the parallax effect, I’ve created the skeleton code here so that you can quickly start writing the parallax effect:

Before we dive into the parallax section, let’s begin with preparing the HTML structure and understand how it is structured.

Prep HTML Structure

Overall this webpage is structured using a <main> element. Inside <main>, there’s a <header> containing the website’s logo and login link, followed by a <section> for the main content.

For incorporating a parallax feature, we will add relevant HTML beneath the <section>.

However, placing the parallax structure here means the parallax image layers will be positioned below the main content, preventing its use as a hero image at the top of the page. To effectively implement this parallax feature, we need to prepare few steps.

1. Absolute Positioning

The header will be positioned absolute at the top of the page. The section will also be positioned absolute but pushed down to 80vh from the top, allowing visibility of the main content’s top portion such as a movie title.

2. Z-Index Adjustment

Due to the stacking context, the parallax images might overlay the header and section. We’ll resolve this by adjusting the z-index values of these elements. For that, we need to add the z-index to both <header> and <section>.

For the entire styling of <header> and <section> elements, there are more sophisticated CSS involved and as we mentioned in the earlier section, we will more focus on the parallax section and these adjustments above are especially essential for the parallax effect.

Let’s now dive into the HTML setup for the parallax feature.

HTML Structure & CSS Styling

Here is the complete HTML code for the parallax effect.

Here is the graph showing the layers for each div element:

And below is the 3 parallax layers of the .c-parallax-item:

Let’s take a look each element and their role. Also along the way, we will add styling for each element.

.c-parallax__wrapper

The .c-parallax__wrapper serves as the container for the parallax image. Its primary function is to manage the visibility of the parallax image, especially when the image’s dimensions exceed the boundaries of the viewport.

In instances where the parallax image is larger than the available screen space, there’s a potential for unwanted horizontal or vertical scrolling. This can disrupt the visual flow and user experience. To address this issue, the .c-parallax__wrapper has overflow: hidden.

.c-parallax__wrapper {
  overflow: hidden;
}

By setting overflow: hidden, any part of the parallax image that extends beyond the viewport’s limits is effectively clipped and kept out of sight. This ensures that the parallax effect remains visually appealing and seamless, without causing any overflow that could lead to scrollbars appearing in the user interface.

.c-parallax

For our parallax effect, there are multiple things we need to consider. Let’s take a look each of them.

First, we will establish a full-screen hero area for the parallax effect. This is achieved by setting the .c-parallax to occupy the entire viewport, with dimensions of 100vh for height and 100vw for width. As we discussed above, we added 80vh with the absolute position to the <section> element, so the top portion of the <section> element will still be visible even if we set 100vh to the .c-parallax.

.c-parallax__wrapper {
  overflow: hidden;
}

.c-parallax {
  background-color: purple;
  height: 100vh;
  width: 100vw;
}

Now upon closer inspection, you’ll notice an abrupt end to the background at the bottom of the .c-parallax element. This creates an undesirable and harsh line.

To enhance the aesthetic, we introduce a linear-gradient using the ::before pseudo-element, a widely utilised CSS Selector. For those keen on mastering CSS selectors, including ::before, I highly recommend exploring CSS Selectors.

To add the ::before pseudo element, we will make a use of the CSS nesting.

.c-parallax__wrapper {
  overflow: hidden;
}

.c-parallax {
  background-color: purple;
  height: 100vh;
  width: 100vw;

  &::before {
    background: linear-gradient(
      360deg,
      rgba(8, 8, 8, 1) 8%,
      rgba(9, 9, 121, 0) 50%
    );
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
}

Now the gradient has been applied, however the <section> is obscured by the gradient. Let’s fix it.

To resolve this, we will utilise transform: scale(1.1). This will also scale the .c-parallax up a bit which is optional. If you prefer to keep the same scale, you can go with transform: scale(1) which will still resolve the issue.

.c-parallax__wrapper {
  overflow: hidden;
}

.c-parallax {
  background-color: purple;
  height: 100vh;
  transform: scale(1.1);
  width: 100vw;

  &::before {
    background: linear-gradient(
      360deg,
      rgba(8, 8, 8, 1) 8%,
      rgba(9, 9, 121, 0) 50%
    );
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
}

With this addition, the <section> element is now correctly positioned above the .c-parallax.

So why this helps? The behaviour we’re encountering relates to how CSS handles stacking contexts and the transform property. Understanding the stacking context in CSS is crucial, and I am going to publish an in-depth article about the stacking context in the future, but let’s briefly touch on what a stacking context is and how it works.

Stacking Contexts

A stacking context is a CSS concept that determines the order in which elements are rendered on the page. It’s a three-dimensional conceptualisation of HTML elements along the Z-axis (depth), as opposed to the X and Y axes (width and height). Various CSS properties can create a new stacking context, such as:

Setting opacity to any value less than 1.
Applying transform, filter, or perspective properties other than none.
Using z-index on elements other than static (e.g., relative, absolute, fixed, sticky).
And more, depending on the browser’s rendering rules.

For our example, let’s analyse the creation of stacking contexts and the painting order.

<header>

With position: absolute and z-index: 10, this element creates a new stacking context because it is absolute positioned and has a z-index value (3rd point from the list). It’s above other elements due to its higher z-index.

<section> and .c-parallax::before

In our scenario, the .c-parallax::before pseudo-element is a child of .c-parallax, and it’s essential to understand that pseudo-elements follow the stacking order of their parent elements. The z-index value applied to a child, including pseudo-elements like ::before, is significant within the stacking context of its parent. Since .c-parallax itself does not have a defined z-index, it does not establish its own stacking context but is part of its parent’s stacking context. However, .c-parallax and its pseudo-element .c-parallax::before are contained within .c-parallax__wrapper, which, without a z-index or positioning that creates a new stacking context, means they participate in the stacking context of the next positioned ancestor, in this case, <main>.

The <main> element, being positioned with position: relative but without a z-index, does not create a new stacking context. Rather, it provides a relative positioning reference for its child elements. Consequently, all elements within <main>, including .c-parallax::before and <section>, share the same stacking context established by <main>. The stacking order among these elements is then determined by their z-index values and their order in the HTML document.

Both .c-parallax::before and <section> are positioned elements with z-index values of 1, placing them at the same level within the <main> stacking context. The actual visual stacking order, then, is influenced by their document order. Since .c-parallax, and therefore its ::before pseudo-element, appears after <section> in the HTML, .c-parallax::before is rendered above <section>. This ordering is a direct result of how CSS respects document flow and z-index values within a shared stacking context when determining the visual layout.

Solution

1. Higher z-index to section

Given our understanding of how stacking contexts and z-index values influence the visual layering of elements, one effective solution to ensure the <section> appears above the .c-parallax::before pseudo-element involves manipulating the z-index values.

To address the issue, we can assign a higher z-index value to the <section> than that of the .c-parallax::before pseudo-element. Since both elements are within the same stacking context established by their common ancestor <main>, their stacking order relative to each other is influenced by their z-index values and their order in the HTML markup. By default, .c-parallax::before, as a pseudo-element of .c-parallax, which comes after <section> in the HTML document, would render above <section> due to its position in the document flow.

However, by explicitly setting a higher z-index value to <section>, we can override this default stacking behaviour. This change elevates <section> above .c-parallax::before in the stacking order, ensuring that <section> visually appears on top. For example, if .c-parallax::before has a z-index of 1, setting <section>‘s z-index to a value greater than 1 will achieve the desired effect:

.o-section {
  ...
  z-index: 2;
}

2. transform

Another solution is as we saw above, applying a CSS transform, such as transform: scale(1.1), to an element like .c-parallax not only visually alters the element but also has a significant impact on its stacking context. This is a critical aspect of the transform property: besides modifying the appearance of elements, it implicitly creates a new stacking context for the transformed element and its descendant elements.

When .c-parallax is given a transform property, it establishes a new stacking context that is independent of its surrounding elements, including the <section>. This means that the .c-parallax and its children, including pseudo-elements like ::before, are rendered within this new stacking context. This action effectively isolates .c-parallax and its contents, including the .c-parallax::before pseudo-element, from the previous stacking context they shared with <section>. As a result, the stacking order of .c-parallax::before and other elements inside .c-parallax is calculated separately from the stacking context of elements outside .c-parallax, such as the <section>.

With .c-parallax now establishing its own stacking context, the .c-parallax::before pseudo-element’s gradient is rendered within this new context. This means the gradient’s rendering is confined to the stacking order determined by the new context of .c-parallax, making it independent of the stacking context where <section> exists.

Consequently, .c-parallax and its children, including the ::before pseudo-element, are treated as a single composite unit in terms of stacking order when compared to elements outside this new context, like <section>. This means any rendering and overlay behaviour involving .c-parallax::before is contained within .c-parallax and does not directly impact how <section> is stacked or rendered, offering a strategic way to manage layering and visibility among complex web page elements.

.c-parallax__inner

Before adding the parallax layers, let’s add one more container which is .c-parallax__inner to cover the entire hero section:

.c-parallax__inner {
  background-color: yellow;
  height: 100%;
  width: 100%;
}

.c-parallax__inner is taking up the entire parallax section.

Now let’s remove the yellow background colour and add transform-style: preserve-3d. This addition is important for setting up our 3D parallax environment:

.c-parallax__inner {
  height: 100%;
  transform-style: preserve-3d;
  width: 100%;
}

In the following section, we’ll introduce three distinct layers that will hold the images for our parallax effect. An important aspect for these layers to effectively generate the parallax effect is the use of the transform-style: preserve-3d property.

The transform-style property determines if an element’s child components are positioned in a 3D space or flattened onto the plane of the element. By using preserve-3d in conjunction with translateZ values for child elements, we enable these components to occupy a 3D space. Without preserve-3d, these child elements would simply lie flat on the same plane as their parent element.

Later we will use the rotate3d value with the custom properties but for now let’s continue adding 3 parallax layers.

3 parallax elements

Our design will feature three specific elements to form the parallax layers:

Background Layer

Title Layer

Front Layer

A quick tip for creating these three parallax layers: I used the Magic Wand tool in Photoshop. There’s a lot of helpful tutorials available online and YouTube but if you have any questions, please feel free to contact me.

Now for these elements, we will apply both shared styles and unique styles specific to each. Let’s begin by addressing the shared styling elements.

.c-hero__item

Each of the three images is designed to fully occupy the .c-hero__inner area. To achieve this, the following shared CSS properties will be applied to ensure they cover the entire designated space:

.c-parallax__item {
  background-position: center;
  background-size: cover;
  height: 100%;
  position: absolute;
  width: 100%;
}

Next, we will individualise each image with distinct backgrounds and varying translateZ values to create depth:

.c-parallax__bg {
  background-image: url(hobbit-bg.jpg);
  transform: translateZ(3.125rem);
}

.c-parallax__front {
  background-image: url(hobbit-title.png);
  transform: translateZ(50rem);
}

.c-parallax__title {
  background-image: url(hobbit-front.png);
  transform: translateZ(12.5rem);
}

The translateZ() function is crucial here, as it repositions each element along the z-axis in a 3D space, an essential aspect of creating the parallax effect along with transform-style: preserve-3d in .c-parallax__inner as discussed above.

With these styles, our parallax images are now ready.

Next, we will implement custom CSS properties to enable these images to react to mouse movements, thus completing the interactive parallax effect.

Parallax Effect with custom properties

To create the interactive parallax effect, we’ll leverage CSS custom properties and the rotate3d function within the .c-parallax__inner container, as briefly touched upon earlier.

Let’s first look at what rotate3d is and how it works.

rotate3d()

The rotate3d() allows us to define rotations in a 3D space, offering three degrees of freedom that identifies a single axis for rotation. This axis is represented by an [x, y, z] vector originating at the point of rotation.

The syntax for rotate3d() involves three <number> values and one <angle> value. The <number> values specify the x, y, and z coordinates for the rotation axis, while the <angle> determines the rotation degree. A positive angle results in a clockwise rotation, whereas a negative angle causes a counter-clockwise rotation.

rotate3d(x, y, z, a)

Let’s take a look at our parallax example by comparing how the 3 parallax layers would look depending on the different values for rotate3d().

Let’s add rotate3d(0, 0, 0, 0deg) and as you can guess, it won’t change any visual output.

.c-parallax__inner {
  height: 100%;
  transform: rotate3d(0, 0, 0, 0deg);
  transform-style: preserve-3d;
  width: 100%;
}

I have drawn purple lines to show the effect of the different rotate3d values.

Now let’s update the values to rotate3d(0, 1, 0, 30deg).

.c-parallax__inner {
  height: 100%;
  transform: rotate3d(0, 1, 0, 30deg);
  transform-style: preserve-3d;
  width: 100%;
}

Upon adjusting rotate3d to rotate3d(0, 1, 0, 30deg), the container (and its three layered images) will rotate around the y-axis by 30 degrees. This creates a noticeable shift as the screenshot below.

Now many developers get confused with this outcome. Probably you might think that the effect will manifest as a vertical movement or that it directly affects the Y-axis values because the Y-axis is specified in the transformation, rotate3d(0, 1, 0, 30deg). However, the actual outcome is that the element appears to rotate sideways, creating an effect that seems to impact the X-axis values more evidently. Before we continue with the parallax topic, it’s crucial understand this concept as it is fundamental for comprehending the nuances of 3D transformations.

Dive deeper into rotate3d

The behaviour you’re observing, where rotate3d(0, 1, 0, 30deg) appears to follow the X position rather than the Y, can be initially confusing. However, this behaviour aligns with the principles of 3D transformations in CSS.

The rotate3d function in CSS applies a rotation around a vector in 3D space defined by its first three arguments (x, y, z axes coefficients), with the fourth argument specifying the angle of rotation. When you use rotate3d(0, 1, 0, angle), it means you are rotating around the Y-axis. Therefore, the effect of this rotation is observed as a change in the horizontal (X) plane when you modify the angle of rotation, which is why it seems to be following the X position.

Here is a demonstration of how updating the Y value in rotate3d impacts the behaviour of the element.

From the above screen capture, when you rotate an element around the Y-axis (rotate3d(0, 1, 0, angle)), you are rotating it in a manner that it tilts left or right around a vertical line that goes through the centre of the element. This does not move the element up or down (along the Y-axis) but instead tilts it in a way that the left and right edges move towards or away from the viewer, creating a visual effect of sideways rotation. This is why, despite the involvement of the Y-axis in the function call, the visible effect pertains more to changes along the X-axis from the viewer’s perspective.

This distinction is essential for developers to understand when applying 3D transformations, as it influences how elements are perceived to move or rotate in response to user interactions or animations. Knowing this helps in designing more intuitive and visually appealing interactive elements on web pages.

Continue on inspecting rotate3d

Reversing the angle to -30 degrees generates the opposite effect:

.c-parallax__inner {
  height: 100%;
  transform: rotate3d(0, 1, 0, -30deg);
  transform-style: preserve-3d;
  width: 100%;
}

Now let’s inspect the x-axis. This time, let’s try with 10-degree tilt.

.c-parallax__inner {
  height: 100%;
  transform: rotate3d(1, 0, 0, -10deg);
  transform-style: preserve-3d;
  width: 100%;
}

and with positive 10-degree.

.c-parallax__inner {
  height: 100%;
  transform: rotate3d(1, 0, 0, 10deg);
  transform-style: preserve-3d;
  width: 100%;
}

So we have seen how we could create the parallax effect using rotate3d with x and y axis with different degree values. But how can we apply both x and y axis together at the same time?

We can do something like:

transform: rotate3d(1, 1, 0, 10deg);

but because we need to rotate x and y axis with different degree values based on the mouse position, it’s practical to use separate rotation in the transform.

// Both do the same
transform: rotate3d(1, 1, 0, 10deg);
transform: rotate3d(1, 0, 0, 10deg) rotate3d(0, 1, 0, 10deg);

This approach allows us greater flexibility to update rotations independently.

Fantastic! We’re now set to modify the values. To accomplish this, we’ll introduce custom properties that will be dynamically updated using JavaScript.

Applying CSS custom properties

We’ve learnt that adjusting the rotation angle in rotate3d triggers the parallax effect. To achieve dynamic updates based on mouse movement, we’ll utilise CSS custom properties.

For a thorough understanding of CSS custom properties, I recommend checking out the detailed article I’ve written on the subject. In essence, custom properties allow us to reuse values across different parts of our CSS, and also, these values can be dynamically updated with JavaScript.

This capability is especially useful for our purpose, as it enables us to track mouse movements and accordingly adjust the custom property values directly within JavaScript.

Let’s explore how to apply these custom properties. The primary updates will involve the rotation degrees for the X and Y axes. We’ll start by defining these custom properties in the .c-parallax class:

.c-parallax {
  --translate-x: 0;
  --translate-y: 0;

  ...
}

Next, we incorporate them into the transform:

transform: rotate3d(0, 1, 0, var(--translate-x, 0)) rotate3d(1, 0, 0,var(--translate-y, 0));

Initially, these custom properties are set to a default value of 0, in case they’re not specified. Now this won’t work yet because we need to have the degree unit. To do that, we will use the calc() function.

transform: rotate3d(0, 1, 0, calc(var(--translate-x, 0) * 1deg))
      rotate3d(1, 0, 0, calc(var(--translate-y, 0) * 1deg));

This allows us to specify the rotation in degrees using custom properties.

Lastly, to make these updates interactive, we’ll apply them during the hover state over the parallax image, ensuring the changes occur only with mouse interaction in the parallax section:

.c-parallax__inner {
  ...

  .c-parallax:hover & {
    transform: rotate3d(1, 0, 0, calc(var(--translate-x, 0) * 1deg))
      rotate3d(0, 1, 0, calc(var(--translate-y, 0) * 1deg));
  }
}

With everything set up, we’re now ready to dynamically adjust these custom property values in response to mouse movements.

Updating CSS custom properties

To update the CSS custom properties, we will use JavaScript. Here is the complete code.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

parallax.addEventListener("mousemove", (e) => {
  const clientX = e.clientX;
  const clientY = e.clientY;

  const xCalc = (clientX - parallaxCenterX) * 0.0025;
  const yCalc = (clientY - parallaxCenterY) * 0.0025 * -1;

  parallax.style.setProperty("--translate-x", `${xCalc}`);
  parallax.style.setProperty("--translate-y", `${yCalc}`);
});

This script calculates the position of the mouse relative to the centre of the parallax container, adjusting the --translate-x and --translate-y custom properties accordingly. Let’s break down the process.

Initially, we define parallax to target our element, which will be utilised for attaching the mousemove event listener.

const parallax = document.querySelector(".c-parallax");

Following that, we’ll determine the centre position of .c-parallax__inner, an element that covers the full viewport.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

We get the dimensions and position of .c-parallax__inner through the getBoundingClientRect method. To find the centre position, we divide the width and height by 2 and add the left and top values, for the X and Y axes, respectively.

Now that we’ve identified the central point of the parallax section, we’ll proceed to modify the translateX and translateY values based on mouse movement. This means if the mouse is navigated towards the top left area of the parallax section, we intend for the three parallax layers to similarly move towards the top left but less intensively.

First, we’ll start by setting up an event listener for mouse movements within the parallax section.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

parallax.addEventListener("mousemove", (e) => {
  // logic goes here
})

And let’s get the mouse position.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

parallax.addEventListener("mousemove", (e) => {
  const clientX = e.clientX;
  const clientY = e.clientY;

  console.log('clientX:', clientX);
  console.log('clientY:', clientY);
})

Now as the mouse is moved, we’re able to capture its x and y coordinates. Moving the mouse to the extreme top left corner gives us the following values:

clientX: 0
clientY: 0

and when we move the mouse to the very bottom right, we will get something like (the values will be different depending on the size of your viewport):

clientX: 1200
clientY: 730

Let’s visualise a scenario where the mouse has been moved to:

From the illustration above, our goal is to adjust the translateX and translateY values to 0.5 accordingly.

To achieve this, we calculate the difference between the mouse’s position and the centre of the parallax by subtracting the centre coordinates from the mouse coordinates.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

parallax.addEventListener("mousemove", (e) => {
  const clientX = e.clientX;
  const clientY = e.clientY;

  const xCalc = (clientX - parallaxCenterX);
  const yCalc = (clientY - parallaxCenterY);

  console.log('xCalc:', xCalc);
  console.log('yCalc:', yCalc);
})

With the above code, we would get something like the screenshot below:

To adjust the direction of movement on the Y-axis, we multiply the calculated Y difference by -1. This inversion is necessary because, in the web coordinate system, the Y value increases as you move down the screen, which is opposite to how we perceive up and down in a 3D space or in everyday life.

By inverting the Y-axis calculation, we ensure that moving the mouse upwards (decreasing the Y value on the screen) translates into moving the parallax layers upwards, creating a more intuitive and natural parallax effect. This adjustment aligns the movement of the parallax layers with the user’s expectations, enhancing the overall interactive experience.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

parallax.addEventListener("mousemove", (e) => {
  const clientX = e.clientX;
  const clientY = e.clientY;

  const xCalc = (clientX - parallaxCenterX);
  const yCalc = (clientY - parallaxCenterY) * -1;

  console.log('xCalc:', xCalc);
  console.log('yCalc:', yCalc);
})

When we output the values, we observe figures similar to the following:

Additionally, to ensure that the parallax movement is subtle and not overly dramatic, we apply a scaling factor to the calculated differences between the mouse’s position and the parallax centre. By multiplying these differences by a small factor, such as 0.0025, we scale down the movement to create a more refined and controlled parallax effect.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

parallax.addEventListener("mousemove", (e) => {
  const clientX = e.clientX;
  const clientY = e.clientY;

  const xCalc = (clientX - parallaxCenterX) * 0.0025;
  const yCalc = (clientY - parallaxCenterY) * 0.0025 * -1;

  console.log('xCalc:', xCalc);
  console.log('yCalc:', yCalc);
})

The above code would make the value of xCalc and yCalc more like the desired outcome as we show above:

Finally, let’s dynamically update the CSS custom property values based on our calculations. As outlined in the article on updating values with JavaScript, this process involves using the setProperty method to apply new values to custom properties.

const parallax = document.querySelector(".c-parallax");
const parallaxInner = document
  .querySelector(".c-parallax__inner")
  .getBoundingClientRect();
const parallaxCenterX = parallaxInner.left + parallaxInner.width / 2;
const parallaxCenterY = parallaxInner.top + parallaxInner.height / 2;

parallax.addEventListener("mousemove", (e) => {
  const clientX = e.clientX;
  const clientY = e.clientY;

  const xCalc = (clientX - parallaxCenterX) * 0.0025;
  const yCalc = (clientY - parallaxCenterY) * 0.0025 * -1;

  parallax.style.setProperty("--translate-x", `${xCalc}`);
  parallax.style.setProperty("--translate-y", `${yCalc}`);
})

We’ve successfully implemented the dynamic parallax effect! 👏

I hope you found this article informative and learned something new today. Should you have any questions, feel free to contact me on LinkedIn.