Z方向の要素をある地点から奥に配置されているものについて見えなくする

Question

以下ページを参考に、奥にスクロールするページを作りました。
http://noze.space/archives/226

各要素はテキストと画像で、以下図のように配置され、スクロールすると要素が奥から手前に通り過ぎていきます。

2004、その間の画像、2005まではdivで囲まれていて.scalerのスタイルをつけている

HTMLを正面から見ると、奥にある要素は見えたままになっています。
そこで、z方向の2px以上(奥方向)の要素は正面から見えないようにし、2px以下(手前方向)からは要素がふんわり表示されるようにしたいのですが構文がわかりません、、

scriptは今のところ以下で動いています。

var scrollElm = (function() {
  if('scrollingElement' in document) {
    return document.scrollingElement;
  }
  if(navigator.userAgent.indexOf('WebKit') != -1) {
    return document.body;
  }
  return document.documentElement;
})();
 
// 全てのセクション要素を取得
var sections = document.querySelectorAll('.section');
 
// 全体をz方向に動かす#scaler要素を取得
var scaler = document.getElementById('scaler');
 
// 画面の高さを設定する#scroll要素を取得
var scrollDiv = document.getElementById('scroll');  
 
// セクション要素のdata-z属性を取得し、transformを設定
// 最後のセクション要素のdata-zを元に、画面の高さを計算して設定
for(var i = 0; sections.length > i; i++) {
  var itemZ = sections[i].getAttribute('data-z');
  sections[i].style.transform = 'translateZ(' + - itemZ + 'px)';
  if(i === sections.length -1) {
    scrollDiv.style.height = itemZ * 100 + window.innerHeight + 'px';
  }
}

// スクロールイベントで、#scaler要素のtransformでz軸を動かす
window.addEventListener('scroll', function() {
    var scrollNum = Math.round(scrollElm.scrollTop / 100);
    if(scrollNum % 1 === 0) {
      scaler.style.transform = 'translateZ(' + scrollNum + 'px)';
    }
  });

どうぞよろしくお願いします。

Answer 1

HTMLが本文中にないので記載のjavascriptを試せませんが、奥側を見えなくしたいのであれば、適切なz軸の場所に背景色を#FFFFFFでサイズを全面に広げたdiv要素を設置すれば、それ以降奥の要素はこちら側から不可視になります。
奥から徐々にフェードインしているように見せるためであれば、それぞれの.scaler要素の間に半透明の全面サイズdiv要素を設置すれば奥に行くほど薄く見えると思います。

以下ちょっと長いですがサンプルコードです。
各要素のz軸間隔は10pxにしています。
z4(-40px)に完全不透明のボードを設置しているので、それ以降の要素（2011と2014）は見えなくなっています。

<main>
  <div class="base"></div>
  <div class="label z0">2004</div>
  <div class="label z1">2005</div>
  <div class="label z2">2007</div>
  <div class="label z3">2009</div>
  <div class="label z4">2011</div>
  <div class="label z5">2014</div>
  <div class="bg-z1"></div>
  <div class="bg-z2"></div>
  <div class="bg-z3"></div>
  <div class="bg-z4"></div>
  <div class="bg-z5"></div>
</main>

div{
  font-size: 60px;
  font-weight: bold;
  backface-visibility: inherit; /* これが重要 */
}
.label{
  background-color: #fff;  
  border: 2px solid #cccccc;
}
main{
  position: relative;
  width: 100vw;
  height: 100vh;
  transform-style: preserve-3d;
}
.base{
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0px);
  width: 100vw;
  height: 100vh;
}
.bg-z1, .bg-z2, .bg-z3, .bg-z4, .bg-z5{
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #FFFFFF88;
}
.bg-z1{
  transform: translateZ(-10px);
}
.bg-z2{
  transform: translateZ(-20px);  
}
.bg-z3{
  transform: translateZ(-30px);  
}
.bg-z4{
  transform: translateZ(-40px);  
  background-color: #fff;
}
.bg-z5{
  transform: translateZ(-50px);  
}
.z0{
  position: absolute;
  left: 00%;
  top: 00%;
  transform: translateZ(0px);  
}
.z1{
  position: absolute;
  left: 10%;
  top: 10%;
  transform: translateZ(-10px);  
}
.z2{
  position: absolute;
  left: 20%;
  top: 20%;
  transform: translateZ(-20px);  
}
.z3{
  position: absolute;
  left: 30%;
  top: 30%;
  transform: translateZ(-30px);  
}
.z4{
  position: absolute;
  left: 40%;
  top: 40%;
  transform: translateZ(-40px);  
}
.z5{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateZ(-50px);  
}

codepenでのデモ

また、javascriptでz軸を制御しているのであれば、ついでにz軸の距離に合わせてfilter: blur()をかければ奥側をぼかすことも可能です。ぼかしがないよりは奥行き感が出るかもしれません。

ぼかし方式のcodepenデモ

Comments

[kanchanaburi]

ありがとうございました。回答いただいたコードを参考に、各要素に　background-color: #FFFFFF88;　を指定したところ、奥の方が見えなくなりました。
ただ、画面左下に年度ごとにサマリーが表示されるので要素を通過させるとサマリーに透過の背景が重なってしまいます。

サマリーを全面に出す　or　Z方向に並ぶ各要素が一番手前に来る時、ある地点からふんわり消える

上記のどちらかの対処をしようと思います。こちらもやり方がわからないので(汗)あとで新たに質問します。

[hope_mucci]

今思えばz-indexをいじるついでにopacityもいじったほうが簡単だったかもしれません。
サマリーの件もopacityで解決できるかもしれませんね。