How to create: Parallax scrolling

Learn how to create a 'parallax' scrolling effect using CSS.

Parallax scrolling

Parallax scrolling on websites is a design trend where the background content (such as images) moves at a different speed than the foreground content when scrolling. Click the link below to see the difference between websites with and without parallax scrolling.

Parallaxin pyörivän vaikutuksen esimerkki

Parallaxin pyörivän vaikutuksen poistamisen esimerkki

Huomaa:Parallaxin pyörivä vaikutus ei aina toimi mobiililaitteilla/smartphoneilla. Mutta voit käyttää media-kyselyä poistamaan tämän vaikutuksen mobiililaitteilta (katso tämän sivun viimeinen esimerkki).

kuinka luoda parallaxin pyörivä vaikutus

Käytä kontteinia ja lisää siihen tiettyä korkeutta omaava taustakuva. Sitten käytä background-attachment: fixed luo todellisen parallax-vaikutuksen. Muut taustan ominaisuudet käytetään kuvan keskelle asettamiseen ja täydelliseen skaalaamiseen:

pikseliosuuden esimerkki

<style>
.parallax {
  /* Käytettävä kuva */
  background-image: url("img_parallax.jpg");
  /* Aseta tietty korkeus */
  min-height: 500px;
  /* Luo parallaxin pyörivä vaikutus */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Konttietelementti */
<div class="parallax"></div>

kokeile itse

Yllä olevassa esimerkissä kuvan korkeus asetetaan pikseleillä. Jos haluat käyttää prosentteja, kuten 100%, jotta kuva sopii koko näytölle, aseta parallaxin korkeus 100%. Huomaa: Sinun täytyy myös height: 100% sovelletaan <html> ja <body>:

prosenttiosuuden esimerkki

body, html {
  height: 100%;
}
.parallax {
  /* Käytettävä kuva */
  background-image: url("img_parallax.jpg");
  /* Täysin korkea */
  height: 100%;
  /* Luo parallaxin pyörivä vaikutus */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

kokeile itse

jotkut mobiililaitteet käyttävät background-attachment: fixed voi aiheuttaa ongelmia. Mutta voit käyttää media-kyselyä poistamaan parallax-vaikutuksen mobiililaitteilta:

esimerkki

/* Poista kaikki tabletteja ja älypuhelimia koskevat parallaxin pyörivät vaikutukset. Jos tarpeen, voit lisätä tai vähentää pikseleitä */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

kokeile itse

Yllä olevassa koodissa, kun näytön leveys on tai pienempi kuin tai yhtä suuri kuin 1366 pikseliä, poistetaan parallaxin pyörivä vaikutus, mikä sopii useimmille tableteille ja älypuhelimille. Tämä tehdään muuttamalla .parallax luokan background-attachment ominaisuuksilta fixed t scroll Toteutetaan. Tämä tekee taustakuvan pyörivän sivun mukana, ei kiinni näkymässä.