Loading...
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
[CSS]一枚の画像だけでスタイリッシュなプログレスバーを実装するスタイルシート
使用画像 プログレスバーの色は透過PNGを使用しているので、スタイルシートで簡単に変更できます。 HTML箇所は、divが3つ入れ子で実装されています。 また、JavaScript（jQuery）を使用して、バーが0%から100%になったり、カラーを少しずつ変更させるデモもあります。
jQueryで作るタブ型コンテンツローテーター – creamu
Raymond Seldaさんのブログで、jQueryで作るタブ型コンテンツローテーターが公開されています。 一定時間ごとにタブでコンテンツが切り替わりますね。 デモは以下から。 » working demo 「source files」からソースもダウンロードできます。 Seldaさんは2006年からPHPとMySQLでプログラミングを初めて、デザインとドラムも少しやるようですね。 ぜひ一度見てみてください。 » Create A Tabbed Content Rotator Using jQuery 昨日は有楽町と中目で飲みまくり。有楽町の赤提灯も結構たのしーねー。そのために今日は寝すぎた。。 今日は銀座でパーティーだぞ。銀座は綺麗な人が多いなー。
[JS]指定した要素のみをマスクして目立たせるスクリプト -jquery.expose
demo: video こういったユーザーに少しでも集中してほしいコンテンツには、効果が高そうです。 使用方法も簡単で、JSファイルを外部ファイルで指定し、スクリプトで適用箇所とカラーと不透明度を指定します。 最小の記述だと、下記のようになります。
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
[JS]オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify
画像のオルトを利用して、画像の上にオーバーレイでキャプションを表示するスクリプト「Captify」を紹介します。 Captify demo デモでは、画像にマウスオーバーすると、下側からキャプションがスライドしてオーバーレイで表示されます。 オプションでは、キャプションの表示位置（上・下）、表示のスピード、不透明度、表示方法（フェード・スライド・常設）、クラス名などが変更できます。 キャプションはデザインを適用したものを表示することも可能で、下記のようにdiv要素を使用することもできます。
[JS]ソートだけでなく、検索も可能な多機能なデータテーブルを実装するスクリプト
セルのハイライト表示、データのソート、特定文字列の検索などに対応したデータテーブルを実装するスクリプトを紹介します。
[JS]複数のレイヤーをずらして動かし立体感を与えるスクリプト -mParallax
ユーザーのマウス操作にあわせて、複数のレイヤーをずらして動かし、パララックス（視差）効果を与えるスクリプト「mParallax」を紹介します。
簡単に画像やコンテンツをスライドできるjQueryプラグイン Easy Image or Content Slider | バシャログ。
Easy Sliderは、エリアを固定したまま左右上下に画像やコンテンツをスライドできるｊQueryプラグインです。 まずは下のデモをご覧ください。 サンプルデモ 設置方法 配布ページよりデータ一式をダウンロードし、easySliderを利用したいhtmlのhead要素などで以下のファイルおよび処理を読み込みます。 <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="easySlider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> 表示する部分は以下で
[JS]テキストや画像をスライドして表示するスクリプト -iCarousel
iCarouselは、テキストや画像をスライドして表示するニュースティッカーと画像ギャラリーを実装できるスクリプトです。 iCarousel ニュースティッカーは一行タイプのものからパネル状のものまであり、画像ギャラリーは画像をスライド表示するものからサムネイル表示で拡大画像を表示するものまで、さまざまなタイプが実装できます。 ニュースティッカー：シンプル版のデモ ニュースティッカー：クリック機能付きのデモ ニュースティッカー：パネル版のデモ 画像ギャラリー：横タイプのデモ 画像ギャラリー：縦タイプのデモ 画像ギャラリー：拡大画像のデモ iCarouselはmootoolsのプラグインのため、動作にはmootools.jsが必要です。
非常に美しいcoverflowスライドギャラリー『ImageFlow』
非常に美しいcoverflowスライドギャラリー『ImageFlow』 ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。 設置方法 配布サイトより関連ファイルをダウンロードし、サーバーにアップします。 スライドギャラリーを利用したいページのhead要素内で『screen.css』と『imageflow.js』を読み込みます。 <link rel="stylesheet" title="Standard" href="screen.css" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="imageflow.js"></script> スライドを利用したい箇所に以下のHTMLコードを記述しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]フォームにさまざまなスタイルのデザインを適用するスクリプト -Sexy Forms
[JS]画像を使用して、divの矩形を角丸やグラフィカルにするスクリプト -DivCorners
おしゃれなリスト実装サンプル:phpspot開発日誌
» Loupe.jsを使う。(4) 寺子屋未満: 最新Web情報をコツコツお届け
[JS]打ち出し画像をフラッシュのようにダイナミックに切り替えるスクリプト -s3Slider
[JS]既存のフォームをかわいいデザインに変更するスクリプト -Niceforms
988 + JavaScript Libraries : skuare.net