Webデザイン

Twitter Bootstrap向けのUIキットを複数配布する・PixelKit-Bootstrap-UI-Kits

Twitter Bootstrap向けのUIキットを配布するプロジェクトが素敵だったので備忘録。何種類か用意されており、どれもクオリティの高いものとなっています。

input要素のplaceholderをフォーカス時に上にアニメーション付きで押し出すスクリプト・jQuery Label Better

ちょっとかわいかったので備忘録。placeholderとは別にテキストを用意し、inputにフォーカスした際にポンッと押し上げる、というスクリプトです。jQueryに依存します。

一文字ずつテキストにアニメーションエフェクトを加えるスクリプト・funnyText.js

ユニークなスクリプトだったのでなんとなくメモ。一文字ずつエフェクトを加えてランダムに動かす、というもの。やりすぎるとアレですけどこれはこれで面白いですね。
Ads

コンテナのサイズに合わせて画像をフィットさせるスクリプト・imagefill.js

コンテナのサイズに合わせて自動的に画像をフィットさせる、というスクリプトのご紹介です。jQueryに依存しています。RWDなんかと相性良さそうですね。

好みのアイコンを選択して一括ダウンロード出来るSVGアイコンのライブラリー・iconmelon

可愛らしいデザインのSVGアイコンをダウンロード出来る、というWebサイトのご紹介。好みのアイコンを選択して一括でDLする事が出来ます。

Google Mapのカラー見本とコードをまとめている・Snazzy Maps

Google Mapのカラー見本と、変更する為のコードをまとめているWebサイト・Snazzy Mapsのご紹介です。Webデザインに合わせてGoogle Mapのデザインも変更しておきたいですね。

リッチなテーブルを実装する為のjQueryプラグイン・Open JS Grid

リッチーなテーブルを実装するjQueryプラグイン・Open JS Gridのご紹介です。大量のデータを扱うコンテンツ等で導入を検討したいですね。

画像を菱形状に並べるイメージギャラリーを実装するスクリプト・jquery.diamonds.js

以前よく見かけたタイプのイメージギャラリーを実装出来るスクリプトがあったのでメモ。菱形状に並べる、というものです。実用性は置いといて、素敵な見せ方ですね。

Bootstrap用の、ページ内の目次を生成するスクリプト・tocify.js

Twitter Bootstrap用の、目次生成スクリプト・tocify.jsのご紹介です。見出しを探し出して自動で目次を作る、みたいなやつ。実装も楽でユーザーにも優しい実装なのは素敵ですね。

input要素に入力パターンを組み込めるjQueryプラグイン・formatter.js

地味に便利そうだったのでメモ。input要素に入力パターンを組み込める、というスクリプトです。jQueryに依存しています。ユーザーの入力の補助によさそう。

contentEditable属性対応の、オートコンプリートでテキストや絵文字の入力を補完するライブラリ・At.js

オートコンプリートでテキストや絵文字等の入力を楽にしてくれる、というスクリプトです。以前紹介したものと被りますが、選択肢は多いほうがいいですね、という事でメモ。

ページ内の目次を自動生成するjQueryプラグイン・jQuery Jump To

ページ内の目次を自動生成する、というスクリプトのご紹介です。見出しを検出してページ内のナビゲーションを作成出来ます。冗長なページにはあると良さそうですね。

Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdown

Bootstrap向けのMarkdownエディタを実装出来る、というスクリプトのご紹介です。Markdown対応のエディタで、タグ保管機能も付いています。なかなか良さそうです。

CSSのテストを行うためのリソースをまとめている・csste.st

CSSのテストを行うためのリソースを収集、公開しているWebサイトがあったのでメモ。どのようにテストを行うか、なぜ行うか、ツールの紹介などなど。

フリップエフェクト付きのローディングインジケーターを実装するスクリプト・Flipload.js

フリップ(引っくり返す)エフェクト付きのローンディングインジケーターを実装する、というライブラリのご紹介です。目立つのでロード中というのをしっかり明示できそうです。

レスポンシブWebデザイン対応のグリッドレイアウト向けコンタクトフォームを構築する為のCSSフレームワーク・Grid Forms

RWD対応のグリッドレイアト向けフォームを作る為のCSSフレームワークのご紹介です。表題のとおり用途はある程度限定されますが、覚えておいて損は無さそうです。

画像内の部分的な明度を判定して、重ねたエレメントにclassを付与するライブラリ・BackgroundCheck

画像の中の明度を部分的に判定し、そこに重ねられたエレメントにそれぞれclassを与える、というライブラリのご紹介。技術的に面白かったので備忘録です。

複数ボックスを順に表示出来るモーダルウィンドウを実装するスクリプト・vex

複数の要素をモーダルウィンドウとして表示し、順に表示させる事が出来る、というスクリプト。うまく説明できませんので見てもらったほうが早そうですね・・

文章内の任意のテキストのみ、内容をアニメーション付きでローテーションさせるスクリプト・Simple Text Rotator

文章内のテキストをアニメーションエフェクト付きで別テキストに変更、ローテーションで回せるというスクリプト。利用シーンはある程度限られますが、訴求力の向上に役立ってくれるかもしれません。

任意のエレメントに、サイズに応じてclassの追加/削除をするスクリプト・Responsive elements

任意のエレメントに、画面サイズに合わせて特定のclassの追加/削除を行うスクリプト・Responsive elementsのご紹介です。特定の画面サイズになるとclassが付与されるので、そのclassを使ってCSSを書きます。

任意のテキストを、ユーザーがTwitterに投稿できるようにするスクリプト・jquery.tweetable.js

任意のテキストを、閲覧しているユーザーがTwitterに投稿できるようにする、というスクリプトのご紹介。jQuery依存ですが、プラグイン自体は軽量です。

textareaでオートコンプリート機能を実装するjQueryプラグイン・jQuery.textcomplete

textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。
Ads