[JS]jQueryを使ってSEOにフレンドリーにするポイント
Adobeのサイト「Adobe Photoshop CS5 Extended」に使用されているようなスライドアウトするパネルを実装するチュートリアルをTutorialzineから紹介します。 Adobe Photoshop CS5 Extended 「＋」マークのラベルをクリックすると、それに対応したパネルがぐぃーんとアニメーションでスライドアウトします。 各パネルのエレメントはp要素で実装されており、検索エンジンのロボットにもしっかりと見えるように配慮されています。 これらはページロード時にjQueryによりマークアップが変更され、パネルのエレメントとして表示されるよう設計されています。
[JS]タイル状のパネルをダイナミックに伸縮させるスクリプト -InfoGrid
グリッドに沿って配置されたパネルをダイナミックなアニメーションで伸縮させるスクリプトをCSS-Tricksから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="info-col"> <h2>Batman</h2> <a class="image batman" href="http://jprart.deviantart.com/">View Image</a> <dl> <dt>Super Power</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe
[JS]広告やプロモーションを邪魔にならないように表示するスクリプト -Meerkat
広告やプロモーション、スプラッシュコンテンツを掲載したパネルをアニメーションでスライド表示させるスクリプトをJarod Taylorから紹介します。 Meerkat demo 2 パネルはブラウザの上部や下部から表示され、上のキャプチャは下部からアニメーションでスライド表示されたものです。 スプラッシュページのように全面に表示することもできます。 demo 3 スクリプトのオプションでは、ロード時の状態、パネルの表示位置、アニメーション（スライドorフェード）、アニメーションのスピードなどが調整できます。 MeerkatはjQueryのプラグインのため実装にはjquery.jsが必要です。 実装する際のサンプルコードの掲載もあります。 How-To Use Meerkat
洗練されたエフェクトでパネルをスライド表示するスクリプト -Feature List
洗練されたエフェクトでパネルをアニメーションでスライド表示する軽量のスクリプトをjQueryGlobeから紹介します。 Feature List demo スクリプトは2KBと軽量で、Flashを使用せずに美しいエフェクトを実装しています。 パネルは複数の設置が可能で、リスト要素で実装されています。 また、オプションでは最初に表示するパネルの指定、マウスホーバー時の動作、自動切り替えの時間などを簡単に設定することができます。 Feature ListはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]複数のパネルをダイナミックにスクロールさせるスクリプト -jParallax
jParallaxは、複数のパネルをパララックスで奥行きを表現し、マウスの動きに合わせてダイナミックにスクロールさせるスクリプトです。 jParallax 複数のイラストを重ねただけでも面白いですが、下記のデモのように写真画像を使用したものや、単に大きい画像のビューアーとしても面白いものとなっています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]マウスホイールにも対応したパネルをスライドするカルーセルのスクリプト -horinaja
[JS]パネルを水平方向にスライドしてエリアを拡大するスクリプト -sliding menu revisited
