CSS animation で遊び倒す - Vanilla - Tilt.js  チュートリアル-

CSS animation day 56 となりました。
だいぶかくネタがなくなってきました・・・汗

WebGL をそのうち始めるかもしれません。。

本日は、3D 効果が秀逸なTilt.js を触っていきたいと思います。


#1. 完成版
<p class="codepen" data-height="465" data-theme-id="0" data-default-tab="html,result" data-user="hiroyaiizuka" data-slug-hash="oVMqMJ" style="height: 465px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Here Comes a Slime !">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/oVMqMJ/">
  Here Comes a Slime !</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. 参考文献
[公式DOC](https://micku7zu.github.io/vanilla-tilt.js/)
[3D Box | Tilt Effect using hover3d.js | CSS - JavaScript Tutorial](https://www.youtube.com/watch?v=D0Dud0TOMy8)
[3D Tilt Mouse Move Effect using Tilt.js](https://www.youtube.com/watch?v=RIhLE8dPVvU)
[Animated card with Vanilla-tilt.js](https://codepen.io/pierrinho/pen/WZyjzw)

#3. 分解してみる


##Vanilla - Tilt.js とは

カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、視差効果により立体感を作り出すことができるJavaScriptの軽量ライブラリです。

60fps を実現し、かなり滑らかに簡単に作り出すことができるそうです。
このライブラリが使われた作品を見た当初、その凄さに度肝を抜かれました。

本日から数回にわたり、Tilt.js を使ってみたいと思います。


## 実践

❶.　まず、vanilla-tilt.js をインストールしましょう。

```
npm install vanilla-tilt
```
<br/>
❷.　次に、[vanilla-tilt CDN](https://cdnjs.com/libraries/vanilla-tilt) から、cdn のlink をコピペし、script タグの中に書きましょう。

![スクリーンショット 2019-03-19 15.40.24.png](https://qiita-image-store.s3.amazonaws.com/0/232715/ba67664b-88c1-81ed-8a4f-7f34c599c754.png)


```index.html
<body>
  
    ・・・

 <script　src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.6.1/vanilla-tilt.js">
 </script>
</body>
</html>
```
<br/>
❸.　div やimg 要素などに、data-tilt と入れましょう。

```index.html
<body>
  
 <div class="〜" data-tilt></div>

 <script　src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.6.1/vanilla-tilt.js">
 </script>
</body>
</html>
```
<br/>
❹.　option を考えましょう。
「data - tilt - __パラメーター__」  と、要素の中に書いていきます。

どんな option があるかについては、[公式DOC](https://micku7zu.github.io/vanilla-tilt.js/) を抜粋します。

![スクリーンショット 2019-03-19 15.56.31 (1).png](https://qiita-image-store.s3.amazonaws.com/0/232715/925b0eb3-aa97-f908-e34f-6088fda89a0d.png)

```ex
 <div
        class="~"
        data-tilt
        data-tilt-max="50"
        data-tilt-speed="400"
        data-tilt-perspective="500"
 >
     ・・・・
 </div>
```
<br/>
❺.
では、ここまでをマークアップしましょう。

```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="background"
        data-tilt
        data-tilt-max="50"
        data-tilt-speed="400"
        data-tilt-perspective="500"
      >
        <img src="https://dl.dropbox.com/s/4f8xub814why1k6/slime.png?dl=0" />
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.6.1/vanilla-tilt.js"></script>
  </body>
</html>
```

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

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, #16222a, #3a6073);
}

img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 25%;
  left: 25%;
}
```

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

hover で動くことが確認できます。
こんなに簡単にできるなんて、Tilt.js おそるべしです。。
<br/>
❻.
以前の[記事](https://qiita.com/duka/items/c05fc7b9bd102b7ee139) の通り、3Dに必須な、perspective と、preserve-3d を親要素(background クラス)に実装し、スライムをより立体的にしましょう。
perspectiveの値は、❹で設定した値と同じにします。

```styles.scss

.background {


  transform-style: preserve-3d;
  transform: perspective(500px);
}
```

そして、最後に
スライムをZ軸方向に動かします。
ああ、Z軸のこの動き、なんて魅力的なんだ・・・

```styles.scss

img {
  
  transform: translateZ(50px);
}
```

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


完成しました。スライム飛び出てます。
このライブラリーは軽量ですし、面白く魅力的な表現を作ることができますね。

それでは、また明日〜