ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン:phpspot開発日誌
ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン。 ブロック要素があって、背景だけをアニメーションさせるという効果を簡単に作成できるようです。 要素中のテキストは動かないので、ページ全体のブロック要素の背景をパッとアニメーションで切り替えるのも面白い効果が得られるかもしれませんね。 ちょっと分かりづらいと思うのでデモを見てください。 関連エントリ 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例
webカメラに簡単アクセス可能にするjQueryプラグイン「jQuery webcam」:phpspot開発日誌
jQuery webcam plugin - Website and Application Intelligence webカメラに簡単アクセス可能にするjQueryプラグイン「jQuery webcam」 webカメラ経由で写真を撮って表示させたりすることが出来ます。 更には、そのままPHPに送信して保存なんていうことも出来るみたいでなかなか便利そうです。 コード例は次のように、幅、高さとFlashのSWFファイルを指定し、各種コールバック関数を定義するだけです。 ここらへんの仕様に詳しくない場合でも、簡単に実装できるというのは便利ですね。 関連エントリ WEBカメラの映像をブラウザ上で録画できるオープンソース「Red5 recorder」
jQueryでアニメーションさせるとき | STUDIO Bloom 大阪・北摂地域を中心としたWebサイト・システム制作
jQueryに限った話では無いかとも思うのですが… ブロック要素をスライドさせたりしてアニメーションさせる時、表示がガタガタと乱れて見苦しい時があります。そんな時は… アニメーションさせるブロック要素に「overflow:hidden」を指定するとよろし。というTips スクロールバーが既に出てるブロック要素なら、アニメーションの開始直前に指定してあげれば見た目上にはあまり違和感無しです。 んでここからが大事で、iPhone用のWebアプリを作る時にそれっぽいUIを実現することが出来る「jQTouch」。画面遷移アニメーションで結構ガタつきます。 そんな時にもこのTips、画面単位のDIVにoverflow:hiddenを指定してあげると（多少ｗ）改善されます。 ちなみにローカルアプリをHTML+CSS+JSで構築し、DBにはHTML5のClient-side Databaseを使いました
Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」:phpspot開発日誌
Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」 2010年11月05日- 2011/5/7: 本ライブラリに脆弱性がありましたので速やかにバージョンアップを実施して下さい。(詳細) Twitter/facebook/mixi/GREEのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」。 仕様について理解しなくても、このプラグインを読み込んでちょちょっと数行書くだけで実装出来てしまいます。 例えば、facebookなら、$('.facebook').socialbutton('facebook_like'); と１行書くだけ。 mi
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分
[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify
IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて
javascript | デジタル料理人
JavaScript環境で、navigator.userAgentを見てMacOSのバージョンだけを引っこ抜く方法があるか検討してみました。 Windowsなら入ってるんですけどね、Macって結構カオスだったはずなんですが限定すれば意外とイ
画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」:phpspot開発日誌
Davor Spasovski / Web Developer 画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」。 次のような１枚の画像を使って簡単に綺麗なカウントダウン＆カウントアップタイマーが実装できます。 タイマーを表示されるなら味気ないテキスト表示よりも画像で綺麗にやりたいですよね。 画像なので、画像編集ツールを使って簡単にフォントやデザインを替えられます。 元画像。これをjQueryでCSSスプライトを活用してタイマーにします。 残り１時間に設定したカウントダウンタイマー。ちゃんと時間表示になってますね。 カウントアップにも対応。スタート/ストップボタンによってタイマーの制御も出来ます。 地味に使いそうなので覚えておいてもよさそう。 関連エントリ 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」 色合いを選べるツール
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」:phpspot開発日誌
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 2010年10月28日- jQuery vScroll ? Simple animated vertical content scroller supporting varying heights HibboBlog カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 通常、divなんかにサイズを指定して、overflow:auto とかにすると次のようにスクロールバーがでますよね。 ただ、このスクロールバーはブラウザ依存でちょっとデザインにあわなかったりしてカッコ悪いという場合があります。 デモページ そこでこのプラグインを使えば、スクロールバーを消してしまうことが可能。 消しちゃうとコンテンツ見れないじゃん、という心配は不要で、ボタンをクリック
再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」:phpspot開発日誌
再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 2010年10月26日- jQuery Youtube Player 再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 このプラグインを使えば次のように、Youtubeの動画に独自の再生、動画送り、リピートボタン、ボリュームボタンの他、プレイリストを付けてリストから再生なんていうことができちゃいます。 YoutubeのコントロールはFlashの中にあるから無理と思っていましたがYoutubeのFlash側で対応したっぽいですね。（外部からJSでFlash内で公開された関数を操作してるようです） ↑プレイヤー下部のリストがプレイリスト。クリックで動画が切り替わります。 ↓現在再生中の秒数なんかも取れたりするようで
[JS]jQueryのプラグイン33+1選 -2010年9・10月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 bxSlider 多彩な表示方法に対応したコンテンツスライダー。 Sudo Slider 各パネルがブックマークできるコンテンツスラ
jQueryでコンソールを再現する「jQuery Console」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery ConsoleはjQuery/JavaScript製のオープンソース・ソフトウェア。Web上でターミナル操作を行うニーズは時々見かける。実用レベルに達するにはまだまだだが、ホスティング業者などで顧客に簡易的なコンソールをWebベースで与えている場合もある。 Web上でコンソール そんな時にWebブラウザからターミナル風に操作できる環境を提供するのがjQuery Consoleだ。Ajaxと組み合わせて使えば、実用レベルになるかも知れない。それ以外でも面白そうな使い方が考えられそうだ。 jQuery ConsoleはTry Haskellというサイトで用いられている。Web上でHaskellを学ぶのにコンソールを提供し、指定された文字を入力することでウィザード風にHaskellを学んでいけるというものだ。面白いアイディアではないだろうか。 JavaScriptの実行コンソールも
jTweetsAnywhere - jQuery Twitter Widget with @Anywhere support
June 13th, 2013 jTweetsAnywhere stopped working since Twitter moved from API Version 1.0 to 1.1 and now turned off V1.0. Due to personal reasons I was not able to work on my open source projects for the last 5 months. Therefore I couldn't update the code nor answer all your emails and requests. I really apologize for this. Since Twitter now requires applications to authenticate ALL requests with O
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog
2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。 jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。 ソースコード http://code.jquery.com/jquery-1.4.2.js http://github.com/jquery/jquery まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。 それと、jQuery ソースコードは Git で管理されて
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
opensocial-jquery - Google Code
画像の上に落書きできるjQueryプラグイン「jQuery-Notes」:phpspot開発日誌
http://caroufredsel.frebsite.nl/
HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集