ShineTime ? A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装する例が公開されています。 透明と白のグラデーション画像を斜めにして画像や枠の上をアニメーションで横切らせるというシンプルな方法でFlashサイトのようなクールな演出を実現しています。 実際のデモを見てみましょう。 超クールですね。 チュートリアル形式になっているので横切らせる画像を替えたりしても面白いかも。 このエフェクトは使える気がします。 チュートリアルでは現在のところjQueryは使っていますがプラグインの形ではないのでコードを記述する必要がありますが、プラグインになったらより便利そうですね。 関連エントリ 画像の映り込みエフェクトを実現するJavaScrip

このページはAjaxライブラリの1つであるjQueryライブラリを勉強したい人向けに用意されています。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 jQueryはバージョンによってメソッドが異なるため、バージョン別に入門ページを用意してあります。ここでは、バージョン1.2.6を基準としています。 Ajaxライブラリ (JavaScriptライブラリ) としてはPrototypeライブラリ (prototype.js) が有名です。Prototypeライブラリはプログラマに多く利用されており、JavaScriptの機能を拡張することで使いやすくなるように設計されています。jQueryはエレメントへのアクセスをスタイルシートと同じようにすることで非常に分かりやすくコンパクトな記述ができるようになっています。

仕事でお問い合せフォームを使う代わりに、メーラーを件名を決めうちで立ち上げる事で対応して欲しいという事があったので、よく知られているリンクに対してmailtoにsubjectを追記して対応したんですが、その際に文字化けしてちょっと手こずったのでメモ代わりにその対策を書いておきます。 制作環境はMacで、HTMLのエンコードはUTF-8です。 この環境下で以下のようにメーラーが立ち上がるようにした所、 <a href="mailto:mail@add.res?subject=件名">お問い合せ</a> Macでは問題なくメーラーに件名が表示されましたが、Windowsで確認した所、件名が文字化けしてました。そこでコチラを使ってsubject部分をShift-JISにエンコードした所、今度はMacで文字化け。そりゃそうだ。 おそらくHTMLのエンコードをShift-JISで作成すれば問題ないで

Making an Interactive Picture with jQuery | Build Internet IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル 室内のいい感じの写真をベースに家具を紹介するあのIKEAサイトのUIをjQueryを使ってクールに再現しているチュートリアルです。 単純な商品の紹介よりも、より商品を魅力的にみせることに成功していると思うのですが、これを自分でもやりたいという時に参考にできます デモページはこちら ECサイトを構築する際等に、いい仕事ができるかもしれませんね。 関連エントリ オシャレなECサイト構築用のWordPressテーマ３０ PR: 全部入りECサイトを安価に構築できる「Live Commerce」が素晴らしい！ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ

divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 2011年02月10日- jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に実装できてしまいます。 実際のコードは次のようにとてもシンプル。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="//www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /><

１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま

Plugins | jQuery Plugins ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」。 サイト巡回しているとたまに見かける、ブラウザの端っこについている次のようなボタンを簡単に実装できるjQueryプラグインです。 押下時に「ページの上にスクロールさせる」機能を実装できユーザビリティ的には上げられそうな場面がありそうです。 利用法としては、次のような感じです。 $(element).edgeButton({ buttonText: "ボタンのテキスト", buttonPrefix: "ボタンのプレフィックス", buttonDirection: "ボタンの配置位置 right, left で指定", buttonFunction: "ボタン押下時の動作指定" }); 自前でやるとなると、ボタンを配置して固定してクリック時にスクロールして

Prereqs Requires the jQuery Library as well as the Easing plugin. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type='text/javascript' src='js/jquery.easing.1.2.js'></script> <script type='text/javascript' src='js/jquery.circulate.js'></script> Usage / Options / Defaults $("#anything).circulate({ speed: 400, // Speed of each qu

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して

ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。

軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D

※本ページはソーテック社発行の書籍「使える！JavaScriptサンプルブック」購入者のためのものです。サンプルは書籍内容をマスターする目的のみ使用することができ、他の用途での使用・配布は一切禁止します。また、これらサンプルを実行した結果については著者、（株）ソーテック社は一切の責任を負いかねます。全てお客様の責任において御利用くださいますようお願いいたします。購入者以外の御利用はご遠慮ください。 ここで使用している全ての写真素材ファイルの著作権は篠崎柚さんにありますが、本書を学習する目的では報告や許可を必要とせず自由に使用できます。 しかし、他の目的での写真使用に関しては篠崎柚さんのページ「5memorips-photograghic」のフリー写真素材の利用規約をお守りください。

サイトにかっこいい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を使ってクールなインターフェースを実装したい。 そんなときにおすすめなのが、「30 Useful Jquery Plugins For Developer & Designer」。デザイナー・デベロッパーのためのjQueryプラグイン集です。 結構いい感じのものが揃っています。 YoxView – jQuery image viewer plugin 動きの軽快なlightbox系プラグイン Exposure Jquery Plugin かっこいい見せ方ができる画像ビューア jQuery Constant Footer フッタをブラウザ下部に固定配置するためのスクリプト。RSSを読み込んだりもできる ezMark jQuery Plugin チェックボックス、ラジオボタンをかわいいデザインに 変更できるプラグイン Cloud Zoom これはすごい気がする。画像の一部を拡大して

ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」 2010年06月10日- Video LightBox - Embed video to your website with beautiful Lightbox effect! ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」。 名前から推測するに、単に動画をLightBox化しただけでしょう、と思いきやなかなか素晴らしいプラグインになっていたのでご紹介です。 動画のサムネイルを次のように様々なスキンによって修飾できます。クリックすればニュイーンとLightBox表示されるというオシャレさ加減がいいです。 更に埋込可能な動画形式が豊富で、flv, mp4, 3gp や、外部動画サイトのYoutube, Facebook, Goo

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益jQuery情報多数ですが、タグやカテゴリが無い（あるかもだけど、