CSS animation day31 となりました。
本日から数回にわたり、実際にホームページやアプリで使える、microinteractionをやっていきます。まずは、user に scroll を促す、地味のめ矢印のアニメーションを作ります。
1. 完成版
See the Pen Scroll Arrow by hiroya iizuka (@hiroyaiizuka) on CodePen.
2. なぜか？
うまく取り入れられた、microinteraction はuser に快適な体験を与えます。
Google のマテリアルデザインの記事によると、
ユーザーが重要な何かにアクションをする必要がある時は、アニメーションによって注目を集めるようにします。最初は繊細なアニメーションから始め、アクションの重要度に応じて強度（カラー・サイズ・スピード）を増やします。
とのことです。
注意点として、microinteraction という言葉の通り、派手すぎたり複雑すぎると、busy な印象を与えかねません。techAcademy の記事によると、単一の統一されたアニメーションがbetter とのことです。
前回 の記事も合わせてご参照ください。
3. 参考文献
Css Scroll Indicator Animation - Pure Css3 Animation Effect | Falling Arrow 1
Falling Arrow 2 | CSS Scroll Down Indicator Animation Effects
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="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #000;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
では、どうやって arrow を作るでしょうか？
border を利用してみます。
.arrow {
width: 40px;
height: 40px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
こいつを、rotate しましょう。
.arrow {
width: 40px;
height: 40px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(-45deg);
}
右向きの矢印になりました！
ただし、横スクロールは このスマホ時代UXを損なう(UX MILK) 可能性があり、一般的な、縦スクロールの矢印にしたいと思います。
・・・
では、どうすれば縦向きの矢印になるでしょうか？
さっきのcssを、transform: rotate(90deg) に変えましょう。
・・・
ダメですね。
今、一つ一つの矢印は、display: flex のデフォルト設定 (flex-direction: row) の影響 で、横に並んでます。これを縦に並ぶように変更しましょう。
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.arrow {
width: 40px;
height: 40px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
}
flex-direction: column で、要素が上から下に配置され、完成しました。
❷.
アニメーションを設定しましょう。
どんなアニメーションにするかは、以下の3つを組み合わせます。
1: 明るさが変化する。
2: 1個1個の矢印が動くタイミングがちょっとずつずれる
3: 矢印が下に動く
順に実装していきましょう。
まず、明るさの変化を変えます。
.arrow {
width: 40px;
height: 40px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
animation: move 2s infinite;
}
@keyframes move {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
OKです。
次にタイミングをちょっとずらしましょう。
Scssを使います。
@for $i from 1 through 3 {
.arrow:nth-child(#{$i}) {
animation-delay: 0.15 * $i + s;
}
}
Good です。
scss のループ文について忘れてしまった方は、以前 の記事をご参照ください。
最後に、各々の矢印を動かしましょう。
@keyframes move {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(40px) rotate(45deg);
}
}
❸.
最後に表現力を上げるために、微調整します。
margin を小さくして、矢印を近づけ、animation-delay は2番目の矢印からかかるようにしましょう。
.arrow {
width: 40px;
height: 40px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
animation: move 1.3s infinite;
margin: -3px;
}
@for $i from 1 through 2 {
.arrow:nth-child(#{$i + 1}) {
animation-delay: 0.15 * $i + s;
}
}
@keyframes move {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(40px) rotate(45deg);
}
}
完成しました！
わかりやすい、microinteraction ですね、こちらのコードはぜひご自由にお使いください。
それでは、また明日〜