Fixed position with perspective

Question

Here's my JS FIDDLE.

I would like that my div id="text" be fixed. But it doesn't work with my code... The problem is that I need to keep all my content in my div id="wrapper". How can I do? If you have another solution for have the parallax effect on my image (only with css), let me know.

body {
  overflow-x: hidden;
  margin:0;
}

#text {
  font-size: 70px;
  height: 100%;
  width: 100%;
  position: fixed;
}
#intro {
  font-size: 30px;
  width: 100%;
  border:3px solid yellow;
  position: absolute;
}

#wrapper {

  transform-style: preserve-3d;
  height: 100%;
  perspective: 1px;
  overflow-x: hidden;
  border:3px solid cyan;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

}

#wrapper section {

    position: relative;
    height: 200px;
    width: 300px;
    background:pink;
    box-sizing: border-box;
    border:3px solid red;
    transform-style: inherit;
    overflow: hidden; 
    margin: 100px;

  }

#wrapper section .back {
      width: 300px;

      border:3px solid green;
      transition: transform 1s ease-out;
      height:200px;
      background-position: center center;
      transform: translateZ(-0.6px) scale(1.5); }

.back {
    background-image: url(http://wallpaper-gallery.net/images/background-image/background-image-18.jpg); }





#wrapper section .back:hover {

  opacity: 0.5;
  transform:translateZ(-0.4px) scale(2.6); }

do you need this?: https://jsfiddle.net/4j8gmp0q/ – Banzay Jan 09 '17 at 00:03 — Banzay, Jan 09 '17 at 00:03
I need all elements be inside the wrapper – user3870112 Jan 09 '17 at 11:23 — user3870112, Jan 09 '17 at 11:23

tao · Answer 1 · 2017-01-09T00:52:52.330

Here it is:

body {
  overflow-x: hidden;
/*    position:static;*/
    margin:0;

}

#text {
  font-size: 70px;
  height: 100%;
  width: 100%;
  position: fixed;
  pointer-events: none;
}
#intro {
  font-size: 30px;
  width: 100%;
  border:3px solid yellow;
  position: absolute;
}

#wrapper {

  transform-style: preserve-3d;
  height: 100%;
  perspective: 1px;
  overflow-x: hidden;
  border:3px solid cyan;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

}

#wrapper section {

    position: relative;
    height: 200px;
    width: 300px;
    background:pink;
    box-sizing: border-box;
    border:3px solid red;
    transform-style: inherit;
    overflow: hidden; 
    margin: 100px;

  }

#wrapper section .back {
      width: 300px;

      border:3px solid green;
      transition: transform 1s ease-out;
      height:200px;
      background-position: center center;
      transform: translateZ(-0.6px) scale(1.5); }

.back {
    background-image: url("http://wallpaper-gallery.net/images/background-image/background-image-18.jpg"); }





#wrapper section .back:hover {

  opacity: 0.5;
  transform:translateZ(-0.4px) scale(2.6); }

<div id="wrapper">
  <div id="intro">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
  <section id="frame1"><div class="back"></div></section>
  <section id="frame3"><div class="back"></div></section>
  <section id="frame5"><div class="back"></div></section>
  <section id="frame7"><div class="back"></div></section>
</div>
<div id="text">
  <h1>Hello</h1>
</div>

You need to place the real fixed element last in DOM (as a sibling of #wrapper) and give it pointer-events:none so it allows pointer-events (including scroll) to pass through to the other fixed positioned element (#wrapper, which holds the rest of the content) which needs to be scrolled for your parallax effect to happen.

For my real website, I need all elements be inside the wrapper. — user3870112, Jan 09 '17 at 14:02
Andrei Gheorghiu, thanks, it's clear. ;) So the solution is I need to find another solution for my parallax effect... — user3870112, Jan 09 '17 at 15:02
You really don't need `position:fixed` on your entire contents. [Read this](https://medium.com/@dhg/parallax-done-right-82ced812e61c#.lbpefyvys) for a good article featuring an example of multiple chained parallax containers, all with `position:fixed`. I assume that's what you're looking for. — tao, Jan 09 '17 at 15:06

Fixed position with perspective

1 Answers1