CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオンラインサービスを紹介します。 こういったコード生成は探せば見つかるかもしれませんが、まとまってると便利ですね。
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい~んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ:Demo 3 In: bounceIn, Out: bounceOut a
はじめに こんにちはー!! UI設計やってますか? 今回は「ペーパープロトタイピング」の話。 アプリでは主流になってる現場も少なくないですよね! 今までのやり方とペーパープロトタイピングの違いや、 プロトタイピングツール「POP」と「Prott」の比較の話なんかをしようと思います! 今までのアプリUI設計 Webデザインと同じ方法でアプリ設計を行っている場合、手順は ●ワイヤフレーム→モックアップ→実装 厳密に言うと ●①ヒアリング→②ワイヤフレーム→③レビュー→④モックアップ→⑤レビュー→⑥実装→⑦レビュー デザイナーがいないと ●①ヒアリング→②ExcelでUI設計→③レビュー→④実装→⑤レビュー って場合も結構多いと思います。 これ結構時間かかりますよね~。 しかも! 大抵の場合、実装後のレビューの段階(つまり最終段階)で 「やっぱここ動きおかしいよね!直せる?」 「・・・。(えー!
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
あらすじ 舞台は少し未来のプラウド―― 就職を機に一人暮らしを始めた社会人2年生の岡村アヤ、通称「あーちゃん」。 お母さんは医師の仕事で海外に赴任し、今はお父さんと猫のミーさんだけでプラウドに住んでいる。 お父さんはひとり暮らしを始めたあーちゃんをいつも気かけているが、二人の間には微妙な距離が。 そしてあーちゃんが幼い頃にやってきた猫のミーさんは、今ではすっかり歳老いて...。 ある日の夜、仕事で疲れた体をベッドに横たえ、目を閉じるあーちゃん。 三人で過ごした楽しい日々、お母さんが海外に行く寂しさ、そして慰めてくれたミーさんの姿。――次々と過去の思い出が頭の中をかけめぐる。 そんな中、一本の電話が......。 あーちゃんと家族が織りなすストーリーを美しいアニメーションで表現したショートムービー。 「時を超えても、家族の絆をより深く美しく包み込む」という、 未来に向けてのプラウドのメッセー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く