IDEA * IDEAドットインストール代表のライフハックブログ
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu
一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像（クリックで拡大） ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。
JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」:phpspot開発日誌
JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 2009年07月07日- FontEffect jQuery plugin JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 ontEffect プラグインを使って、次のようなフォントを描画することが出来ます。画像ではないところが驚き。 実装の容易さについても注目で、次のように、FontEffect メソッドにオプションを渡すだけです。 $('#example24').FontEffect({ outline:true, // 枠線 outlineColor1:"#00c", // 枠線色１ outlineColor2:"#00c", // 枠線色２ outlineWeight:1, // 枠線幅 sha
[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
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト
ナビゲーションの現在位置を取得し、要素にクラス（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>
[JS]jQueryのプラグイン33+1選 -2009年3月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jquery.scrollable ホイール・クリック・キーボード操作にも対応した、パネルをスクロールする高性能なスクリプト。 Fi
[JS]ブラウザのサイズに合わせて画像サイズを最適化するスクリプト
maxImage demo 上記のデモでは、右側の画像がブラウザのサイズに合わせて、はみでないようにリサイズされて表示されます。 デモは他にも多数あり、下記は背景画像をブラウザのサイズに合わせて最適化します。
29分でできる！ あのサイトの“技”を盗め
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれる JavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
[JS]jQueryのプラグイン33 1選 -2008年10月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル:phpspot開発日誌
jQuery Content Slider Tutorial メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル。 ナビゲーションメニューをクリックで、コンテンツブロックをズイっとアニメーションさせながら切り替えるサンプルです。 デモページ を見るとその動きが分かります。 ウェブサイトのヘッダー部分に置いておくと、カッコいいだけでなく、ページ遷移なしでヘッダー部分を切り替えることが可能です。 企業用のページなんかでよくある構成ですが、そういったサイトの制作時に使えそうですね。 jQueryベースで動作するみたい。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト
http://moto-mono.net/2009/07/07/jqueryplugins-i-have-used.html
http://e0166nt.com/blog-entry-677.html
[JS]一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch
[JS]打ち出し画像をフラッシュのようにダイナミックに切り替えるスクリプト -s3Slider
[JS]画像を溶け合うように切り替えられるスクリプト -CrossSlide
IDEA * IDEA