アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう! Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい

Some More Inspiration forText Input Effects | Codrops テキスト欄にフォーカスが移動した際のアニメーションをありえないぐらい集めたサンプル集。 テキスト入力欄にフォーカスがあたるとラベルがアニメーションしたりといったエフェクトは最近の流行りですが、新しいエフェクトが満載のサンプル集が公開されています。 とにかく一度見ておけばネタとして使うことができそうです。 サイトに実装されたフォームがこんな感じになっていたら、一般の人は驚くと共に、プロが見ても新しい技術を積極的に使っているということでよい印象が得られるのかも。 関連エントリ ドラッグ&ドロップにまつまるUIデザインのアイデア集 汎用iOS8用アプリアイコン30個セット「Jellycons iOS 8 App Icon Set」
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ:ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHubAppleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、

マイクロソフト・シンガポールがAnime Festival Asia (AFA) 2013のために作成したアニメーションがYouTubeのIE公式アカウントで公開されており、登場する擬人化されたIEの名前は「藍澤 祈(あいざわ いのり)」となっています。そもそもの発端としてはWindows 8.1リリース時にIE11になったのに合わせて、IEが変身してさらにモダンになったよ!というようなイメージも兼ねて制作されたものとなっており、マイクロソフト・シンガポール内の日本アニメ大好き野郎どもが全力で愛を注いで作ったそうです。 Anime Festival Asia Special Video - feat. InoriAizawa - YouTube 月の浮かぶどこかの廃墟 息を切らせて走って逃げる少女 廃墟のディテールはどこかで見たことがあるようなものがいっぱい 走って逃げ続けるものの……

あらすじ 舞台は少し未来のプラウド―― 就職を機に一人暮らしを始めた社会人2年生の岡村アヤ、通称「あーちゃん」。 お母さんは医師の仕事で海外に赴任し、今はお父さんと猫のミーさんだけでプラウドに住んでいる。 お父さんはひとり暮らしを始めたあーちゃんをいつも気かけているが、二人の間には微妙な距離が。 そしてあーちゃんが幼い頃にやってきた猫のミーさんは、今ではすっかり歳老いて...。 ある日の夜、仕事で疲れた体をベッドに横たえ、目を閉じるあーちゃん。 三人で過ごした楽しい日々、お母さんが海外に行く寂しさ、そして慰めてくれたミーさんの姿。――次々と過去の思い出が頭の中をかけめぐる。 そんな中、一本の電話が......。 あーちゃんと家族が織りなすストーリーを美しいアニメーションで表現したショートムービー。 「時を超えても、家族の絆をより深く美しく包み込む」という、 未来に向けてのプラウドのメッセー
12月3日、4日と2日間に渡り開催された世界の第一線で活躍するクリエイター、アーティストが集まるイベント「FITC Tokyo 2011」に潜入してきた。本稿では、このイベントを前後編に分けてレポートする。 FITCはカナダ/トロントをベースに世界11カ国で開催されている世界規模のイベント。日本での開催は第3回目であり、初の2日間開催となる。ちなみに筆者は実は日本に初めてFITCを持って来た超本人で、今回は縁あってレポーターとしてイベントに参加するということで胸躍らせながら開催地である新宿コクーンシアターに向かった。 1日目のプログラムはAdobeエバンジェリストによるFlash/HTML5最新動向を皮切りに、Flashアニメーターポエ山氏、マーカーレスAR技術を紹介するロシアのエンジニア、日本を代表するクリエイター中村勇吾氏やWebエンジニアMr.DOOBらを招いたCBCNET栗田氏のモ
今さらながらCSSAnimationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。CSSAnimations Editor’s Draft 25 July 2011CSSanimations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSSAnimations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla DeveloperNetwork』のドキュメントです。日本語版も

1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く