Efekt Parallax czyli efektowne zdjęcie w tle wykonane w CSS

Efekt Parallax to trend w witrynie, w którym zawartość tła (np. Obraz) jest przesuwana z inną prędkością niż zawartość pierwszego planu podczas przewijania.

<style>
.parallax { 
    /* Umieszczenie zdjęcia */
    background-image: url("twoja_nazwa.jpg");

    /* Ustawienia konkretnego wysokości zdjęcia */
    height: 500px; 

    /* Tworzenie efektu */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<!-- Blog z efektem parallax -->
<div class="parallax"></div>

 

Demo do wkładu jak wygląda efekt na W3c – DEMO

Opublikowany w CSSTagged