CSS animation day29 となりました。
前回 の作品では、border を使って、skewを表現しました。
本日は、もうちょっと表現力を上げていこうと思います。
#1. 完成版
See the Pen Sunset skew animation by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. 参考文献
Animated Skewed Pane
collis
#3. 分解してみる
❶.
マークアップしましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="skew_image">
<div></div>
</div>
</body>
</html>
styles.css
body {
padding: 0;
margin: 0;
}
.skew_image {
width: 100vw;
height: 100vh;
background-image: url("../img/sunset.png");
background-position: center center;
background-size: cover;
position: relative;
}
綺麗ですね。
❷.
次に、skew_image を設定していきます。
styles.css
.skew_image {
width: 100vw;
height: 100vh;
background-image: url("../img/sunset.png");
background-position: center center;
background-size: cover;
position: relative;
}
.skew_image > div {
overflow: hidden;
position: absolute;
top: 0;
left: 500px;
width: 200px;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
transform: translate3d(0, 0, 0) skew(15deg, 0);
}
いい感じです。
もう一つ、skew の画像を作り、filter などを駆使して表現を出しましょう。
index.html
<body>
<div class="skew_image">
<div class="skew"></div>
<div class="skew2"></div>
</div>
</body>
styles.css
.skew {
position: absolute;
top: 0;
left: 450px;
width: 800px;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
transform: translate3d(0, 0, 0) skew(35deg, 0);
}
.skew2 {
position: absolute;
top: 0;
left: 150px;
width: 200px;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
transform: translate3d(0, 0, 0) skew(-15deg, 0);
}
いい感じですね。
❸.
もうちょっとこだわっていきます。
今回のskew image は、ただ単に、薄い透明の色を上のりしただけですが、同じ背景画像をrendering して、ここにfilter やアニメーションをつけてみましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="skew_image">
<div class="skew"></div>
</div>
</body>
</html>
styles.css
.skew {
position: absolute;
top: 0;
left: 530px;
}
.skew:before {
background-image: url("../img/sunset.png");
background-position: center center;
background-size: cover;
content: "";
display: block;
position: relative;
width: 200px;
height: 100vh;
transform: translate3d(0, 0, 0) skew(-15deg, 0);
}
不思議な感じですね。
ガラスのような一部切り取られたような表現ができます。
❹.
では、ここからがアニメーションです。
まずは、下の失敗作のGIF画像をご覧ください。
切り取られた平行四辺形が移動するのに、中の画像は変わってません。この問題を解決するには、どうしたら良いでしょうか？
そういう時は、課題を切り分けてみましょう。アニメーションは、以下の2つに分類されます！
- 平行四辺形が横に移動するアニメーション
- 背景画像が、横に移動するアニメーション
1,2 の移動速度が同じであれば、この問題を解決できそうです。早速、1. から取り組んでいきましょう。
styles.css
body {
padding: 0;
margin: 0;
}
.skew_image {
width: 100vw;
height: 100vh;
overflow: hidden;
background-image: url("../img/sunset.png");
background-position: center center;
background-size: cover;
position: relative;
}
.skew {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 400px;
overflow: hidden;
background: slategrey;
animation: skewShift1 15s infinite;
}
@keyframes skewShift1 {
0% {
transform: translate3d(0, 0, 0) skew(15deg, 0);
}
50% {
transform: translate3d(800px, 0, 0) skew(15deg, 0);
width: 400px;
}
100% {
transform: translate3d(0, 0, 0) skew(15deg, 0);
}
}
いい感じです。
では、次に平行四辺形の中の画像を移動させましょう。
擬似要素のbefore クラスがぴったりです！
styles.css
.skew:before {
background-image: url("../img/sunset.png");
background-position: center center;
background-size: cover;
content: "";
display: block;
position: relative;
width: 100vw;
height: 100vh;
animation: skewBgShift1 15s infinite;
}
@keyframes skewBgShift1 {
0% {
transform: translate3d(0, 0, 0) skew(-15deg, 0);
}
50% {
transform: translate3d(-800px, 0, 0) skew(-15deg, 0);
}
100% {
transform: translate3d(0, 0, 0) skew(-15deg, 0);
}
}
できました！
ここで、注意点は以下の2つです。
1: img はインライン要素なので、画像のheightやwidthを指定する時に、display: block を忘れないようにしましょう。
2: 画像は平行四辺形と逆のX 軸方向に動かしましょう。
なお、上のGIF画像のように、ぴったりサイズ合わせるのではなく、ブラーを外しあえて少し位置をずらすことで、光の屈折のような感じを与え、ガラスのようなデザインを作ることができます。
scale を大きくして、ちょっと背景の位置をずらしましょう。
styles.scss
@keyframes skewBgShift1 {
0% {
transform: translate3d(0, 0, 0) scale(1.2) skew(-15deg, 0);
}
50% {
transform: translate3d(-800px, 0, 0) scale(1.2) skew(-15deg, 0);
}
100% {
transform: translate3d(0, 0, 0) scale(1.2)
skew(-15deg, 0);
}
}
Great ですね！
❺.
2つ作り、組み合わせ完成です。一気にやりましょう！
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="skew_image">
<div class="skew"></div>
<div class="skew2"></div>
</div>
</body>
</html>
styles.css
.skew {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
width: 200px;
animation: skewShift1 10s infinite;
}
.skew2 {
position: absolute;
top: 0;
left: 600;
bottom: 0;
overflow: hidden;
width: 200px;
animation: skewShift2 15s infinite;
}
.skew:before {
background-image: url("../img/sunset.png");
background-position: center center;
background-size: cover;
content: "";
display: block;
position: relative;
width: 100vw;
height: 100vh;
animation: skewBgShift1 10s infinite;
}
.skew2:before {
background-image: url("../img/sunset.png");
background-position: center center;
background-size: cover;
content: "";
display: block;
position: relative;
width: 100vw;
height: 100vh;
animation: skewBgShift2 15s infinite;
filter: grayscale(100%) blur(10px);
}
@keyframes skewShift1 {
0% {
transform: translate3d(0, 0, 0) skew(15deg, 0);
}
50% {
transform: translate3d(800px, 0, 0) skew(15deg, 0);
width: 400px;
}
100% {
transform: translate3d(0, 0, 0) skew(15deg, 0);
}
}
@keyframes skewShift2 {
0% {
transform: translate3d(800px, 0, 0) skew(-10deg, 0);
}
50% {
transform: translate3d(0px, 0, 0) skew(-10deg, 0);
}
100% {
transform: translate3d(800px, 0, 0) skew(-10deg, 0);
}
}
@keyframes skewBgShift1 {
0% {
transform: translate3d(0, 0, 0) scale(1.2) skew(-15deg, 0);
}
50% {
transform: translate3d(-800px, 0, 0) scale(1.2) skew(-15deg, 0);
}
100% {
transform: translate3d(0, 0, 0) scale(1.2) skew(-15deg, 0);
}
}
@keyframes skewBgShift2 {
0% {
transform: translate3d(-800px, 0, 0) scale(1.2) skew(-10deg, 0);
}
50% {
transform: translate3d(0px, 0, 0) scale(1.2) skew(-10deg, 0);
}
100% {
transform: translate3d(-800px, 0, 0) scale(1.2) skew(-10deg, 0);
}
}
できました！
skew と、blur で、こんなに面白いアニメーションになるんですね。それでは、また明日〜