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. 分解してみる
❶.
マークアップしましょう。
<!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>
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) に作成して頂きました。可愛いですね。
プロフィールを載せます。
<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>
.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 にアレンジを加えましょう。
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 をもっと効果的に使うと非常に創造性あふれる作品ができますね。
それでは、また明日〜