The key to making parallax scrolling effect is to make elements of different layers scroll at different speeds. 1. First, build a multi-layer HTML structure, including background, medium scene and foreground, and use CSS to set the container overflow: hidden and absolute positioning; 2. Then listen to scroll events through JavaScript, use transform: translateY() to dynamically adjust the positions of each layer. The background layer scrolls slowly and the medium scene is slightly faster; 3. Finally, optimize performance, use throttling functions to control the scrolling frequency, compress image resources, and adapt to the mobile terminal, and consider pure CSS solutions to improve compatibility.

It is actually not difficult to do parallax scrolling effect, it can be done with CSS and a little HTML structure. The core is to allow elements of different layers to roll at different speeds to create a three-dimensional sense. Let me tell you how to do it.

1. Basic structure: Multi-layer layout is the key

The basis of parallax scrolling is to divide the page into multiple "layers", such as background, medium shot, and foreground. The scrolling speed of each layer is different, and it looks layered.

The HTML structure can be written like this:

 <div class="parallax">
  <div class="background"></div>
  <div class="midground"></div>
  <div class="foreground"></div>
</div>

Then set overflow: hidden and fixed height for .parallax , and the content inside is hidden beyond the part. Each layer covers the entire container with absolute positioning, which facilitates control of scrolling behavior.

2. CSS realizes scrolling speed difference

The core of parallax is to make certain elements scroll slowly or faster than the page. The easiest way is to use transform: translateY() with scrolling events to dynamically adjust the position.

Here is a basic idea (controlled with JavaScript):

 window.addEventListener('scroll', function () {
  const scroll = window.scrollY;

  document.querySelector('.background').style.transform = `translateY(${scroll * 0.5}px)`;
  document.querySelector('.midground').style.transform = `translateY(${scroll * 0.8}px)`;
});

• The background layer moves slowly (multiply 0.5), and looks farther
• Medium view is slightly faster (multiple 0.8)
• The prospects can be changed or simply remain unchanged

Transparency or scaling can also be set according to the page scrolling ratio to enhance the visual effect.

3. Optimization experience: Don't forget performance and compatibility

Although parallax scrolling looks good, it will stutter if it is not handled well, especially on mobile phones.

A few suggestions:

• Try to use transform and opacity attributes that will not trigger reordering
• Add a throttle function (throttle) to the scroll monitor to avoid frequent triggering
• The image resources should be compressed, and it is best to use background-size: cover to ensure that it can adapt to various screens.
• Consider whether to disable complex animations on the mobile side to improve fluency

If it is just a simple effect, you can also try a pure CSS solution, such as using background-attachment: fixed to achieve the static background scrolling illusion.

Basically that's it. Parallax scrolling looks cool, but in fact the principle is not complicated. The key is that the details are handled in place, otherwise it will easily get stuck or visually confused.

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