Paano gumawa: Parallax scrolling

Matututunan kung paano gumawa ng

Parallax scrolling

Ang parallax scrolling ay isang trend sa disenyo ng websayt, kung saan ang paggalaw ng laman ng likuran (halimbawa, mga imahe) ay may magkakaibang bilis sa paggalaw ng laman ng harapan. I-click ang sumusunod na link upang makita ang pagkakaiba sa websayt na may at walang parallax scrolling.

Demonstration with parallax scrolling effect

Demonstration without parallax scrolling effect

Note:Parallax scrolling is not always effective on mobile devices/smartphones. However, you can use media queries to turn off this effect on mobile devices (see the last example on this page).

How to create parallax scrolling effect

Use a container element, and add a background image with a specific height to it. Then, use background-attachment: fixed Create the actual parallax effect. Other background properties are used for centering and perfectly scaling the image:

Instances in pixel units

<style>
.parallax {
  /* The image used */
  background-image: url("img_parallax.jpg");
  /* Set specific height */
  min-height: 500px;
  /* Create parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Container element */
<div class="parallax"></div>

Try it yourself

The above example uses pixels to set the height of the image. If you want to use percentages, such as 100%, to make the image fit the entire screen, set the height of the parallax container to 100%. Note: You must also set height: 100% Applied to <html> and <body>:

Instances in percentage units

body, html {
  height: 100%;
}
.parallax {
  /* The image used */
  background-image: url("img_parallax.jpg");
  /* Full height */
  height: 100%;
  /* Create parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Try it yourself

Some mobile devices use background-attachment: fixed will cause problems. However, you can use media queries to turn off the parallax effect on mobile devices:

Instance

/* Turn off parallax scrolling for all tablets and mobile phones. You can increase/decrease pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Try it yourself

In the above code, when the screen width is less than or equal to 1366 pixels, the parallax scrolling effect will be turned off, which is suitable for most tablets and mobile phones. This is done by changing .parallax class background-attachment Atribute from fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。