これなら簡単!CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
Post on:2019年9月13日
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。
UI interactions
UI interactions -GitHub
UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。
UI interactionsの使い方
すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。
HTML
HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
1 |
<button class="ui-arrow-01"></button> |
CSS
CSSは、コピペで簡単に利用できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.ui-arrow-01 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; } .ui-arrow-01:before, .ui-arrow-01:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-01:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-arrow-01:after { right: 50%; margin-right: -25%; transform: rotate(45deg); } .ui-arrow-01:before, .ui-arrow-01:after { transition: transform 0.34s ease; } .ui-arrow-01.is-active:before { transform: rotate(45deg); } .ui-arrow-01.is-active:after { transform: rotate(-45deg); } |
UI interactionsのデモ
デモでは、ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを楽しめます。
まずは、アローの向きを上下に変えるインタラクション。
UI interactions: アローのインタラクション
ハンバーガーメニューは、6種類のインタラクションが用意されています。
UI interactions: ハンバーガーメニューのインタラクション
プラス「+」アイコンのインタラクション。
UI interactions: プラス アイコンのインタラクション
ボタンをクリック・タップすると、ローディングを表示するインタラクション。
UI interactions: ローディング ボタンのインタラクション
ボタンのオン・オフを切り替えるトグルのインタラクション。
UI interactions: トグル ボタンのインタラクション
トグルのインタラクションは、15種類用意されています。
UI interactions: トグル ボタンのインタラクション
sponsors