Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

パララックスサイトに導入したいスクロールプラグイン「panelSnap」

個人的にパララックスデザインなサイトは大好きだ。こういうプラグイン入ってるといいよね。panelSnap

LESS + jQueryで軽量なフロントエンドフレームワーク「UIkit」

なんか良さそうだったので、ご紹介。LESS + jQueryで軽量という特徴をもつフレームワーク。UIkit

プロジェクトに含まれるファイルツリーをグラフ化する「disc」

なんぞこれ!全く役に立たなそうだけど面白いのでご紹介。プロジェクトに含まれるファイルツリーをグラフで可視化するJavaScriptライブラリ。disc

ヒートマップが作れるJavaScriptライブラリ「Cal-HeatMap」

ほう、面白い。アクセス解析で有名になったヒートマップであるが、それを実装できるJavaScriptライブラリ。Cal-HeatMap

3Dなスライダーが実装できる「ImpulseSlider」

うまく使えばかっこいい効果だと思ったのでご紹介。3Dキューブのようにイメージをスライドさせるスライダー。ImpulseSlider

Goodbye Skype.という強烈なキャッチコピーのビデオチャット 「VMUX」

「Goodbye Skype.」というキャッチコピーがすごい。。VMUXはブラウザ上でビデオチャットが出来るオンラインサービス。VMUX

モバイルファースト!スマホに特化したタブを実装する「Tabby」

最近はどのプラグインもスマホのタッチ操作に対応するようになってきてとても助かる。このTabbyにおいても例外ではない。Tabby

レスポンシブなライトボックスを実装できる「flipLightBox」

ひとつ勉強したので、ご紹介。レスポンシブなライトボックスを実装できるjQueryプラグイン。flipLightBox

PSDファイルをHTMLに変換してくれるWebサービス「PSD2HTML」

ほぉー。これは便利そう。有料ではあるが、PhotoshopのPSDファイルをHTMLに変換してくれるWebサービス。PSD2HTML

軽量&シンプル!カスタマイズ前提のCMS「Anchor CMS」

面白いCMSがあったのでご紹介。軽量でシンプルなPHP&MySQLを使ったCMS。Anchor CMS

マウスオーバーで3Dデザイン化&サイドバーを表示する「Box Lid」

これはかっこいい。マウスオーバーで表示されるサイドバーが実装できるプラグイン。その特徴は3Dのような立体的な表示方法。Box Lid

1ページ内に複数のスクロールウィンドウを配置できる「jQuery.scrollpanel」

面白かったのでご紹介。1ページ内に複数のスクロールウィンドウを配置できるプラグイン。jQuery.scrollpanel

タブ切り替え時のアニメーションが心地よい「Tabulous.js」

非常にシンプルだが、アニメーションがいい感じだったのでご紹介。タブ切り替え時に動く複数のアニメーションパターンを実装するプラグイン。Tabulous.js

テキストエディタツールバーを実装する「popline」

あまり使い道が思い浮かばなかったのだが、面白かったのでご紹介。単語をダブルクリックするとそのテキストを編集するツールバーを表示させるプラグイン。popline

3Dキューブがくるくる回る斬新なUIの「HexaFlip」

これは面白い。配列として与えた文字や画像のデータを、くるくると回る3Dキューブ上に表示させるプラグイン。HexaFlip

スクロール幅に応じてヘッダーを切り替える「ON SCROLL HEADER EFFECTS」

おぉ!これはすごい。スクロールしていくと、その幅に応じてヘッダーを切り替えていくという仕組みが実装できる。ON SCROLL HEADER EFFECTS

前の分類に依存したselectタグを実装できる「jQuery Cascading Dropdown」

これは便利。フォーム画面などで大分類、中分類。。。と選ばせる仕組みはよくある。大分類で選んだoptionに基づいて、中分類のselectで表示させるoptionを変更させるという仕組み。それを実装できるプラグインがこちらです。jQuery Cascading Dropdown

フルスクリーンデザインにぴったりなスクロール機能を実装する「ScrollIt.js」

まぁこんなの自分でも実装できるけど、サクッと使えて便利そうなのでご紹介。クリックすると指定の箇所にアニメーションを伴ってスクロールする機能が実装出来るjQueryプラグイン。ScrollIt.js

とてもリアルな本を開くアニメーションを実現する「ANIMATED BOOKS」

CSS

うーん、これは面白い。本にマウスオーバーするとパラパラとページがめくれるアニメーションで本が開くという、まぁそれだけかよと言えばそれだけ。しかしとても凝っています。ANIMATED BOOKS

JavaScriptでもっと読む機能を実装する「ReadMore.js」

まぁそんな需要もあるのかな。JSでもっと読む機能が実装出来るjQueryプラグイン。ReadMore.js

マークダウン形式のドキュメントジェネレーター「DAUX.IO」

なんぞこれ。「.md」拡張子のマークダウンファイルを生成し、管理するドキュメントジェネレーターをご紹介。

画像サイズをレスポンシブ化させる「imagefill.js」

なかなか便利そうなのでご紹介。レスポンシブWebデザインは画面サイズに合わせたHTMLエレメントの配置を提供するものだが、「imagefill.js」を使えばHTMLエレメント自体を画面サイズに合わせて拡大、縮小させることができる。

アニメーションが心地よいギャラリープラグイン「S Gallery」

ギャラリー系のプラグインは数多くあるが、この「S Gallery」はアニメーションが最高に心地よい。S Gallery

フラットUIのフレームワーク「Furatto」

まだまだ流行っているフラットUI。僕はあのミニマルなデザインが好きで、そんなサイトに出会うと興奮する。という訳で、フラットUIの新しいフレームワークがリリースされていたのでご紹介。Furatto

step1,2,3...!ウィザード形式のフォームを実装する「jQuery Steps」

縦にやたら長いフォーム画面っていまだによくある。で、入力をミスると正しい部分も全部初期化されるなんていうイケてないフォームも。。。というわけでウィザード形式を取り入れたほうがスマートだ。jQuery Steps

軽量でレスポンシブ対応!フラットなデザインのフレームワーク「skel.js」

軽量でレスポンシブ対応、フラットなデザインもかっこいいフロントエンドフレームワーク。skel.js

フラットデザイン!CSS3を使ってWebサービスでよく見る料金表を作る方法

CSS

CSS3を使って有料のWebサービスなどでよく見る料金表を作る方法が載っていたのでご紹介。How to Create CSS3 Pricing Tables

レスポンシブルなオーディオプレイヤーが実装できる「AudioPlayer.js」

レスポンシブWebデザインに対応したオーディオプレイヤーを実装できるライブラリをご紹介。AudioPlayer.js

JSONをオシャレに編集、整形する「JSONmate」が素敵

これは面白い。オシャレなデザインのJSONエディタ&整形ツールをご紹介。JSONmate

グッドデザイン!iPhoneから家電の電源をON/OFFできる「WeMo」

家電の遠隔操作を実現する製品のデザインがとてもよいのでご紹介。WeMo