[JS]パネルを水平方向にスライドしてエリアを拡大するスクリプト -sliding menu revisitedjQuery sliding menu revisited demo デモではアイコンを配置した矩形のエリアにカーソルを合わせると、それぞれのパネルがアニメーションでスライドして、アイコンを変更しパネルのエリアを拡大します。 各矩形のパネルはリスト要素で実装されています。 sliding menu revisitedはjQueryのプラグインのため、実装にはjquery.jsが必要です。
CSSで影付きテキストにマウスオーバーでスポットライトを当てるサンプル:phpspot開発日誌
text shadow bow CSSで影付きテキストにマウスオーバーでスポットライトを当てるサンプルが公開されています。 Safari, Firefox 3.5, Opera, Chromeでしか動きませんが、Flashを使わずに、CSSとJavaScript で実現されているのが面白い。 マウス移動でスポットライトが移動。 Text Shadow 部分が画像でなくて以下のようなタグで表現されているのも面白いところです。 <div class="wall"> <p id="tsb-text">Text Shadow</p> <div></div> </div> 関連エントリ 便利なＣＳＳテクニック３０選 CSSとdivを使った画像先読みテクニック 本の目次部分のようなリストをCSSでデザインするテクニック
ページのめくれを実装する方法5 – creamu
WebDesignBoothで、ページのめくれを実装する方法が紹介されています。 ざっとご紹介。 » imple Page Peel Effect with jQuery and CSS by Soh Tanaka Soh Tanakaによる、jQueryとCSSを使った例 » The Sexy Curls jQuery Plugin Elliott Kemberによる、jQueryを使った例。jQueryとjQuery UIの両方が必要 » jQuery Page Peel 1.2 by Smpl Multimedia オプションが豊富なjQueryプラグイン » How to create a page peel advertisement in WordPress WordPressでページのめくれを実装する方法 » WordPress Page Peel plugin Avramo
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ:phpspot開発日誌
Horizontal JavaScript Accordion 1kb - Web Development Blog 滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ 次のように、マウスをあわせると、ホバーした部分がビヨーンとアニメーションしながら伸びるＵＩ実装用のサンプルが公開されています。 設置手順がすごくシンプルです (1) HTMLを定義します <ul id="sm" class="sm"> <li><img src="images/1.gif" alt="" /></li> <li><img src="images/2.gif" alt="" /></li> <li><img src="images/3.gif" alt="" /></li> <li><img src="images/4.gif" alt="" /></li> </ul> (2
英国の映像作家も使うJS製LavaLampメニュー (1/5)
シンプルなWebデザインに、ちょっとしたアクセントとなる装飾要素を加えたい――。そんなときに参考になるWebサイトを見つけました。英国の映像作家スティーブ・ブックバインダー氏のサイト「Steve Bookbinder」です。 白を基調とし、余白を広くとったこのWebサイトは、映像作家らしく、作品紹介を中心に構成されています。埋め込みの動画プレーヤーとサムネイル画像を除けば、ほぼテキストのみで制作されているきわめてシンプルなデザインに見えます。 ところが、そんなこのサイトにも、1箇所だけ、JavaScriptを使った意外な装飾を加えている場所があります。それがヘッダーに設置されたグローバルナビゲーションです。今回はこのサイトのシンプルな装飾テクニックをお手本としましょう。 今回のお手本サイト： 『Steve Bookbinder』 英国の映像作家／ディレクターであるスティーブ・ブックバインダ
Web 開発者の責任 (翻訳): Days on the Moon
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
20 Excellent JavaScript Navigation Techniques and Examples
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. JavaScript allows you to add interacti
Ajaxで実現するエフェクト20選「20 More Excellent AJAX Effects You Should Know」
最近ではライブラリも多数リリースされ、様々な所で使われている「Ajax」簡単に高度なエフェクトや動作が導入可能ですが、今日紹介する「20 More Excellent AJAX Effects You Should Know」はAjaxで実現するエフェクトをまとめたエントリーです。 GlassBox 様々なAjaxのサンプルが紹介されていますが、今日はその中からいくつか気になった物を紹介したいと思います。 詳しくは以下 ■LightWindow YouTubeに動画、画像、PDFファイルと様々なメディアに対応したライトボックスエフェクト。 ■Unobtrusive Table Actions テーブルの各ブロックにエフェクトを付与できるAjax。データを見せるページには便利に使えそうです。 ■iCarousel plugin イメージをスライダー形式で表現できるAjax。 ■Validat
【連載】セカイ系ウェブツール考 (70) RIA開発に知っておきたい「JavaScript」の最新事情 | ネット | マイコミジャーナル
今回のテーマは「JavaScript」 Ajaxを使ったWebアプリケーションの到来とともに一気に注目度を高めたのがJavaScriptだ。それまではセキュリティの問題などから、WebブラウザのJavaScriptをオフにするケースも多く、ちょっとした画面のイフェクトくらいにしか使われてこなかった。だが今では、JavaScriptを有効にしているのがほとんどで、Ajaxに限らずRIA(リッチ・インターネット・アプリケーション)を構築するうえで欠かせない技術になっている。 また、数年前まではHTMLのレンダリング速度や操作の軽快さがWebブラウザに求められてきたが、最近ではJavaScriptの実行速度で差別化を図るようになっている。Google Chrome、Firefox、Safari、Operaなどが新しいJavaScript実行エンジンを開発し、その速度を競い合っている。 今回はそん
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]タブでパネルを切り替えるスクリプトのいろいろな実装例
[CSS]要素をボタン風にスタイリングするスタイルシートのテクニック集
http://moto-mono.net/2009/05/22/cross-fade-with-rounded-corner-button.html