Sådan oprettes: Parallax scrolling

Lær, hvordan du bruger CSS til at skabe en 'parallax'-effekt.

Parallax scrolling

Parallax scrolling er en webdesigntrend, hvor baggrundsinhold (f.eks. billeder) bevæger sig med en forskellig hastighed sammenlignet med forgrundsindhold under rulning. Klik på nedenstående link for at se forskellen mellem websider med og uden parallax scrolling.

Demonstration med parallax scroll-effekt

Demonstration uden parallax scroll-effekt

Bemærk:Parallax scroll fungerer ikke altid på mobile enheder/smartphones. Men du kan slå effekten fra på mobile enheder ved hjælp af media queries (se sidste eksempel på denne side).

hvorfor oprette parallax scroll-effekten

Brug et kontainer-element, og tilføj et billede med en bestemt højde som baggrund. Brug derefter background-attachment: fixed oprette den faktiske parallax-effekten. Andre baggrundsegenskaber bruges til at centrere og perfekt skalere billedet:

eksempler i pixels

<style>
.parallax {
  /* Brugt billede */
  background-image: url("img_parallax.jpg");
  /* Angiv en specifik højde */
  min-height: 500px;
  /* Opret parallax scroll-effekten */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Kontainer element -->
<div class="parallax"></div>

prøv det selv

De ovenstående eksempler bruger pixels til at sætte billedets højde. Hvis du vil bruge procent, f.eks. 100%, for at gøre billedet til at passe til hele skærmen, skal du sætte højden på parallax-kontaineren til 100%. Bemærk: Du skal også height: 100% Anvendes på <html> og <body>:

eksempler i procent

body, html {
  height: 100%;
}
.parallax {
  /* Brugt billede */
  background-image: url("img_parallax.jpg");
  /* Hele højden */
  height: 100%;
  /* Opret parallax scroll-effekten */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

prøv det selv

nogle mobile enheder bruger background-attachment: fixed kan forårsage problemer. Men du kan slå parallax-effekten fra på mobilenheder ved hjælp af media queries:

eksempel

/* Slå parallax scroll fra for alle tabletter og mobiltelefoner. Du kan øge eller reducere pixels, hvis nødvendigt */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

prøv det selv

I ovenstående kode vil parallax scroll-effekten blive slået fra, når skærmens bredde er eller mindre end 1366 pixels, hvilket er passende for de fleste tabletter og mobiltelefoner. Dette sker ved at ændre .parallax klassen background-attachment egenskab fra fastsat 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。