jQueryで背景画像を全画面表示する
jQueryで背景画像を全画面表示する 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 投稿日2010年11月30日 更新日2011年04月26日 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。</a></h
fancyBox
Fancybox #Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is ea
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる : nogunogu
とあるWebアプリをiPhone対応させようと思っています。 iPhone対応なんて、レイアウトをちょっといじる程度かと思って調べていたら、 なんとiPhone搭載のモバイルSafariはタッチ関連のイベントをJavascriptで扱えるというじゃないですか。 “iPhone Human Interface Guidelines for Web Applications” を見てみると、 ユーザーの操作として上げられている中に「Flick」があります。 ということは、フリックイベントを設定できて、ページをめくる的な操作がササッと作れるはず。 などと思って調べたところ、どうやらタッチ・ジェスチャー関連のイベントは下記の7つみたいです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gesturee
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
[JS]jQueryのプラグインを開発するためのテンプレート -jQuery Boilerplate
jQuery Boilerplate [ad#ad-2] jQuery BoilerplateはjQueryのドキュメント「Plugins/Authoring」から、より良いパフォーマンスとメモリ使用を提供することを目標として開発したとのことです。 jQuery Boilerplate (stripped version) jQueryのプラグインのテンプレート(stripped version)です。 ※2011年7月26日現在のものです。 (function($) { $.pluginName = function(element, options) { var defaults = { foo: 'bar', onFoo: function() {} } var plugin = this; plugin.settings = {} var $element = $(element)
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
jQueryでスクロールしても上に固定されるメニュー｜Webpark
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
Xlune::Blog
テキストオートコンプリートjQueryプラグイン(jquery.gcomplete.js) by Google API いやー、Googleの検索って便利ですよね。特にローマ字で打ってんのに日本語候補出してくれるのがシビれます。 なので、あの恩恵を普通のテキストフィールドでも受けれるようにしたいなーって思って勢いで書きました。 もちろん、GoogleSuggest系のjQueryプラグインが山ほどあるのは知ってるんですが、山ほどありすぎて逆にわけわからんのでもっと混沌とさせようかと。。。 Demo Demo Page 利用方法はデモのソースを確認してください。 Download github zip file 利用には、jQuery本体(必須)とjquery.mousewheelプラグイン(オプション)が必要です。別途読み込んでください。 更新情報 v0.1.2 (20100223) バッ
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
IEでも使える画像の回転用jQueryプラグイン「jQueryRotate」:phpspot開発日誌
jQueryRotate - Rotate Image by angle in all Browsers (Wilq32) IEでも使える画像の回転用jQueryプラグイン「jQueryRotate」 $('#image').rotate(-25);のようにして簡単に画像を回転できるだけでなく、回転するアニメーション効果を持たせることも可能です。 タイトルロゴとかに回転効果をつけてみても面白いかもしれません。 使い方次第ではダイナミックなWEBデザインが作れそうですね。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 フルスクリーンでスッキリ綺麗な写真ギャラリーを作れるjQueryを使ったサンプルプログラム 高いカスタマイズ性を持つ画像ギャラリー実装用jQueryプラグイン「AD Gallery」 画像をスムーズに拡大できるjQuer
jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
リストにフィルタを掛けてソート出来る、わずか2KBの軽量jQueryプラグイン・MobilySelect - かちびと.net
以前にも同じようなものがありましたが、 こちらのほうが良かったのでメモ。リスト （デモでは画像を使っています）にフィルタ リングしてソート出来るjQueryプラグイン。 わずか2KBと軽量で、クロスブラウザ対応 です。便利そうなのでどこかで使いたい ですね。 以前ご紹介したFilter Image Viewも良かったのですが、IE6で表示が微妙でしたが、MobilySelectは問題なく、しかも軽量です。 機能はFilter Image Viewと同様で、ボタンを押すと、そのボタン以外のリストを非表示にする、というフィルタリング。 上記は「名刺」のみの表示にした状態。 完璧に同じ挙動、とは行きませんが、IE6でもちゃんとフィルタリングしてくれます。上記はIETesterでのキャプチャ。 マークアップ <div class="selecter selecter1"> <div class="
jQuery.flickable: iPhone and Android like flick scrolling plugin
See related links to what you are looking for.
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
FancyBoxの使い方講座(?) | ELLIPTiCUS
この度portfolioの見せ方をThickboxからfancyboxに変えました。これが案外日本語訳サイトないんですよね。 fancyboxもThickboxと同じくjQuery系です。動きがかわいい。写真周りにドロップシャドウがかかるから、なんか手抜きに見えない。無駄なdescriptionを入れない。画像クリックで前後の写真に移動出来る。えとせとら。デメリットは重いこと。IE系だとガクっガクガクってなります。世界の主要ブラウザIEを敵に回していいものか悩みましたが、まあ気にしない。Firefoxやsafariが問題なければいいやっ、IEでも見えなくはないし。私にとってはかなり使いやすそうだったので乗り換え決定。せっかくなので適当な使い方講座、載せておきます。 タイトルの右側部分にダウンロードマークがあるので、ごっそりダウンロード。cssもjsファイルもimgファイルも全部同じ階層
selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合（rebuildメソッド） サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEでpngを使った際に起きる不具合を防ぐプラグイン
http://moto-mono.net/2010/02/09/jquery-with-animation.html