Prototype Carouselは、複数の画像を少ない領域で、回転式のカルーセルのようにスライドして表示することができるスクリプトです。 Prototype Carousel Prototype Carouselは、Prototypeのプラグインで、動作にはprototype.jsとscriptaculous.jsが必要です。 script.aculo.us デモでは、スタティック版とAJAX版があります。
[JS]次々に画像を表示できる回転式のカルーセルスクリプト -Prototype Carousel
Prototype Carouselは、複数の画像を少ない領域で、回転式のカルーセルのようにスライドして表示することができるスクリプトです。 Prototype Carousel Prototype Carouselは、Prototypeのプラグインで、動作にはprototype.jsとscriptaculous.jsが必要です。 script.aculo.us デモでは、スタティック版とAJAX版があります。
セクシーに動作するスライドメニューバー実装JSライブラリ:phpspot開発日誌
Sexy sliding JavaScript side bar menu using mootools at Andrew Sellick When trying to conceive ways in which space could be saved on a web page I decided a sliding menu would work well as shown in the images below.セクシーに動作するスライドメニューバー実装JSライブラリ。 クリックするとニューっとアニメーションしてセクシーに開いてくれるメニュー実装のためのライブラリが公開されています。 デモはこちら CSSによってデザインできるので、デザインも簡単です。 ちょっと変わり種ということで、デザイン系のサイトで使えそうですね。
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb
jBreadCrumb demo パンくずはリスト要素で実装されており、既存のパンくずに適用することも簡単です。 「jquery.jBreadCrumb.js」の最後に記述してあるオプションでは、オープンするルール、オープンしておくレベル、アニメーションのスピード、クローズ時のサイズなどを変更できます。 オープンするルールの最大文字数と最小文字数を100に、エレメント数を1に、オープンしておくレベルを終わりから2に、クローズ時のサイズを20に変更。 jBreadCrumbはjQueryのプラグインのため、動作にはjquery.jsが必要です。
Featured Content Slider
Photo Credit: Kaustav Bhattacharya "Free Tibet" Protest at the Olympic Torch Rally Chicago Bears at Seattle Seahawks Fifth field goal, overtime win for the Seahawks How to Cook a Scotch Egg 6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up) 1 pound good quality sausage meat (i used ground turkey meat, s
[JS]設置が簡単なパネルをスライド表示させるスクリプト -Slide box
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
[JS]パネルをフェードで切り替えるシンプルな国産のjQueryのプラグイン -ImageNavigation
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」:phpspot開発日誌
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 2011年02月10日- jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に実装できてしまいます。 実際のコードは次のようにとてもシンプル。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="//www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /><
さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。
[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス
滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion - A Horizontal Accordion Plugin for jQuery 上記ページのスライドは、跳ね返るバウンスのアニメーションになっています。 [ad#ad-2] zAccordionのデモ デモでは、最小限の機能を備えたものから、最大限に拡張したもの、ちょっと面白いものまでが揃っています。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 <ul id="featured"> <li> <image src="/im
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
画像スライドショーのjQueryプラグイン-Slides : mignon-arrows
シンプルに画像をスライドショーさせるjqueryのプラグインです。 画像を切り替える時間やフェードアウトさせる時間も指定できます。 配布先 → Slides head内に下記を記述します <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.slides.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slideshow').Slides({ images : [ 'images/photo1.jpg', //スライドさせる画像 'images/photo2.jpg', 'images/photo3.jpg', '
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択でき
沿革や年表のようなタイムライン的なコンテンツをスライダーで実装するjQueryプラグイン・ jQuery Timelinr - かちびと.net
年表とか沿革とか、そういった時間の流れを 可視化したようなコンテンツをスライダーで 実装できる、というjQueryプラグインのご紹介。 jQuery Timelinrは、コンテンツのスライダー で、テキストで書かれた西暦が連動して 動きます。 まぁ沿革や年表に使わなきゃいけないわけじゃないんですが、こういうのも面白いかなと思ってタイトルに含めました。あとで自分で検索したいもので。 あ、別件ですが、今更ながらjQueryの記事カテゴリを作りました。RSSでもご購読頂けますので宜しければ。 こんな感じでパッと見はよくあるコンテンツスライダーなんですが、上にある年号が連動してスライドします。年号はナビとしても利用できます。年号はテキストで書かれていて、コンテンツに応じて色とフォントサイズが変わる、という仕組み。 縦もあるよ IE6とか7 IETesterでのIE6でも普通に動作しました。透過処理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cssglobe.com
[JS]画像のキャプションをスタイリッシュな動きでスライド表示させるスクリプト -slidingboxes
[JS]複数のコンテンツをクロスにスライドして自動表示するスクリプト
Site Under Maintenance
Javascript(Ajax)でお洒落なスライドショー [SmoothGallery] を試してみる。 > ターゲティング・マーケティング
Slot Dotatogel
