パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
iPhone AppのPathみたいなナビゲーションを実装できる Swpnav.js :: 5509
PathみたいなナビゲーションをWebページに実装するライブラリです。同じようなのは他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなイベントキャンセルが強力なやつはだめだと思います。 サンプルがまさにそれなんですけど、同僚の@が作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レイヤーで一度キャンセルすると Swpnav が実行されてる下位レイヤーにはイベントが飛ばなくなるような感じで、この Swpnav とか flipsnap のような作り方をしているライブラリとは共存できると思います。 サンプル（Webkitのみ ホスト githubにあります 5509/Swpnav – GitHub 使い方 ソースコードをダウンロードして、任意の場所に swpnav.js を置き、
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデー
ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」:phpspot開発日誌
CJ Object Scaler 3.0 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」。 幅300pxのブロックに、幅500の画像がきたらデザインが崩れてしまいますが、これをjQueryで自動補正してくれるプラグインのご紹介。 スクリプトでやってくれるため、予め自分でサイズを計算して指定しておく必要はなく、かつデザインを崩しません。 ブログなんかで、画像をアップしたけど、ちょっと大きくてデザイン崩れるかもっていう場合にも、自分でリサイズしなくてもやってくれるというのは楽でいいですね。 調整方法も２種類選べます。 ぴったりと埋める Fill 画像の表示領域をそのままで表示するFit 使い方は $(element).cjObjectScaler(options, callback) で、調整後のコールバック関数も呼べます。 $(element)
レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン:phpspot開発日誌
レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン 2011年02月27日- UI.Layout Plug-in - Home 2 レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン。 次のような複数ペインにわかれ、なおかつドラッグ＆ドロップでペインのサイズを変えられるようなUIが作れます。 レイアウトだけではなく様々なコンポーネントも含まれるため、Ext.JSのようなリッチなUをjQueryで実現できます。 出来ることが豊富で、デモページをひと通り見れば便利さが分かるはずです。 ドキュメントもしっかりしています。 関連エントリ Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」 Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx L
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」:phpspot開発日誌
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..
iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった - テクメモ
iPhoneやAndroid風にマウスでフリックスクロールできるようにするjQueryプラグインつくりました。 ページ末端を過ぎると戻るような動作を再現しています。ページ区切りを設定するとiPhoneのホーム画面のようなUIも実現できます。 現在はアルファ版として公開中。 デモ デモ（ページ全体） ダウンロード コードサンプル ページ一部をフリックできるようにする場合。 $('.selector').flickable(); ページ全体をフリックできるようにする場合。 $(window).flickable(); ページ区切りを作る場合。sectionオプションでセレクタか要素を指定します。 $('.selector').flickable({ section: '.content' }); オプションの取り方などを含め、jQuery UIと同じような実装にしています。 詳しくは、http
指定位置までスクロールするとレイヤーをにょきっと表示して注意を引くjQueryプラグイン m5noticeDisplay :: 5509
指定位置までスクロールしたときにレイヤーを表示させることができます。 ブログを読み終わったあとに注意を引きたいレイヤーを表示して、ソーシャルサービス等への投稿などを促す効果も簡単に実装できます。（レイヤーの中身は別途必要です） 元ネタは、長谷川恭久さんのcouldから。「いかがでしたか？」というレイヤーが出てくるのですが同じような効果を簡単に実装できます。 上からにょきっと表示する以外にも、指定レイヤーをフェードやスライドで表示させたりできます。 動作サンプル a (上からにょきっと 動作サンプル b (フェード 必要なファイルを読み込む jQueryとm5noticeDisplay.jsを読み込みます。 任意の要素に対して実行する トリガーとする要素に対して実行します。トリガーとなる要素が画面内に入る直前あたりで注目させたいレイヤーを表示します。 HTML via: World Wide
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
画像表示に関連するJQueryプラグイン15＋1個紹介
JQuery便利ですね。Javascriptを最近始めたので今まで触る機会が有りませんでしたが、実に素敵ライブラリです。今回は画像表示系に絞って、プラグインを紹介したいと思います。 （プロトタイプ.jsをはるか昔に触ったことがありますが、つらい記憶しかございません。良い時代になったものです。ヘッダ絵は可愛かったから貼った。他意はない。）
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目の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プラグインによって、比較的簡単に実装できま
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームのテキストエリアをより使いやすくするテクニック集
Site Under Maintenance
