BG-Attachment + smooth scrollin na kilku elementach.

pytanie zadane 5 października 2019 w HTML i CSS przez Piotr Jarema Użytkownik (970 p.)

Witam, mam oto taki kod

.header {
    width: 100%;
    height: 900px;
    background: url('../images/header.png');
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
    margin-bottom: 100px;
    position: relative;
    background-attachment: fixed;
    z-index: -1;
    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 900px;
        top: 0;
        left: 0;
        background: url('../images/header-dashes.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
    }
    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 900px;
        top: 0;
        left: 0;
        background: url('../images/header-shapes.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
    }
}

Potrzebuję zrobić takie coś, żeby każdy z tych elementów tj. główny obrazek oraz before i after mialy attachment oraz ruszały się z różnymi prędkościami no i były smooth tj. płynne, ktoś jakiś pomysł, dam radę zrobić to samym css'em?

Chcę zrobić coś w stylu:

https://themes.muffingroup.com/be/dj2/

1 odpowiedź

odpowiedź 5 października 2019 przez DawidK Nałogowiec (37,910 p.)

Jeżeli chcesz zrobić taki efekt poszukaj tutoriali lub materiałów o: parallax, parallax efekt, parallax efect , jest dosyć dużo przykładów.

pierwszy z brzegu np:

https://bedekodzic.pl/parallax/

komentarz 5 października 2019 przez Piotr Jarema Użytkownik (970 p.)

Wiem co to parallax, sęk w tym, że zdjęcia muszą być ustawione za użyciem selektora background + dwa bgki w pseudoelementach i muszą się poruszać w innym tempie

komentarz 6 października 2019 przez DawidK Nałogowiec (37,910 p.)

Jeżeli chodzi o poruszanie się w różnym tempie to chodzi mi po głowie coś takiego (nie do końca jestem pewien czy to dobra droga, ale może ktoś się wypowie):

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Sky</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div class='sky'>
        <div class='cloud'>

        </div>
        <div class='plane'>
            
        </div>
    </div>
</body>
</html>

main.css

* {
    margin:0;
    padding:0;
}

.sky {
    background-image: url('sky.jpg');
    background-size: cover;
    height: 100vh;
    left: 0;
    overflow: hidden;
    position:absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.cloud {
    background-image: url('cloud.png');
    height: 100vh;
    position: absolute;
    width: 100%;
    z-index: 3;
    animation: animate-sky 100s linear infinite;
}

.plane {
    background-image: url('plane.png');
    background-size: cover;
    height: 800px;
    position: absolute;
    width: 800px;
    z-index: 2;
    animation: animate-plane 5s linear infinite;
}


@keyframes animate-sky
{
    0%
    {
       background-position: 0;
    }
    100%
    {
       background-position: 100%;
    }
}

@keyframes animate-plane
{
    0%
    {
        top: calc(100% - 800px);
        left: 0%
    }
    100%
    {
        top: 100%;
        left: calc(100% + 800px);
    }
}

tła wziąłem z:

- sky (jpg): http://getwallpapers.com/collection/sky-background

- cloud (png): http://www.pngmart.com/image/8103

- plane (png): https://www.hiclipart.com/free-transparent-background-png-clipart-izplu