CSS animation day36 となりました。
毎日記事を投稿しているせいで、画像アップロードの上限(100MB月)になってしまいました。大変申し訳ないのですが、画像は極力抑えて、codesandobox で随時貼り付けてお届けいたします。
本日は、
パララックスによる奥域表現をしたいと思います。
1. 完成版
See the Pen World Parallax by hiroya iizuka (@hiroyaiizuka) on CodePen.
2. なぜか？
やっぱり男にとって、Z軸は憧れの対象だと思います。
WebGL とかthree.js とかを使いこなしている人は、羨望の対象でしかありません。かっこいいです、本当に。
今までのパララックスは、Y軸方向にちょこちょこ動かすことによって、視差効果を出しておりました。が、所詮2Dレベルの表現です。
今回は、少しでも3Dレベルに近づくため、Z軸に挑戦をします。
3. 参考文献
beercamp
magic leap
Mask Text Hover Effect | CSS Tutorial
4. 分解してみる
❶.
マークアップしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="bgimg"></div>
<div class="text">
Hello World
</div>
</div>
</body>
</html>
body {
background: #fff;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
background-image: url("../img/starnight.png");
background-size: 100% 100%;
background-position: center;
}
.text {
height: 100vh;
width: 100%;
font-size: 170px;
text-align: center;
line-height: 200px;
margin: 100px auto;
}
これで、背景画像の上に、Hello World と乗っただけの、静止画ができます。
以前ご紹介したテクニック
→text の中に、background-clip: text で、画像を文字の背景に出します。
.text {
height: 100vh;
width: 100%;
font-size: 170px;
text-align: center;
line-height: 200px;
margin: 100px auto;
background-image: url("../img/starnight.png");
background-size: 100% 100%;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
これで、text に背景画像が適応されます。(画像容量制限でアップできなくてすみません。)
❷.
アニメーションをつけましょう。
背景画像を大きくしたり小さくしたりすることで、Z軸方向の遠近感を出します。
.text {
height: 100vh;
width: 100%;
font-size: 150px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: 250px;
background-image: url("../img/starnight.png");
background-size: 100% 100%;
-webkit-background-clip: text;
color: transparent;
animation: move 8s ease-in-out infinite;
}
@keyframes move {
50% {
background-size: 50% 50%;
}
}
See the Pen Hello World by hiroya iizuka (@hiroyaiizuka) on CodePen.
文字の中身が背景と連動して動くようになりました。
❸.
パララックスは視差効果なので、もう一つ、真逆な動きを取り入れましょう。
文字の中の背景画像は小さくなったので、今度は、.bgimg クラスの背景画像を、逆に大きくしましょう。rotateY180 で逆に配置すると、より素敵です。(Youtubeのアイデアを参考にしてます。)
body {
background: #fff;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.bgimg {
width: 100vw;
height: 100vh;
background-image: url("../img/starnight.png");
background-size: 100% 100%;
background-position: center;
transform: rotateY(180deg);
animation: move2 8s ease-in-out infinite;
}
.text {
height: 100vh;
width: 100%;
font-size: 150px;
letter-spacing: 10px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: 250px;
background-image: url("../img/starnight.png");
background-size: 100% 100%;
background-position: center;
-webkit-background-clip: text;
color: transparent;
animation: move 8s ease-in-out infinite;
}
@keyframes move {
50% {
background-size: 50% 50%;
}
}
@keyframes move2 {
50% {
background-size: 150% 150%;
}
}
See the Pen World Parallax by hiroya iizuka (@hiroyaiizuka) on CodePen.
できました！
このように、パララックス = 視差効果を利用して、2つの物体を逆に動かすことで、奥域が生まれます。面白い効果ですね。
早く、画像アップロード制限が解除されることを祈るばかりです。
それでは、また明日〜