これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
プレビューで簡単！CSSアニメーションがブラウザ上で作れる「animista」
Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション実装で
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
2015年11月時点。マテリアルデザインのアニメーション情報のまとめ。サンプル集付き。 - webhack / 猫とウェブ技術が好き
2015-11-09 2015年11月時点。マテリアルデザインのアニメーション情報のまとめ。サンプル集付き。 ウェブデザイン レスポンシブデザイン マテリアルデザイン Photo credit: Gattou - Lucie Provencherいま流行中のマテリアルデザインの肝は？と聞かれるとやっぱりアニメーションですよね。シンプルなアニメーションによってユーザーインターフェイスの意図が伝わり易くなります。マテリアルデザインで使われるアニメーションについてのパターンや情報がまとまっているページが見当たらなかったのでこの記事にずらーっとまとめて行きます。 Dribbbleでマテリアル＋アニメーションで検索 Dribbbleで検索すると良質なサンプルがたくさん見つかります。dribbble.com dribbble.com dribbble.com dribbble.com drib
Subtly Animated Material Design
The design community has been inspired by Material Design. Discover how designers have begun to create subtly animated UI examples. At their I/O conference in 2016, Google announced their exciting new visual language Material Design, a concept based on great visual design combined with cutting-edge technology in order to create a unified experience on both mobile and desktop. I’m not going to anal
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
Ajaxian » Animation with Continuations
Enterprise Strategy Group: Go-to-market Expertise to Help You Win
JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」:phpspot開発日誌
JAVASCRIPT MOTION TWEEN JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」の紹介。 デモサイト、解説ページを見てみてください。これまで見たことがないJavaScriptアニメーション表現を見ることが出来ます。 次のようなTweenクラスがあって、それを使うことでこういったアニメーションが実現できるということかなり便利そう。 var t = new Tween(object,property,easing,start,end,duration,suffixe); 次のJavaScriptソースコードが提供されています。 Tween.js 、ColorTween.js 、OpacityTween.js 、TextTween.js 、Sequence.js 、Parallel.js 名前を見るとなんとなく分かりますが、必要に応じてファイルを
Script.aculo.usにモーフィング機能が登場 | SIMPLE*SIMPLE
Javascriptでさまざまな効果を実現できるscript.aculo.usがバージョンアップ。今回の目玉は「モーフィング」。指定したエレメントをぐーっと変形させていくことができます。 といっても、見るまでわからないと思うので下記ページのデモをどうぞ。 » モーフィングデモページ （すげぇ・・・） script.aculo.usには他にもいろいろな効果がありますね。なにかサービスをつくるときには参考にされてみてはいかがでしょうかね。 しかしscript.aculo.usには二つの問題がありますね・・。 サイトが激重い・・・。 なんて発音するのかいまだにわからない。 » script.aculo.us公式ページ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
