The parallax scrolling effect can be implemented using CSS. There are three specific methods: First, use the background-attachment property, and set the background-attachment: fixed; make the background image fixed, forming visual misalignment; second, use transform: translateZ() and perspective to set multiple levels in HTML and give different depths to simulate the 3D scrolling effect; third, combine HTML, CSS and JavaScript, dynamically adjust the style by listening to scroll events to achieve more complex animation effects. These three methods are applicable to basic parallax, full-screen display websites and highly customized scenarios, and at the same time, we need to pay attention to mobile compatibility, hierarchical quantity control and performance optimization issues.

The parallax scrolling effect is actually not that mysterious, and you can get some of it with CSS. Although full parallax scrolling usually requires more refined control by JS, if you just want to do basic visual differences such as slow motion of background image and fast motion of text, CSS's background-attachment and transform: translateZ() properties are enough.

Use background-attachment to achieve simple parallax

This method is the oldest and simplest, suitable for the effect of making background images without scrolling with the content.

 .parallax {
  background-image: url('your-image.jpg');
  background-attachment: fixed;
  background-size: cover;
  height: 400px;
}

After setting this way, when the page is scrolled, the background image of the .parallax block will be "pinned" on the screen, while the text or content on it will scroll normally, forming a visual sense of dislocation.

Note:

• background-attachment: fixed; may not support or perform abnormally on some mobile browsers.
• The parallax levels used in this way should not be too many, otherwise the vision will be easily confused.

Use transform and z-index to create a hierarchical sense of movement

If you want multiple elements to have different motion speeds when scrolling, you can use CSS's transform: translateZ() with perspective to simulate 3D effects.

The HTML structure is roughly like this:

 <div class="scene">
  <div class="layer layer1">Prospect content</div>
  <div class="layer layer2">Medium-scene content</div>
  <div class="layer layer3">Background content</div>
</div>

Then give them different Z-axis positions:

 .scene {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.layer1 {
  transform: translateZ(-1px);
}

.layer2 {
  transform: translateZ(-2px);
}

.layer3 {
  transform: translateZ(-3px);
}

The principle of this is to use perspective and depth (translateZ) to allow content at different levels to produce "different distances and distances" movement speeds when scrolling. This solution is more suitable for full-screen scrolling websites, such as introduction pages, portfolio displays, etc.

But I want to remind you:

• It relies on browser support for 3D transformations, and some older devices may get stuck.
• Don’t pile too many levels, otherwise it will affect performance and experience.

Combined HTML CSS JS to make more complex effects

If you want to do more complex parallax animations, such as image enlargement, color gradient, and text fading, you have to use JavaScript to listen to scroll events to dynamically modify the style.

A simple example is:

 window.addEventListener("scroll", function () {
  const scroll = window.scrollY;
  document.querySelector(".parallax-img").style.transform = `translateY(${scroll * 0.5}px)`;
});

Cooperate with CSS:

 .parallax-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.1s;
}

This allows the picture to slowly move down as it scrolls, creating the feeling that "the background moves slowly than the content".

Applicable scenarios include:

• Visual image of the homepage of the website
• Dynamic illustrations in the product introduction page
• Brand page with strong visual impact

But don't forget:

• Listening to scroll events too frequently will affect performance. It is recommended to throttle processing (throttle)
• Mobile terminals should consider the compatibility of gesture sliding

Basically that's it. There are many ways to achieve parallax scrolling, which one depends on your project requirements and target equipment support.

The above is the detailed content of How to create a parallax scrolling effect with CSS?. For more information, please follow other related articles on the PHP Chinese website!