Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ2014年上半期、チェックしておきたいUIデザインをDribbbleから紹介します。 各アートワークは大きいサイズの画像やPSDをダウンロードできるので、気になったものはリンク先をチェックしてみてください。 アートワークにはアニメーションgifも多いのですが、ページサイズが大変なことになるため最初の一つだけです、アニメーションはリンク先で。
[JS]アニメーションgifにスタートとストップ機能をつけられるスクリプト -gifplayer
アニメーションgifは画像が表示されるとすぐにアニメーションが動き出しますが、それらのアニメーションgifにスタートとストップ機能をつけられるjQueryのプラグインを紹介します。 スタートをクリックしてからアニメーションgifをロードするので、ページの軽量化にもなる優れものです。 gifplayer gifplayer -GitHub gifplayerのデモ gifplayerの使い方 gifplayerのデモ デモでは、アニメーションgifの画像にオーバーレイで「gif」と表示されており、クリックするとアニメーションgifが再生されます。 再生中にアニメーションgifをクリックすると、ストップします。 gifplayer: demo 「gif」ボタンのとこには、三角アイコンや「再生」ボタンでもよさそうですね。 gifplayerの使い方 Step 1: 外部ファイル jquery.j
[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS
デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。 各パネルをマウスでホバーすると、くるっとします。 Fun with CSS 回転のアニメーションは、左上から順に。 垂直：下方向 垂直：上方向 水平：右方向 水平：左方向 垂直：下方向：半回転 斜め パネルはべた塗りだけでなく、写真画像でももちろん動作します。 Fun with CSS：ネコの画像でもくるっと回転 HTMLはシンプルで、各パネルはdiv要素です。 <div class="front"> <h2>Front</h2> This is on front. </div> スタイルシートはちょっと長いので、下記ページをご覧ください。 Fun with CSSのコード
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
