水平方向に長いコンテンツをスムーズなアニメーションで横スクロールさせるjQueryのプラグインを紹介します。 X-Rhyme.js [ad#ad-2] デモページが少し分かりにくいのですが、左に配置された四つの矩形がナビゲーションで、そこをクリックすると、コンテンツを横スクロールで表示します。 デモページ：「Work」をクリックしたキャプチャ 横スクロールの操作は、マウスホイールにも対応しています。 JavaSciprt スクリプトのオプションでは、ナビゲーションのセレクタ、スクロール時のスピード・アニメーションを変更することができます。 $('.horizontal_items_container').xrhyme({ navigationSelector : '.anchor a', anchorMode : true, wheelSpeed : 0.7, animationTime
以上のようなアニメ GIF を作成するチュートリアルです。 キラーンとさせたい画像を Photoshop CS5 で開く 何か光らせたいバッチなら何でも良いです。 実はとても簡単なキラーンを作る 以下のようにまず白色の長細いシェイプを作ります。 そのシェイプを45度程度くらい傾けます。 シェイプの透明度を40%くらいにします。 キラーンの流れのフレームを作る 次にアニメーションを作ります。ウィンドウからアニメーションを開きます。 既に上の画像の右下に丁寧に矢印を付けておきました、コレをクリックするとフレームが出てきます。 既に丁寧に矢印があります。ここをクリックして秒数を2秒に変更です。また変更したらついでに以下の画像の中に赤枠で囲ったところをクリックしてフレームを新規作成しておきます。これが始点と終点となります。いわゆる今回の場合はスタンバイという感じで。 次に先ほど作ったような適当な感
JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。 jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。 どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。 前置きはこれくらいにして、今回は次のようなカラ
パネルをクリックすると、次々にパネルがスライドして重なり順が変わるエフェクトを実装するjQueryのチュートリアルを紹介します。 Opera mobile window chooser, recreated with jQuery デモページ [ad#ad-2] このエフェクトはOpera Mobileの「window chooser」を模したものらしいです（持ってないから分からないです）。 HTMLはリスト要素で実装されており、非常にシンプルです。 HTML 最小限の要素にした例です。 最初に一番上にするパネルに「current」を与えます。 <ul id="container"> <li class="current">最初に表示するパネル</li> <li>パネル2</li> <li>パネル3</li> <li>パネル4</li> </ul> HTML デモでは、パネル内のコンテンツ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く