【jQuery】アニメーションを3Dっぽくしてみる

2020年12月19日jQuery

はじめに

前回つくったものを、正面から見ているような感じにしてみましょう。

できた

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

こっち来てる…こっち来てるねぇ！

解説

まずはjQueryの方から見てみましょう。

/***** 左腕 *****/
    leftHand.css("transform","rotateX(" + (leftHandCnt) +"deg)");
    
    if (leftHandCnt == 30) {
      leftHandFlag = 1;
    } else if (leftHandCnt == -30) {
      leftHandFlag = 0;
    }
    
    if (leftHandFlag == 1) {
      leftHandCnt--;
    } else if (leftHandFlag == 0) {
      leftHandCnt++;
    }

前回とほとんど変わってないです。"transform"プロパティで"rotateX"を指定して回転軸をX軸にしています。これで手前と奥にブラブラさせます。でも、これだけだと立体感がないので、左腕が伸びたり縮んだりしているようにしか見えません。これはCSSで解決します。

.container {
  position: relative;
  width: 100px;
  height: 100px;
  left: 150px;
  top: 150px;
  perspective: 200px;
}

タイトルに【jQuery】って書いてるけど、キモはCSSの"perspective"プロパティなんです。これをアニメーションしてる要素の親要素に指定してあげます。そうするとその子要素に奥行きを持たせることができるんですねぇ。すごいですね。指定する数値は視点の位置。『見ている人がどのぐらい離れた位置から見ているか』だと思います。数値を大きくするとアニメーションの動きが小さくなります。現実世界でも距離が遠いと変化が分かりづらいですよね。多分そういうことだと思います。

あとがき

この疑似3D的な動きにはものすごい可能性を感じますよねぇ。もっとおしゃれなモノを作れるようにがんばります。ありがとうございました。

おしゃれ度

★★☆☆☆