0

I am working with this parallaxish 3d effect i found in a codepen. However I need to add an additional wrapper around all the html. When i wrap the html contents in a <div> everything disappears. When I wrap it in a <span> tag everything is fine. Also if i set that <span> tag to display:block; everything disappears again.

Why is this happening when wrapped in a block element?

Thanks!

https://codepen.io/anon/pen/JapeJX

KYSSE
  • 385
  • 2
  • 16
  • 1
    .content is positioned absolutely which takes it out of the document flow. As a result, the height of the parent, grandparent etc. needs to be defined. Add body>div {height: inherit;} and it will work. – Gerard Sep 11 '18 at 05:36

1 Answers1

1

When you add display: block make sure u set its height to 100% as its inner elements have height set in %.

Checkout https://stackoverflow.com/a/5658062/7333443

CodePen: https://codepen.io/anon/pen/QVQJPR

!(function ($doc, $win) {
  var screenWidth = $win.screen.width / 2,
    screenHeight = $win.screen.height / 2,
    $elems = $doc.getElementsByClassName("elem"),
    validPropertyPrefix = "",
    otherProperty = "perspective(1000px)",
    elemStyle = $elems[0].style;

  if (typeof elemStyle.webkitTransform == "string") {
    validPropertyPrefix = "webkitTransform";
  } else if (typeof elemStyle.MozTransform == "string") {
    validPropertyPrefix = "MozTransform";
  }

  $doc.addEventListener("mousemove", function (e) {
    var centroX = e.clientX - screenWidth,
      centroY = screenHeight - (e.clientY + 13),
      degX = centroX * 0.02,
      degY = centroY * 0.01,
      $elem;

    for (var i = 0; i < $elems.length; i++) {
      $elem = $elems[i];
      $elem.style[validPropertyPrefix] =
        otherProperty + "rotateY(" + degX + "deg)  rotateX(" + degY + "deg)";
    }
  });
})(document, window);
/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #004382;
  overflow: hidden;
}

.wrapper {
  transform-style: preserve-3d;
  margin: 0 auto;
  max-width: 982px;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  background: url("http://portalpacific.net/img/desk/icon-circles.png")
    no-repeat center center;
  background-size: contain;
}

.bloc {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  background-size: contain;
  background-position: center;
}

.content {
  transform: translateZ(80px) scale(1);
  -webkit-transform: translateZ(80px) scale(1);
  height: 100%;
  width: 100%;
  max-width: 720px;
  position: absolute;
  margin: auto;
  color: #fff;
  z-index: 3;
}
.content1 {
  background: url("http://portalpacific.net/img/desk/Website.png") no-repeat;
  background-position: center;
  max-width: 982px;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  background-size: contain;
}

.content p:nth-of-type(1) {
  font-size: 36px;
  line-height: 60px;
  position: absolute;
}
.content p:nth-of-type(2) {
  position: absolute;
}

.block {
  display: block;
  height: 100%;
}
<span class="block">
  <div class="wrapper elem" style="transform: perspective(700px) rotateY(0deg) rotateX(0deg);">
    <div class="bloc">
      <div class="content content1"></div>
      <div class="content content2">
      </div>
    </div>
  </div>
</span>
Sibiraj
  • 4,486
  • 7
  • 33
  • 57