jQuery Burn
jQuery Burn Some men just want to watch the text burn! jQuery Burn is a plugin which adds a flame-like effect to text using multiple text-shadows, animated by repeatedly changing their horizontal offsets. The effect can be somewhat CPU intensive (especially for older computers), so use it sparingly. It can be stopped and restarted dynamically, colored, stretched, offset, sped up and slowed down. T
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
Windows8のMetro風UIを実現できるjQueryプラグイン:phpspot開発日誌
dennisdegryse/jQuery-Metro-Plugin - GitHub Windows8のMetro風UIを実現できるjQueryプラグインです。 タイル状に並べられたアイコンが印象的なMetroデザインですが、このUIをブラウザ上で実現できます。 デモページ - ページのはじをクリックすれば画面が切り替わります。 ちょっと変わったことをやってみよう、という場合に使ってみるとインパクトがありそうです CSSなんかを当てはめればそれなりにかっこ良くできそうですね 関連エントリ ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 プロレベルのWEBサイトレイアウト作成チュートリアル３０ フリーの高品質WEBデザインレイアウトテンプレートPSD７０
Draggable Image Boxes Grid | Codrops
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area. Today we want to create a template with a fullscreen grid of images and content areas. The idea i
jQuery siteFeature
Tab number #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. Link #1 Tab number #2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a. Link #2 Tab number #3 Lorem ipsum dolor sit amet, consectetur
Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」:phpspot開発日誌
CircleList jQuery Plugin Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」。 ULで定義したリストを初期化するだけで次のように円形にアニメーションします。各アイテムはドラッグ＆ドロップで他の円リストに移動することが出来ます。 更に、範囲指定で複数アイテムの選択なんかもできるようになっています。 実装は必要プラグインを読み込んだ後、次のように初期化するだけです。 <ul id='list'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>4</li> </ul> <script> $('#list').circlelist(); </script> ジェネレーターもあって、その場で動きを作れてコードも出力する機能もあったりします。 ちょっとしたサプライズ効果に使えそうですね。 関連
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５:phpspot開発日誌
15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
広告等に使えそうなjQueryプラグインいろいろ - かちびと.net
広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step Carousel Viewer シンプルなカルーセルです。複数の広告をまとめて表示するのに使いやすそう。 Step Caro
技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例:phpspot開発日誌
Make a ‘View Source’ Button | CSS-Tricks 技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例。 なんらかのライブラリを配布する際やコードの動作を紹介するデモページなんかに導入しておくと利用者に親切かも。 ボタンクリックでLightBox風にソースを表示させることができ、きちんとハイライトもされた状態になっています。デザインもなかなかいい感じ。 ファイルのダウンロードも可能ですので比較的簡単に実装できますね。 firefoxやChromeでは、view-source:http://〜みたいにするとソースコードを見るページにリンクできますが、そうした方法での実装法も紹介されています。 関連エントリ ブラウザ上で動作するソースコードエディタ『Edit Area』 ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」
タイトル文字列をファンシーに加工できるjQueryプラグイン「Lettering.JS」:phpspot開発日誌
Lettering.JS | daverupert.com タイトル文字列をファンシーに加工できるjQueryプラグイン「Lettering.JS」。 jQueryとCSS3を組み合わせて次のようなファンシーなタイトルが画像ではなく文字列で実現出来ます。 タグはこんな感じで普通のHTMLで定義しておくだけでOK <h1 class="fancy_title">Some Title</h1> $(".fancy_title").lettering(); のように初期化して上げれば上記のようにファンシーな感じに変更できます。 マウスカーソルを当てると反応があってなかなか面白いエフェクトがかかってます。 関連エントリ ファンシーなデザインがいい感じのAjax＆PHPなコンタクトフォーム作成サンプル 図を枠内にドラッグしてCAPTCHAするファンシーなCAPTCHA「Ajax Fancy Capt
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
回転する円形のサイトメニューが実装できるjQueryプラグイン「jQuery Radmenu」:phpspot開発日誌
jQuery Radmenu Example 回転する円形のサイトメニューが実装できるjQueryプラグイン「jQuery Radmenu」。 UIとしては次のような円形のメニューで、回転させるとなかなか面白い動きをします。 具体的にどう使うか、というのはアイデア次第ということになってきそうですが、アイテムをシャッフルさせたり、動きがなかなか面白いメニューになっています。 デモページ 利用者にちょっとした驚きの効果を与える分には申し分ないですが、使い方には注意が必要かもしれませんね。 HTML的には、次のようなulを使ったリストです。 <div id='radial_container'> <ul class='list'> <li class='item'><div class='my_class'>0</div></li> <li class='item'><div class='my
サイトをかっこよくするためのjQueryプラグイン25+ – creamu
サイトにかっこいいUIを実装したい。 そんなときにおすすめなのが、『25+ Best jQuery Plugins To Beautify Your Website』。サイトをかっこよくするためのjQueryプラグイン集です。 初めて見るものもあっていい感じです。 YoxView lightbox系の画像オーバーレイスクリプト。ナビゲーションとキャプションがフェードアウトしたりとディテールが気持ちいいです Fade In and Out Tooltips for Prototype and Scriptaculous フェードイン&アウトで表示されるツールチップ Sweet Titles Transparent and Fading Tooltips ページロード時に、画像をフェードインして表示させるスクリプト Captify Displays Pretty Image Captions
アニメーションの残像が残るjQueryアニメーションチュートリアル:phpspot開発日誌
Shadow Motion Effect in 5 Lines Of jQuery | AEXT.NET MAGAZINE アニメーションの残像が残るjQueryアニメーションチュートリアルが公開されてます。 次のようにアニメーションした後の残像が残ります。CSS3の機能なども盛り込みつつ実装されてるみたいです。 サンプルは簡単な円のアニメーションを使いながらコードの説明があります。 Flashに比べるとパフォーマンスはそこまで出てない気はするのですが、なかなか面白いですね。 関連エントリ キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム クールにアニメーションする色合い様々なjQueryメニューサンプル色々
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
http://www.designwalker.com/2010/06/jquery-forms.html
moto-mono.net