Parallax efekt bez použití Javascript/jQuery

Na Parallaxový efekt (rolujete stránkou dolů, ale určitý prvek roluje pomaleji => jede jinak) je mnoho řešení přez Javascript či jQuery, ale tento efekt lze udělat i přez "pouhé" CSS.

Příklad s použitím hodnot v pixeelch:

Toto řešení používá pevnou výšku, která není vždy optimální a je třeba ji specifikovat v procentech a to takto:

body, html {
    height: 100%;
}

.parallax { 
    /* obrazek na pozadi */
    background-image: url("img_parallax.jpg");

    /* vyska maximalni */
    height: 100%; 

    /* Samotne reseni "Parallax" efektu */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Některé mobily mají problémy s vlastností "background-attachment: fixed;" tudíž je vhodné doplnit i tento kód:

@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}

<< zpět