CSS animation で遊び倒す - Tilt.js 自己紹介-

CSS animation day 57 となりました。
[前回](https://qiita.com/duka/items/c7cc5db6b37bf064da95) に続き、本日もTilt.js を触っていきます。

hover すると、文字が浮き出てくる、自己紹介 Card を作りましょう。


#1. 完成版

<p class="codepen" data-height="598" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="rRZrgY" style="height: 598px; 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! My name is ...">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/rRZrgY/">
  Hello! My name is ...</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. 参考文献
[3D Tilt Hover Effects ](https://www.youtube.com/watch?v=TXVcSNTFzyk&t=80s)
[3D Box | Tilt Effect using hover3d.js | CSS - JavaScript Tutorial](https://www.youtube.com/watch?v=D0Dud0TOMy8)
[Tilt.js 公式DOC](https://micku7zu.github.io/vanilla-tilt.js/)

#3. 分解してみる

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


```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-scale="1.1"
        data-tilt-max="30"
        data-tilt-speed="400"
        data-tilt-perspective="500"
        data-tilt-glare
        data-tilt-max-glare="0.3"
      >
        <div class="card"></div>
      </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: 350px;
  background: url("../img/duka.png");
  background-size: 100% 100%;
  transform-style: preserve-3d;
  transform: perspective(500px);
}
```

![スクリーンショット 2019-03-20 10.38.09.png](https://qiita-image-store.s3.amazonaws.com/0/232715/833977fa-343a-2738-d00a-766cd1d1e6cc.png)

画像をHoverすると、うねうね、動くようになりました。
なお、こちらは、スピカあやかさん(@spicagraph) に作成して頂きました。可愛いですね。

プロフィールを載せます。

```index.html
    <div class="card">
          <div class="content">
            <p>My name is</p>
            <h2>Hiroya Iizuka.</h2>
            <p>Doctor/Engineer</p>

          <div class="work">
            <a href="https://spaantibioticsoon.firebaseapp.com/">My Works</a>
          </div>
          </div>
    </div>
```

```styles.scss

.card {
  position: absolute;
  margin-top: -30px;
  margin-left: 250px;
  width: 200px;
  height: 200px;
  position: relative;
  transform: translateZ(80px);
}

.content {
  padding-top: 50px;
  text-align: center;
  width: 300px;
  height: 300px;
}


h2 {
  font-size: 36px;
}
```

<p class="codepen" data-height="545" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="GeXGLd" style="height: 545px; 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 My name is... (experimental)">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/GeXGLd/">
  Hello My name is... (experimental)</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/>
❸.
[前回](https://qiita.com/duka/items/0c6b5182b64237f83bc9) 登場した、うねうねテクニック を使い、My Works にアレンジを加えましょう。


```styles.scss

a {
  text-decoration: none;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.work {
  width: 150px;
  height: 150px;
  background: url("https://dl.dropbox.com/s/bl199wqxqpzmeop/star.png?dl=0");
  background-size: cover;
  background-position: bottom;
  clip-path: circle(50% at 50% 50%);
  border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
  transform: translateX(250px);
  animation: move 8s linear infinite;
}

@keyframes move {
  50% {
    border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%;
  }

  75% {
    border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%;
  }
}
```


<p class="codepen" data-height="598" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="rRZrgY" style="height: 598px; 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! My name is ...">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/rRZrgY/">
  Hello! My name is ...</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>


綺麗な星空をうねうねすることができました。

私のデザイン力はこんなもんでしょぼいですが、Tilt.js をもっと効果的に使うと非常に創造性あふれる作品ができますね。

それでは、また明日〜