UI研究:Amazon fireTVのボタンを真似て実装してみる

気になるUIをパクってみました!
以前、Amazon fireTVにすっかりハマってることを書きました。
ハマっている要因は、コンテンツが豊富なことはモチロンなんですが、
UIも良くて、使い勝手が気持ちいいところも気に入っています。
本記事では、HTMLとCSSを使って、
fireTVのボタンのUIを再現してみようと思います。
今回の題材「amazon fireTVの黄色いボタン」
本記事で再現するのは、こちらの動画の黄色いボタンです。
まずはこちらの動画をご覧ください。
上記動画の黄色いボタンの動きを分解すると、こんな感じです
- 黄色い大きな丸いボタンが表示される
- 黄色い丸が小さくなる
- 黄色い丸が少し大きくなり、矢印が表示される
- 黄色い丸が大きくなり、矢印が回転する
- クリックすると、黄色い丸が白くなり小さくなる。同時に矢印が消える。
HTML/CSS での実装
- mouseoverのとき
- 黄色い丸のサイズが変わる(大きくなり→その後小さくなり→そして原寸に戻る)
- 矢印が透明から表示され、同時に回転する
- ボタンをクリックしたとき
- 黄色い丸が白くなり、少し小さくなる
- 矢印が白っぽくなる
デモと合わせてご覧ください。
いざ、実装
それでは実装していきましょう。
<a href="#" class="amazon_video_btn"> <img src="img/allow_gray.png"> </a>
続いてCSSです。
まずはデフォルト時のCSS
/* ボタンの黄色背景部分 */ a.amazon_video_btn { display: block; /* ボタンのサイズ */ width: 160px; height: 160px; /* ホタンの背景画像 */ background-image: url(../img/yellow_circle.png); background-repeat: no-repeat; background-position: center; -webkit-background-size: 160px auto; background-size: 160px auto; } /* ボタンの矢印部分 */ a.amazon_video_btn img { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 33px; height: 39px; display: block; }
mouseover時のCSS
それではmouseover時のCSSを書いていきます。
アニメーションを加えたいのですが、
「大きくなり→その後小さくなり→そして原寸に戻る」
という3段階の動きなので、キーフレームという技術を使って実装してみます。
黄色の丸のアニメーションを指定。
/* ボタンにhoverした時のCSS*/ a.amazon_video_btn:hover { animation-duration: 0.5s; /* アニメーションの処理時間を設定*/ animation-name: size; /* 「size」というアニメーション名を付ける*/ } /* アニメーション名「size」の処理*/ @keyframes size { /* まずは大きくなる*/ 0% { background-size: 300px auto; width: 300px; height: 300px; opacity: 0; } /* 途中、小さくなる*/ 50% { -webkit-background-size: 40px auto; background-size: 40px auto; opacity: 1; } /* 最後はデフォルトと同じ大きさに*/ 100% { background-size: 160px auto; opacity: 1; } }
矢印画像のアニメーションを指定。
/* ボタンにhoverした時のCSS(矢印部分)*/ a.amazon_video_btn:hover img { animation-duration: 0.5s; animation-name: rotate; /* 「rotate」というアニメーション名を付ける*/ } /* アニメーション名「rotate」の処理*/ @keyframes rotate { /* まずは画像を非表示にする */ 0% { opacity: 0; } /* 画像を-100度回転させる */ 50% { opacity: 0; transform: rotate(-100deg); } /* 画像を0度に戻しながら、表示されるようにする */ 100% { opacity: 1; transform: rotate(0deg); } }
クリック時のCSS
最後にクリック時のCSSです。
背景画像の処理に「filter」を使用しています。
/* 黄色い背景部分 */ a.amazon_video_btn:active { filter: opacity(40%); /* ボタンの背景の透明度を上げて白っぽくする */ -webkit-background-size: 130px auto; /* ボタン背景のサイズを小さくする */ background-size: 130px auto; } /* 矢印画像 */ a.amazon_video_btn:active img { opacity: 0.2; }
以上です!
まとめ
今回のポイントは、
3段階アニメーションに使った「キーフレーム」と
背景画像処理に使った「filter」あたりでしょうか。
ずっとCSSアニメーションが来る!と言われてきて、
キーフレームの登場で随分とアニメーションが実装しやすくなりました。
今後もっと使いやすくなることでしょう。
最後にもう一度、デモへのリンクとCSSと貼り付けておきますね。
CSS
/* デフォルト ==============================================*/ /* ボタンの黄色背景部分 */ a.amazon_video_btn { display: block; /* ボタンのサイズ */ width: 160px; height: 160px; /* ホタンの背景画像 */ background-image: url(../img/yellow_circle.png); background-repeat: no-repeat; background-position: center; -webkit-background-size: 160px auto; background-size: 160px auto; } /* ボタンの矢印部分 */ a.amazon_video_btn img { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 33px; height: 39px; display: block; } /* mouseover時 ==============================================*/ /*== 黄色の背景部分 ==*/ /* ボタンにhoverした時のCSS*/ a.amazon_video_btn:hover { animation-duration: 0.5s; /* アニメーションの処理時間を設定*/ animation-name: size; /* 「size」というアニメーション名を付ける*/ } /* アニメーション名「size」の処理*/ @keyframes size { /* まずは大きくなる*/ 0% { background-size: 300px auto; width: 300px; height: 300px; opacity: 0; } /* 途中、小さくなる*/ 50% { -webkit-background-size: 40px auto; background-size: 40px auto; opacity: 1; } /* 最後はデフォルトと同じ大きさに*/ 100% { background-size: 160px auto; opacity: 1; } } /*== 矢印画像部分 ==*/ /* ボタンにhoverした時のCSS(矢印部分)*/ a.amazon_video_btn:hover img { animation-duration: 0.5s; animation-name: rotate; /* 「rotate」というアニメーション名を付ける*/ } /* アニメーション名「rotate」の処理*/ @keyframes rotate { /* まずは画像を非表示にする */ 0% { opacity: 0; } /* 画像を-100度回転させる */ 50% { opacity: 0; transform: rotate(-100deg); } /* 画像を0度に戻しながら、表示されるようにする */ 100% { opacity: 1; transform: rotate(0deg); } } /* クリック時 ======================================*/ /*== 黄色い背景部分 ==*/ a.amazon_video_btn:active { filter: opacity(40%); /* ボタンの背景の透明度を上げて白っぽくする */ -webkit-background-size: 130px auto; /* ボタン背景のサイズを小さくする */ background-size: 130px auto; } /*== 矢印画像 ==*/ a.amazon_video_btn:active img { opacity: 0.2; }