【jQuery】画面奥から手前に向かってくるヤツ

2021年1月7日jQuery

はじめに

前回の記事で「matrix3dを使う時がきた」って言ってたけど、やっぱり使いませんでした。はい。今回はタイトルにもある通り、奥から手前に向かってくるヤツを作りたいと思います。

できた

See the Pen
OJREPaj by AtsushiNakata (@nakata999)
on CodePen.

はい。こっちに来てますね。それでは簡単に解説いきます。まずはHTMLからです。

<div class="world">
  (略)
  <div class="board">あー。なんか名言っぽいの言いたい。</div>
  (略)
  <div class="board">だめだコリャ。</div>
<div>

“world"クラスの中に"board"クラスをたくさん入れています。この"board"が奥から手前に向かってきているワケですね。次はCSSを見てみましょう。

body {
  overflow: hidden;
  background-color: black;
  transform-style: preserve-3d;
  perspective: 500px;
}
.world {
  width: 100vw;
  height: 100vh;
  transform-style: preserve-3d;
}

まずは"body"に"perspective"プロパティを指定します。これで"body"の中に書いた要素はすべて奥行きを持つことができます。そして"transform-style: preserve-3d"を指定することで、その子要素を3Dで表示させることができます。いまいちピンと来てないんですけど、"perspective"とセットで使うものなんだと思っています。"transform-style"は継承されないので"body"と"world"の両方に指定します。最後はjQueryです。

/*** ボードの初期位置 ***/
  for(var i = 2; i <= cnt+1; i++){
    if(i % 2 == 1){
      $(".board:nth-child(" + i + ")").css("transform", "translateX(-20%) translateY(-50%) translateZ(" + (-1000 + Z_DISTANCE * i) +"px)");  
    } else {
      $(".board:nth-child(" + i + ")").css("transform","translateX(20%) translateY(-50%) translateZ(" + (-1000 + Z_DISTANCE * i) + "px)");  
    }
  }

奇数番目のボードは左に、偶数番目のボードは右に配置します。

/*** 手前に向かって移動させる ***/
  setInterval(function(){
    worldZ += 4;
    $(".world").css("transform","translateZ(" + worldZ + "px)");
    console.log(worldZ);
    if(worldZ > 44000){
      worldZ = 0
    }
  },10);

“setInterval"を使って"world"を手前に移動させます。最後まで行ったらまた初期位置に戻るようにしました。

あとがき

前にも同じようなヤツ作っていたので難しくありませんでしたね。これ文章じゃなくておしゃれな画像にでもして、クリックしたら一枚ずつ手前に来るみたいな感じにしたらおしゃれになるんじゃないでしょうか？今回は以上です。ありがとうございました。

おしゃれ度

★★★☆☆