Pure Css Parallax Effect Issue

Question

seem to be having issues with my pure css parallax, im using the concept from this article. However this doesn't seem to be working for me at all.

Am I going about it all wrong?

You can inspect my code using a debugger here.

Edit: Sorry I though providing the link would let you inspect the code easier rather than read and try and understand pasted code snippets.

I want to have parallax effects on sections of my website.

Here you can see my HTML, there are more parts but im currently trying to get my header working with a parallax scrolling background:

<body class="parallax">
<header class="parallax__group">
  <div class="parallax__layer parallax__layer--back darken"></div>

  <div class="parallax__layer parallax__layer--base flex alignvcenter">
    <div id="hdr-logo">
      <img src="images/logo.svg" alt="Mobile Paint Solutions" class="responsive-img">
    </div>
    <div id="hdr-hint">
      <img src="" alt="" class="responsive-img">
    </div>
    <div id="hdr-nav">
      <nav>
        <a href=""><span>Home</span></a>
        <a href=""><span>About</span></a>
        <a href=""><span>Gallery</span></a>
        <a href=""><span>Reviews</span></a>
        <a href=""><span>Pricing</span></a>
        <a href=""><span>Contact</span></a>
      </nav>
    </div>
  </div>

</header>

And here are my LESS styles:

    .parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}

However currently the background is not moving at all, can anyone explain this?

Accepted Answer

I believe the reason the effect (parallax or not) does not work is because you used <body> as the host element. Probably some of the properties it uses have no effect on <body>. I assume we're talking perspective and its vendor prefixed counterparts.

The obvious fix is to use a <div> as host, not <body>. I tried to use some styles and images from the website you linked, but it doesn't look too good. You got the idea though.

Answer 2

Adding

background-attachment: fixed;

to your

<div class="parallax__layer parallax__layer--back darken"></div>

or actually class named

parallax__layer--back

fixed the thing.

Edit: () this works, gentleman.

Pure Css Parallax Effect Issue

2 Answers

Must Read

Your Answer

Elena Rostova

Pure Css Parallax Effect Issue

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Elena Rostova