Parallax Powered by CSS Custom Properties

This article details how to create a captivating parallax effect using CSS custom properties, transforming a static image into a dynamic, interactive scene. Kent C. Dodds' new website provided the inspiration, featuring a central image that demanded movement. The solution leverages just two CSS custom properties, --ratio-x and --ratio-y, to control the parallax effect.

The core JavaScript code captures cursor position and maps it to a usable range. GSAP's mapRange() and clamp() functions simplify this process, ensuring values remain within -1 and 1. A generateHandler function creates reusable event listeners, mapping cursor position relative to specific elements. These mapped values are then set as CSS custom properties.

The magic lies in the CSS. calc() combines the custom properties with other values to control various aspects, such as scale and hue. The example demonstrates changing the scale based on --ratio-y and hue based on --ratio-x. The flexibility allows for creative control without altering the core JavaScript.

Creating the scene involves breaking down the image into individual elements, a technique similar to CSS art tracing. These elements, represented as children within a container, are styled using scoped custom properties. Each element defines its own movement and rotation parameters, interacting with the global --ratio-x and --ratio-y values. An image sprite optimizes performance by avoiding multiple image requests.

The article progresses through several demos, illustrating the process step-by-step. It highlights the use of a configuration object to define element positions, sizes, and transformations. Responsive design is achieved using percentage values for positioning and sizing. The addition of --allow-motion caters to users preferring reduced motion, offering a smoother experience for all.

Finally, the article shows how this technique is implemented within a React component structure, utilizing a custom hook (useParallax) for efficient code reuse and maintainability. The React implementation encapsulates the parallax logic, making it easily integrated into larger projects. The result is a polished, performant parallax effect driven entirely by CSS and a small amount of JavaScript. The article concludes by emphasizing the versatility of image sprites and the power of CSS custom properties in creating engaging web experiences.

The above is the detailed content of Parallax Powered by CSS Custom Properties. For more information, please follow other related articles on the PHP Chinese website!