Hur skapar man: Parallax scrolling

Lär dig hur du skapar en 'parallax'-effekt med CSS.

Parallax scrolling

Parallax scrolling är en webbdesigntrend där bakgrundsinnehåll (t.ex. bilder) rör sig med olika hastighet när du rullar. Klicka på länken nedan för att se skillnaden mellan webbplatser med och utan parallax scrolling.

Visning med parallax-effekt

Visning utan parallax-effekt

Observera:Parallax-rullande effekt fungerar inte alltid på mobila enheter/smartphones. Men du kan stänga av effekten på mobila enheter med hjälp av media query (se det sista exemplet på denna sida).

hur man skapar en parallax-effekt

Använd ett kontainer-element och lägg till en bild med en specifik höjd som bakgrund. Sedan, använd background-attachment: fixed skapa den faktiska parallax-effekten. Andra bakgrundsegenskaper används för att centrera och perfekta skalningen av bilden:

exempel i pixlar

<style>
.parallax {
  /* Använda bild */
  background-image: url("img_parallax.jpg");
  /* Ställa in specifik höjd */
  min-height: 500px;
  /* Skapa parallax-rullande effekt */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Kontainer-element */
<div class="parallax"></div>

prova själv

I ovanstående exempel används pixlar för att ställa in bildens höjd. Om du vill använda procent, till exempel 100%, för att göra bilden att passa hela skärmen, ställ in höjden på parallax-kontейнern till 100%. Observera: Du måste också height: 100% används på <html> och <body>:

exempel i procent

body, html {
  height: 100%;
}
.parallax {
  /* Använda bild */
  background-image: url("img_parallax.jpg");
  /* Full höjd */
  height: 100%;
  /* Skapa parallax-rullande effekt */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

prova själv

vissa mobila enheter använder background-attachment: fixed kan orsaka problem. Men du kan stänga av effekten med hjälp av media query på mobila enheter:

exempel

/* Stäng av parallax-rullande effekt för alla surfplattor och telefoner. Om nödvändigt kan du öka/minska pixlarna */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

prova själv

I ovanstående kod stängs parallax-rullande effekt av när skärmens bredd är mindre än eller lika med 1366 pixlar, vilket är lämpligt för de flesta surfplattor och telefoner. Detta görs genom att ändra .parallax klassens background-attachment egenskap från fastsatt till scroll För att genomföra detta, kommer bakgrundsbilden att rulla tillsammans med övriga delar av sidan, inte fast i viewporten.