CSS animation day 57 となりました。
前回に続き、本日もTilt.js を触っていきます。

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

#1. 完成版

See the Pen Hello! My name is ... by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. 参考文献
3D Tilt Hover Effects
3D Box | Tilt Effect using hover3d.js | CSS - JavaScript Tutorial
Tilt.js 公式DOC

#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);
}

画像を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;
}

See the Pen Hello My name is... (experimental) by hiroya iizuka (@hiroyaiizuka) on CodePen.

いい感じです。
文字が浮かび上がるデザインは、人を魅了させますね。

❸.
前回登場した、うねうねテクニックを使い、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%;
  }
}

See the Pen Hello! My name is ... by hiroya iizuka (@hiroyaiizuka) on CodePen.

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

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

それでは、また明日〜