CSS animation で遊び倒す - Parallax 1-

CSS animation day33 となりました。

本日は、translate Zを使って、パララックスを表現したいと思います。
パララックスの実装方法は他にもいくつか存在しておりますが、なるべくシンプルで簡単なものをご紹介したいと思います。


#1. 完成版
<p class="codepen" data-height="462" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="bzXERb" style="height: 462px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Parallax Text Animation">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/bzXERb/">
  Parallax Text Animation</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. なぜか？
パララックスとは、なんでしょうか？
[こちら](https://www.wan55.co.jp/column/detail/id=313) の記事を抜粋します。

>
 Webデザインにおけるパララックスは、スクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します


デザインに取り入れることで、よりrich で華やかな表現をすることができるでしょう。今回から数回にわたり、この効果を検証していきたいと思います。

#3. 参考文献
[Kazlgu Sandbox](http://kazigu.github.io/sandbox/css-parallax/)
[KeithClark](https://keithclark.co.uk/articles/pure-css-parallax-websites/)
[ワンゴジュウゴ](https://www.wan55.co.jp/column/detail/id=313) 


#4. 分解してみる
<br/>
❶. 
まずは、参考文献の通り、translateZ を使って、パララックスに挑みます。
マークアップしましょう。


```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="parallax1">あいうえお</div>
      <div class="parallax2">かきくけこ</div>
      <div class="parallax3">さしすせそ</div>
    </div>
  </body>
</html>
```

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

.container {
  perspective: 100px;
  height: 100vh;
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
}

.parallax1 {
  transform: translateZ(-100px);
}

.parallax2 {
  transform: translateZ(-50px);
}

.parallax3 {
  transform: translateZ(0px);
}
```

<p class="codepen" data-height="554" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="bzXVVv" style="height: 554px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="bzXVVv">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/bzXVVv/">
  bzXVVv</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>

あれれ、パララックス効果のまったくない、ただの静止画になってしまいました。
Z座標がずれていることは、こちらからも確認できてますが、どこがまちがっていたでしょうか？　

・・・

結論から言うと、
層を意識していないがために、この現象は起こりました。

つまり、あいうえお、かきくけこ、さしすせそは、それぞれただの __文字列__として、空間上にポツンと存在してます。文字列だけでなく、各々に層を作り、``hight`` と ``color`` をつけてみましょう。


```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="parallax1">
           <p class="text">あいうえお</p>
        </div>
        <div class="parallax2">
           <p class="text">かきくけこ</p>
        </div>
        <div class="parallax3">
           <p class="text">さしすせそ</p>
        </div>
    </div>
  </body>
</html>
```

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

.container {
  perspective: 100px;
  height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
}

.parallax1 {
  transform: translateZ(-100px);
  height: 100vh;
  background: skyblue;
}

.parallax2 {
  transform: translateZ(-50px);
  height: 100vh;
  background: gray;
}

.parallax3 {
  transform: translateZ(0px);
  height: 100vh;
  background: gold;
}
```
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="NoQxdK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="NoQxdK">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/NoQxdK/">
  NoQxdK</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>

できました!
実は、最初のcodepenの時点で既に、パララックスは付いていたんですね。こうして、層を視覚化することで、わかりやすくなりますね。
<br/>
❷.
この各々の層のテキストを、中央寄せにしましょう。

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

.container {
  perspective: 100px;
  height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
}


.parallax1 {
  transform: translateZ(-100px);
  height: 100vh;
  background: skyblue;
}

.parallax2 {
  transform: translateZ(-50px);
  height: 100vh;
  background: gray;
}

.parallax3 {
  transform: translateZ(0px);
  height: 100vh;
  background: gold;
}

.text {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  botttom: 0;
  left:0;
  right:0;
  margin: auto;
}
```

<img width="1111" alt="スクリーンショット 2019-02-23 12.04.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/127f354c-2544-2ddc-e640-f389607aa4cc.png">


文字が中央寄せされました！

最後に、このカラフルな層を、絶対配置で一箇所にまとめましょう。
重なって見えなくなるので、background の色を消し、margin-Top をつけて少しずらして配置します。層のheight も130vh に増やします。

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

.container {
  perspective: 100px;
  height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
}


.parallax1 {
  transform: translateZ(-100px);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}

.parallax2 {
  transform: translateZ(-50px);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}

.parallax3 {
  transform: translateZ(0px);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}

.text {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left:0;
  right:0;
  margin: auto;
}
```
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="qgebRp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="qgebRp">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/qgebRp/">
  qgebRp</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/>
❸.
テキストの大きさが小さいままなので、汎用性がありません。
scaleを変えて、全てのテキストを同じ大きさにしましょう。
[こちら](https://keithclark.co.uk/articles/pure-css-parallax-websites/) の記事によると、scale は以下の計算をすれば良さそうです。

```
sacaleの大きさ = 1 + (translateZ * -1) / perspective
```
なぜこうなるかは知りません笑

今回の場合、translateZ が -100, -50, 0、perspective が100pxなので、
scaleは、2, 1.5, 1となります。


```styles.scss

.parallax1 {
  transform: translateZ(-100px) scale(2);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}

.parallax2 {
  transform: translateZ(-50px) scale(1.5);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}

.parallax3 {
  transform: translateZ(0px) scale(1);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}
```

<img width="357" alt="スクリーンショット 2019-02-23 12.08.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/b7d9c2ae-ed79-3f90-91f8-16847fcf6360.png">



これで、テキストが全て同じ大きさのまま、パララックス効果が出せました。
<br/>
❹.
このテキストが、上へ移動するスピードをコントロールしましょう。

このスピードは、2つのパラメーターによって、規定されます。

```
1. perspective　の値
2. transform: translateZ() の値
```

では、2をいじってみましょう。
Z軸がプラスになればなるほど、スピードは速くなります。
試しに、Zの値を半分にしましょう。scaleの値も再計算してください。

```styles.scss

.parallax1 {
  transform: translateZ(-50px) scale(1.5);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}

.parallax2 {
  transform: translateZ(0px) scale(1);
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}

.parallax3 {
  transform: translateZ(50px) scale(0.5);
  height: 130vh;
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  margin-top: 100px;
}
```

<p class="codepen" data-height="462" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="bzXERb" style="height: 462px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Parallax Text Animation">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/bzXERb/">
  Parallax Text Animation</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>

移動スピードが上がりました。
実際のWebサイトでは、この辺をうまく調整すると良さそうですね。
<br/>
❺.
最後に、パララックスとは関係ないのですが、テキストを使ったものすごい3D表現の作品を見つけました。

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

JQury のプラグイン、hover3D と言うものですが、嫉妬を覚えるくらい、すごい作品です。


複利効果で毎日コツコツ何かをアウトプットしていけば、いつしかこのような作品も作れる日が来る(来ないかも?)ことを信じて、明日も明後日も投稿していきます。

それではまた〜