ホバー時に浮かぶエフェクトがとってもリアルなスクリプトをAdrian Pelletierから紹介します。 Create a Realistic Hover Effect With jQuery demo デモはReflection(鏡面反射)とShadow(影)の二種類があり、それぞれホバーして浮かんだ際、鏡面反射と影が距離に合わせてサイズが変わります。 スクリプトのベースにはjQueryが使用されているため、実装にはjquery.jsが必要です。
ちょっとした動きから、ダイナミックな動きまでアニメーションのエフェクトを加えるJavaScriptのフレームワークをSix Revisionsから紹介します。 10 Impressive JavaScript Animation Frameworks
Drag and drop table content with JavaScript demo デモではテーブル内のコンテンツをドラッグ&ドロップでセル間の移動が可能で、配置したコンテンツの量でセルの高さも変更します。 スクリプトはjQueryなど他のスクリプトに依存せず単体で動作するもので、対応ブラウザはIE6をはじめFx3にも対応しています。
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 2009年07月07日- FontEffect jQuery plugin JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 ontEffect プラグインを使って、次のようなフォントを描画することが出来ます。画像ではないところが驚き。 実装の容易さについても注目で、次のように、FontEffect メソッドにオプションを渡すだけです。 $('#example24').FontEffect({ outline:true, // 枠線 outlineColor1:"#00c", // 枠線色1 outlineColor2:"#00c", // 枠線色2 outlineWeight:1, // 枠線幅 sha
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テクニック30選 CSSとdivを使った画像先読みテクニック 本の目次部分のようなリストをCSSでデザインするテクニック
一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像(クリックで拡大) ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
テキストや背景のカラーをアニメーションで少しずつ変更するスクリプトをDesizn Techから紹介します。 Playing with jQuery Color Plugin and Color Animation demo デモでは、テキストのカラーを変更するもの、背景を変更するもの、それぞれ異なるカラーに変更するものなどがあります。 テキストのカラーを変更する場合は、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5"> $(".first a").hover(function() { $(this).animate({color: "#00eeff" }, 400); },function() { $(this).animate({color: "#FFFFFF" }, 500); }); </textar
表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
ナビゲーションの現在位置を取得し、要素にクラス(activeなど)を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいUIの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、1行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く