Noise of Web Programming

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

ブログを移転しました。

Tecuration.com

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

Javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

マウスオーバーで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

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

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

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

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

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

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

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

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

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

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

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

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

ドラッグ&ドロップOK!ajaxのファイルアップロードフォームの作り方

とてもかっこいいファイルアップロードフォームの作り方が書かれた記事を発見したのでご紹介。Mini AJAX File Upload Form

流行りのフルスクリーンWebデザインを簡単に実装できる「windows」

今流行りのフルスクリーンWebデザインを簡単に実装するJSライブラリをご紹介。windows

jQueryでファイルツリーが作れる「dynatree」

これはいつか使う機会がありそうということでご紹介。ファイルツリーを実装することの出来るjQueryプラグイン。dynatree

簡単に実装できるjQueryベースのWYSIWYGエディタ「jQuery TE」

簡単に実装できるシンプルなjQueryベースのWYSIWYGエディタを見つけたのでご紹介。デザインもなかなかよい。jQuery TE

くっ、くだらなすぎる。。。画面スクロールでオナラ音を出す「fartscroll.js」

あまりにくだらすぎるが衝撃的だったのでご紹介。画面をスクロールするとオナラの音を出すJSライブラリ。fartscroll.js

JSライブラリを使わずRetina対応のレスポンシブメニューを作る方法

JSライブラリを使わずにRetinaディスプレイ対応のレスポンシブメニューをHTML/CSS/JSで作る方法が紹介されていたので書いておく。これは勉強になるなー。RESPONSIVE RETINA-READY MENU

ajax処理に最適!?ローダー、処理結果通知をかねそなえた「Jquery-async」

面白いjQueryプラグインがあったのでご紹介。処理中のローダー、処理完了時の通知アニメーションを兼ね備えたjQueryプラグイン。Jquery-async

シンプルなUIのページネーション「simplePagination.js」

ライブラリ名まんまの記事タイトル。笑 シンプルで使いやすそうなページネーションのjQueryプラグインをご紹介。simplePagination.js

簡単にソート、フィルタリングが実装できるjQueryプラグイン「MixItUp」

かなりオシャレでかっこいいjQueryプラグインを見つけたのでご紹介。非常に簡単な実装で要素のソート、フィルタリングが可能。サイトもオシャレですな~。MixItUp

軽量&高速でかっこいいポップアップが実装できる「Magnific Popup」

かっこいいポップアップ(モーダルウィンドウ)を実装できるJSライブラリが便利そうなので紹介しておく。Magnific Popup

JavaScriptの学習資料を集めたサイト「Superhero.js」が渋い

英語ではあるがJavaScriptを学習している人にぜひおすすめしたいサイトがSuperhero.jsである。何とも渋いTop画面ではないか。Superhero.js

Youtubeのメニューにかかっているあのエフェクトを実装する方法

少なからずはこういうのを探している人がいるかもということでご紹介。Youtubeのメニューエフェクトの実装方法を解説している記事を取り上げてみる。Simple YouTube Menu Effect(Demo)

iTunesのcover flowのようなスライダーを実装する「sly.js」

iTunes11からなくなってしまった「cover flow」機能のようなスライダーを実装することのできるJavaScriptライブラリが良かったのでご紹介。Sly

HTMLからイベントハンドラを切り離す!救世主イベントリスナー

前回イベントハンドラについて書いた。JavaScriptのイベントハンドラをまとめてみた このイベントハンドラなのだがやや問題があり、今回紹介するイベントリスナーを使ったほうが良いということを学んだので、まとめてみる。イベントハンドラをHTMLから切り離…

JavaScriptのイベントハンドラをまとめてみた

動的なJavaScriptの実行を可能とするイベントハンドラについて学んだことをまとめておく。イベントハンドラとは 通常JavaScriptはWEBサイト(HTMLファイル)の読み込み時に実行されるが、ボタンをクリックする、テキストフォームを選択するなどイベントが発…

これはオシャレ!デザインとアニメーションが秀逸なメニューを実装するJSライブラリ

いつか使いたいと思ったので書いておく。 オシャレなデザインと、かっこいいアニメーションが魅力的なメニューが簡単に実装できる。下記リンクよりDemoページに飛ぶことが出来るので、一度試してみていただきたい。RESPONSIVE MULTI-LEVEL MENU

select-multipleで複数選択した際にJSでoptionを取得する方法

DOM関連の記事を書いているときにelementオブジェクトのselectedIndexプロパティについてふと疑問に思ったことがあったので、わかったことを書いておく。 selectedIndexとはselectタグ内のoptionにアクセスし、何番目のoptionが選択されているかを返すプロパ…

【DOM連載#3】JavaScriptのDOMでHTML要素を追加・削除

DOMの連載記事、最後の3回目は要素の生成、追加、削除について書く。本題に入る前にノードという概念について簡単に書いておく。ノードとは ノードとはHTMLへアクセスするためのインターフェースである。全12種類のノードがあるが、代表的なものは4つ。一つ…

【DOM連載#2】JavaScriptのDOMでHTML要素を編集

DOMの連載記事、2回目は要素の属性や文字列の扱いについて書く。属性、文字列を取得したり、書き換えたりすることが可能だ。 前提としてHTML要素が特定できていなければ編集することが出来ない。なので、要素の参照が分からないという方は以下の記事をどうぞ…

【DOM連載#1】JavaScriptのDOMでHTML要素を参照

最近DOMについて改めて学びなおし、気づきが多かったので連載という形で書き残しておこうと思う。1回目はDOMでのHTML要素の参照について。まずDOMとは何かについて、一応引用しておく。 Document Object Model (DOM) は HTML や XML 文書のためのプログラミ…

クリップボードにコピーの実装は難しい?「zClip」が一発解決

ブラウザからクリップボードに文字列をコピーする機能を実装したく調べた結果、便利なJSライブラリがあったので書いておく。zClip

その数300以上!大量のJSライブラリを配信する「cdnjs」がすごい

最近JSライブラリを試すことが多くPC上での管理が破綻しかけていたなか、大量のJSライブラリがまとめられたCDNを発見したので書いておく。ライブラリを軽く試してみたいという人におすすめ。cdnjs

サイトツアーの作成に軽量&IE対応の「Intro.js」をおすすめする

サイトツアーを実現するJSライブラリに興味を持ったので10個以上を見てみた。で、Intro.jsがとても良かったので書いておく。 Intro.js

超軽量&IE対応のレスポンシブナビゲーションバー「responsive-nav.js」

これはいつか使えそうだと思ったので、備忘として書き残しておく。レスポンシブなナビゲーションバーが簡単に実装できるJSライブラリ。RESPONSIVE NAV