Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
要素内やページ内でのスクロールに応じてプログレスバーを表示する軽量シンプルなスクリプト・「PrognRoll」
PrognRollはページやスクロールが可能なコンテナ内でのスクロールに応じてプログレスバーを表示するスクリプトです。ただそれだけのシンプルなもので、サイズも2kb以下、圧縮すれば1kb以下と軽量です・・が、jquery依存なので軽量と言っていいか迷う所です。上動作サンプルは分かりやすいようにバーの太さを太めに設定しました。少し前に「この記事は～分で読めます」といった類のコンテンツ消化時間の明示が良く見かけられましたが、それと似たような目的じゃないかと思います。 PrognRoll
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
multiscroll.js - split multi-scrolling pages plugin
Powerful jQuery plugin Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 11. <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Section 1 left</div> <div class="ms-section">Section 2 left</div> <div class="ms-section">Section 3 left</div> </div> <div class="ms-right"> <div class="ms-section">Section 1 righ
Medium-Style Page Transition | Codrops
An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out. Medium, a blogging platform which has gained popularity over the past several months, has one of the smoothest, most polished us
ページ内の特定の要素を目次として生成出来るjQueryプラグイン・MagicNav.js
良さ気なプラグインだったので 備忘録。ページ内の特定の要素 を指定すると、その要素を目次 として生成出来る、というjQuery のプラグインです。長文のブロ グを書く方は楽できるのでは。 ページ内の要素・・多分指定する要素はh2とかh3になると思いますが、これらを目次として生成出来る、というもの。 動作サンプルです。指定箇所にナビゲーションが生成されています。 コード<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script>jQueryとプラグインを読み込みます。 var magicNav = $.MagicNav( $('.foo'), $('.bar'), {titles:'hoge'} );見出しを作る要素と
ページデザインの各エレメントのスペックを1クリックで表示するFireworksの機能拡張 -Specctr
メンバーへの指示書、自分の確認、ガイドラインの作成に役立つ、各エレメントのサイズやフォント・カラーなどのスペックをクリック一つで自動表示するFirewoks用の機能拡張を紹介します。 Specctr [ad#ad-2] Specctrの使用感 Specctrのダウンロード Specctrの使用感 Specctr Liteをインストールしてみたので、キャプチャと共に使用方法を紹介します。 メニューの[ウインドウ]からSpecctrを起動します。 Specctrを起動 Specctr Liteでは2種類のスペックを表示できます。 「SPEC」の「Width/Height」ボタンをクリックすると、エレメントの幅と高さのスペックを表示します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで処理されるタイミング 【div箱の高さが取得できない！の原因１】
Paper Slider Demo - html5beta.com