紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability. See below for a demo of the project or click here for the full project documentation. If you need support with prettySociable, please take a look at our forums Documentation Please see this
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The scrollbars on browser windows are not styled by the website itself, or even generally by the browser. They come from the operating system itself. The desire to customize the style of these scrollbars is strong. When you are starting out, it feels like something you should be able to do w
CVIから、画像に水晶玉のような透明度のある球体の効果を与えるスクリプト「sphere.js」を紹介します。 sphere.js (javascript spherical image effect) sphere.jsの対応ブラウザは、IE6+, Fx1.5+, Op9+, Safariとなっており、それ以外では画像がそのまま表示される仕様になっています。 使用方法は外部スクリプトとして記述し、画像のクラスに指定することでさまざまな水晶玉の効果を与えることができます。 sphere 基本のクラス isize サイズを指定するクラス izoom 画像のズーム(%) ialpha 画像の不透明度 ishade 水晶玉のシャドウ ishine 水晶玉の輝き icolor 水晶玉の背景色 igradient 背景のグラデーション
Snook.caのエントリーから、「ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2」のように、ナビゲーションの背景画像にさまざまなアニメーション効果つけるスクリプトを紹介します。 Using jQuery for Background Image Animations デモ デモでは、上下のアニメーション、左右のアニメーション、フェードのアニメーションがあります。 スクリプトにはjQueryがメインに使用されており、それぞれのアニメーションは下記のように記述されています。 「#a」は上下、「#b」は左右、「#c, #d」はフェード。 <textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35
In today’s web design, Javascript is a must-have component. Aside from its functionality, Javascript can enhance user experience by creating transitional effects such as fading and sliding animation. Thanks to the open source Javascript frameworks, we don’t need to write custom Javascript from scratch anymore. Here are 47 Javascript plugins that you can use to enhance the user experience and funct
david walsh blogのエントリーから、マウスオーバーに合わせてグラデーションのように背景色が変化するナビゲーションを実装するスクリプトを紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul> <li><a href="#" class="nav">Nav Item 1</a></li> <li><a href="#" class="nav">Nav Item 2</a></li> <li><a href="#" class="nav">Nav Item 3</a></li> <li><a href="#" class="nav">Nav Item 4</a></li> <li><a href="#" class="nav">Nav Item 5</a></li> </ul> </textarea>
Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lightview スムーズに画像を拡大してくれる » FancyUpload アップロード中のプログレスを表示してくれる » SWFObject Javascriptを使ったFlashプレーヤ » JavaScript tabifier 簡単にJavascriptで切り替えられるタブインターフェースが作れる » FancyZoom 1.1 簡単なエンベッドでスムーズに画像を拡大してくれる » SimpleModal オーバーレイするクールなモーダルダイアログ » A Mac OS X-style Dock In JavaScript
Flashを使用しないで、画像ギャラリーを実装するスクリプトやスタイルシートの紹介です。 Slideshow 2 minishowcase photo starfield simulation gal
IE 6 Blocker Script - CSS-Tricks IE6でのページ表示をブロックする「IE 6 Blocker」。 IE6でアクセスすると次のようにグレー表示の上にダイアログが表示されるというもの。 IE6をサポートしていないサービスの場合、これを導入すれば簡単にブロックできますね。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.ie6blocker.js"></script> のように2行書くだけみたい。
webdev.stephband.info Parallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. アニメみたいな視差を表現する面白JavaScriptライブラリ「jParallax」 イメージ上でマウスを動かすと、近くの物ほど速く、遠くの物ほど遅く動作するような表現が可能。 仕組みとしては複数枚のエレメントを重ね合わせてJavaScriptで動作させているみたい。 他にも面白い例がいくつか紹介されてます。 webdev.stephband.info/parallax_demos.html test.stephband.info/pa
デザインも秀逸なナビゲーションを実装するスタイルシートとスクリプトのチュートリアルの紹介です。 各サイトではチュートリアルの他、ファイル一式や画像データをダウンロードできるものもあります。
ログインパネルなどで、表示・非表示の切り替えがしたい。 そんなときにおすすめなのが、『Show/hide a nice Login Panel using Mootools 1.2』。表示・非表示の切り替えができるログインパネルだ。 このエントリーでは、クリックで表示・非表示を切り替えられるインターフェースが紹介されている。 デモは以下から。 » demo Mootools 1.2を使っていて、HTML、CSS、Javascriptそれぞれのソースがダウンロードできる。 表示・非表示の切り替えができるログインパネル、チェックしてぜひ使ってみてはいかがだろうか。 今日も天気いーですねー。がんばりましょー!
MopStudioから、パネルのスライダーやツールチップなど、省スペースに豊富な情報を掲載できる3つのスクリプトを紹介します。 MopStudio 紹介する3つのスクリプトはjQueryのプラグインのため、動作にはjquery.jsが必要です。 動作環境は、IE6, 7, Fx3, Op9, Safari3となっています。 各スクリプトのダウンロードや実装方法は、MopStudioの左下にあります。 パネルスライダー:MopSlider スクロールボックス:MopBox ツールチップ:MopTip パネルスライダー:MopSlider MopStudio デモは、ページ上部です。 横長のパネルを省スペースにスライダー付きで表示します。 右の回転矢印をクリックすると、表示方法を「マニュアル」と「オート」に変更できます。 スクロールボックス:MopBox
kriesi.atのエントリーから、Apple風にデザインされたアコーディオン型ナビゲーションの画像作成からスタイルシート・スクリプト実装までのチュートリアルを紹介します。 Create an apple style menu and improve it via jQuery デモ 上記ページでは、Apple風にデザインされたナビゲーション画像のPhotoshopでの作成方法から、HTML+CSS、JavaScriptの実装方法まで詳細なチュートリアルが掲載されています。 ナビゲーションは、リスト要素でマークアップされています。 <textarea name="code" class="html" cols="60" rows="5"> <ul class="kwicks"> <li id="kwick1"><a href="#">Home</a></li> <li id="kwick2
Rainbow for Firebug :: Firefox Add-ons FireBugのJavaScriptをハイライト表示する拡張「Rainbow」 次のように、FireBugの色分けをしてくれる。 プレーンテキストで読みづらいなぁ、と思っていましたが、こういうエクステンションがあったんですね。 関連エントリ PHPのログをFirebugのコンソールへ出力する例 IEでのデバッグ/動作確認に便利なソフトいろいろ Firebug1.1betaバージョンが公開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く