Auf Thema antworten

Beitrag

[QUOTE="Paloby, post: 8248, member: 1743"]
Hi Kwerdi11,

ich weiß nicht was genau du für einen parallax effekt haben möchtest, ich habe deinen Code nochmal etwas umgeschrieben und mit background-attachment: fixed; gearbeitet.

Allgemein würde ich nie im html-Tag ein overflow: hidden platzieren, hier sollte der body-Tag reichen.

Hier der CSS Code:
[CODE]    html {
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }
    body {
        margin: 0;
        perspective: 1px;
        transform-style: preserve-3d;
        overflow-x:hidden;

}
    .parallax-part {
        width: 100vw;
        height: 100vh;
        transform-style: preserve-3d;
    }
    .parallax-part::before {
        content:"";
        width: 100vw;
        height: 100vh;
        top:0;
        left:0;
        bottom: 0;
        right: 0;
        background: url("img/background.jpg") no-repeat;
        background-attachment: fixed;
        background-size: cover;
        position: absolute;
        z-index: -1;
    }
    .head-menu {
      margin: 0 auto;
      width: 70%;
      height: 0px;
      background-color: rgba(0,0,0,.0);
      position: sticky;
      top: 0;
      z-index: 10;
      transition: all 0.3s ease-in-out;
    }
    .regular-part {
        width: 100vw;
        height: 100vh;
        padding-top: 10vh;
        background-image: url("img/background01.jpg");
        z-index: 2;
        position: relative;
    }
    body.sticky-header .head-menu  {
       height: 60px;
       background-color: rgba(0,0,0,.5);
       width: 100%;
    }[/CODE]

Schau mal ob dir das so schon reicht.
[/QUOTE]

Authentifizierung