CSS animation で遊び倒す - Parallax 4-

CSS animation day36 となりました。
毎日記事を投稿しているせいで、画像アップロードの上限(100MB月)になってしまいました。大変申し訳ないのですが、画像は極力抑えて、codesandobox で随時貼り付けてお届けいたします。

本日は、
パララックスによる奥域表現をしたいと思います。


#1. 完成版
<p class="codepen" data-height="451" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="LaYJzx" style="height: 451px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="World Parallax">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/LaYJzx/">
  World Parallax</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. なぜか？
やっぱり男にとって、Z軸は憧れの対象だと思います。
WebGL とかthree.js とかを使いこなしている人は、羨望の対象でしかありません。かっこいいです、本当に。

今までのパララックスは、Y軸方向にちょこちょこ動かすことによって、視差効果を出しておりました。が、所詮2Dレベルの表現です。　

今回は、少しでも3Dレベルに近づくため、Z軸に挑戦をします。


#3. 参考文献
[beercamp](http://2011.beercamp.com/)
[magic leap](https://www.magicleap.com/leapcon)
[Mask Text Hover Effect | CSS Tutorial](https://www.youtube.com/watch?v=KsrX1qyQDRs)

#4. 分解してみる

❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="bgimg"></div>
      <div class="text">
        Hello World
      </div>
    </div>
  </body>
</html>
```


```styles.scss
body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
}

.text {
  height: 100vh;
  width: 100%;
  font-size: 170px;
  text-align: center;
  line-height: 200px;
  margin: 100px auto;
}
```



これで、背景画像の上に、Hello World と乗っただけの、静止画ができます。


以前ご紹介した[テクニック](https://qiita.com/duka/items/dd05538652f69bb28f2a) 
 →text の中に、background-clip: text　で、画像を文字の背景に出します。


```styles.scss
.text {
  height: 100vh;
  width: 100%;
  font-size: 170px;
  text-align: center;
  line-height: 200px;
  margin: 100px auto;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

これで、text に背景画像が適応されます。(画像容量制限でアップできなくてすみません。)
<br/>
❷.
アニメーションをつけましょう。
`背景画像を大きくしたり小さくしたりする`ことで、Z軸方向の遠近感を出します。

```styles.scss

.text {
  height: 100vh;
  width: 100%;
  font-size: 150px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 250px;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  -webkit-background-clip: text;
  color: transparent;
  animation: move 8s ease-in-out infinite;
}

@keyframes move {
  50% {
    background-size: 50% 50%;
  }
}
```

<p class="codepen" data-height="806" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="WmNgey" style="height: 806px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Hello World">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/WmNgey/">
  Hello World</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

文字の中身が背景と連動して動くようになりました。
<br/>
❸.

パララックスは視差効果なので、もう一つ、真逆な動きを取り入れましょう。

文字の中の背景画像は小さくなったので、今度は、.bgimg クラスの背景画像を、逆に大きくしましょう。rotateY180 で逆に配置すると、より素敵です。(Youtubeのアイデアを参考にしてます。)


```styles.scss
body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.bgimg {
  width: 100vw;
  height: 100vh;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
  transform: rotateY(180deg);
  animation: move2 8s ease-in-out infinite;
}

.text {
  height: 100vh;
  width: 100%;
  font-size: 150px;
  letter-spacing: 10px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 250px;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  color: transparent;
  animation: move 8s ease-in-out infinite;
}

@keyframes move {
  50% {
    background-size: 50% 50%;
  }
}

@keyframes move2 {
  50% {
    background-size: 150% 150%;
  }
}
```

<p class="codepen" data-height="451" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="LaYJzx" style="height: 451px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="World Parallax">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/LaYJzx/">
  World Parallax</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

できました！
このように、パララックス = 視差効果を利用して、2つの物体を逆に動かすことで、奥域が生まれます。面白い効果ですね。　


早く、画像アップロード制限が解除されることを祈るばかりです。
それでは、また明日〜