Parallax effect animation
Create a "parallax" CSS animation effect right in the HTML code
Overview
The parallax-* alias creates a parallax effect on an HTML element by translating it along the x or y axis, triggered by either scroll events or mouse/pointer events. The parallax effect is often used to enhance user interfaces by adding a sense of motion, making websites feel more interactive and visually appealing. Tou can fine-tune the duration, direction, and distance of the effect to match the desired aesthetic and improve the overall user experience.
Syntax
Default
The default parallax parameters:
| Name | Start value (default) | End value (default) |
|---|---|---|
parallax-{x|y} |
-2rem |
2rem |
Examples
These examples demonstrate how to use the parallax alias with the supported scroll and mouse/pointer triggers
parallax-x
The parallax-x alias creates a parallax effect over the x axis.
Scroll
Mouse/pointer
Here, we have limited the effect to use only the x-axis of the mouse event.
parallax-y
Scroll
Mouse/pointer
Here, we have limited the effect to use only the y-axis of the mouse event.
Custom values
By providing a custom value, you set the distance of the parallax effect. In this case, we’ve set the 100px and 5rem, which makes the element to start on -100px (or -5rem), and continuously progress to 100px (or 5rem) during the scroll or mouse event.
Scroll
Mouse/pointer
Options
Because the parallax alias is coordinate-based it supports only limited number of options.
duration
Control how long the effects should last by customizing the duration.