[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble
テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。 jRumble デモ 振るわせるアニメーションは、ガタガタをはじめ、ぷるぷる、ちりちり、などにすることができます。 [ad#ad-2] jRumbleの実装 jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。 JavaScript 「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jrumble.1.0.js"></script> JavaScript ガタガタさせるDOM要素をスクリプト
MacのStackの動きを実装するjQuery – creamu
洗練されたインターフェースを実装したい。 そんなときに参考になるのが、『”Outside the Box” Navigation with jQuery』。MacのStackの動きを実装するjQueryです。 MacのDock風の動きはよく見られますが、Stackの動きを作っていますね。動きが軽快でかなり気持ちいいです。HTMLはul, liでクリーンに書かれていますね。 デモは以下から。 Demo – see it in action 一度見てみてください。 “Outside the Box” Navigation with jQuery いろいろぱつぱつだったけどようやく少し落ち着いた。一つリリースできて、もう一つリリースできそうで、いい感じです。クライアントに喜んでもらえるとがんばった甲斐がありますね。
jQueryはモナドだ - id:anatooのブログ
この記事はjQuery is a Monad | Important Shockという記事の勝手訳です。 追記1: bonotakeさんが補足記事を書いてくれています → JQueryがモナドかどうかとか - たけをの日記＠天竺から帰ってきたよ 追記2: hirataraさんが補足記事を書いてくれています → jQueryは本当にモナドだった - 北海道苫小牧市出身のPGが書くブログ Haskellプログラマーは誰しもがモナドに関する各々のチュートリアルを書くと言われる。というのも、一度モナドの定義とその可能性を理解すれば、モナド全体を囲む神秘性に挑戦して打ち破るのが容易になるからだ。門外漢からすれば、モナドはHaskellを真に理解することを妨げる不可解な障壁だ。モナドはとても不適当な名前で呪われていて、一風変わった文法を持ち、一度に何もかもやってしまう様に見える。しかしながら、その動き
jQueryを上手に使ったサイトのお手本を色々探して参考にできる「jQuery Style」:phpspot開発日誌
jQuery Style - A gallery showcasing awesome sites built with jQuery jQueryを上手に使ったサイトのお手本を色々探して参考にできる「jQuery Style」。 jQueryでいろいろ出来るのはわかった、でもサイトに実際に上手く使うにはどうしたらいいの？どうやったらよくなるだろう？と思うことがあると思います。 そんな時、jQuery STYLEで色々と見て参考に出来そうな部分があったら真似していって改善していく、ということが出来そう。 単純にサイトのサムネイルを取って掲載しているということではなくて、どういう部分でjQueryを使っているかについても一目で分かるようになっています。 ↑のサイトの場合、ツールチップなどいろいろとjQueryを活用していることが分かるアイコンが明示されています。 こうしたまとめサイトの作り方
webデザイナーのためのjQueryベストプラグイン＆チュートリアル10個
かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」:phpspot開発日誌
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い
第5回 難しくなる前にFirebugの活用を学ぶ | gihyo.jp
内容が難しくなる前にFirebugに慣れる！ 第1回から第4回まで、jQueryについての各セレクタやメソッドなどを見てきました。各回で簡単なサンプルも載せていましたが、皆さんここまでの内容については問題なくついてこれていますでしょうか？ まだjQueryの基礎について全てを説明し終えてはいないのですが、そろそろスクリプトも長くなってきて、考えることも難しくなってきています。第3回と第4回の内容を振り返ってみても、少しずつスクリプトの量も増えてきているのがわかると思います。この先も、内容が増えていくにつれて、スクリプトも長く、手順をうまく考えなくてはならなくなってきます。 内容がもっと難しくなっていく前に、一度ここで復習をして、この先に備えておきましょう。 Firebugをもっと使ってみる ここまで、いくつかサンプルなどを紹介してきましたが、まだまだjQueryがいまいち理解できていない人
JavaScript/HTML5, iPhone/Android, ハイビジョン映像, 自動化関連：[OpenSpace]
Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス／アプリケーション...のページを参照してください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://solidstate.jp/ContentsDisplay/floatingBox/script_60.html
http://solidstate.jp/
http://solidstate.jp/Navigation/navigationMenu/script_126.html
[JS]フォームの入力時にラベルがスライドするスクリプト -Sliding Labels
jQuery Ajax Eventsのコールバック1
[JS]パネルをスムーズに自動スクロールさせるニュースティッカー