stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅

デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7

デモ：Around Other Things 回転の中心に他のエレメントを置いたデモ。 Roundaboutの使い方 Roundabouの実装方法を簡単に紹介します。 詳しい実装方法については「Learn」をご覧ください。 Roundabout -Learn HTML ぐるぐる回転させる各エレメントをリスト要素で実装します。 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> JavaScript jQueryのセレクタで指定し、Roundaboutを実行します。 <script>

デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jQuery.circl

幅：480pxで表示 [ad#ad-2] 実装 HTML 各パネルはリスト要素で実装します。 リスト要素を内包するdiv要素のidとclassに「st-accordion」を付与します。 <div id="st-accordion" class="st-accordion"> <ul> <li> <a href="#"> Item Title <span class="st-arrow">Open or Close</span> </a> <div class="st-content"> <p>Some content</p> </div> </li> <li> ... </li> </ul> </div> スクリプトのオプション スクリプトのオプションでは、アニメーションの種類、スピードなどが設定できます。 $.Accordion.defaults = { // index of ope

リスト要素で実装したアイテムをアニメーションでスライドするさまざまなインターフェイスのページ機能付きパネルにするjQueryのプラグインを紹介します。 最もベーシックなデモです。 パネルがアニメーションでスライドし、キーボードの矢印キーの操作にも対応しています。 HTML 各パネルはシンプルなリスト要素で実装されています。 <ul id="list1" class="onoPager_noJs"> <li>This basic pager offers paging per item. It also offers a 'previous' and next 'next' button. it also offers direct links to each page item.</li> <li>...</li> <li>...</li> </ul> JavaScript jQuery(

JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、

jquery vticker (vertical news ticker) JugBit 電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」。 特定のdivに次のようにulでリストを定義しておいて、$(element).vTicker(); とすることで簡単にアニメーションするニュースティッカーが実装できます。 幅、高さは固定できるので、自由にレイアウトできるところもナイスです。 表示時間が終わって消えるリストがグレーにフェードアウトするところも芸が細かくてナイス。 デモを見る デモはCSSでスタイリングされておらず味気ないものですが、CSSで綺麗にデザインしてあげることでかなり映えそうです。 オプションで、次の挙動についてカスタマイズも可能です。 ・スピード変更 ・待ち時間変更 ・アイテム表示数変更 ・アニメーション指定 ・マウスで停止するか指定

ulで書かれたリストをニュースティッカー風に表示できるjQueryプラグイン「List Ticker」 2010年07月12日- Plugins | jQuery Plugins ulで書かれたリストをニュースティッカー風に表示できるjQueryプラグイン「List Ticker」。 通常、リストというとズラズラならんだ表示になりますが、ListTickerを使うことで、１つの要素内でアイテムをアニメーションで切り替えていくような実装にすることが出来ます。 定義するリストは何の変哲もないulリストです。 <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul> 実装は次のように、list_ticker メソッドに speed

<textarea name="code" class="js" cols="60" rows="5"> $("#fullswitch").click(function() { $("#list").removeClass("compact"); }); $("#compactswitch").click(function() { $("#list").addClass("compact"); }); </textarea>

リストで実装された箇所をアニメーションで開閉するアコーディオンにするスクリプトをJoomlationから紹介します。 Flexible Accordion demo 「Flexible」とあるだけあって、高さが異なるリストや多用な要素が配置されたリストでも、アコーディオンのヘッダとコンテンツ箇所を指定しスクリプトを記述すると、アニメーションで開閉するアコーディオンに変更できます。 アコーディオンのヘッダには「class="accHeader"」、コンテンツには「class="accContent"」を指定します。 Flexible AccordionはjQueryのプラグインのため、実装にはjquery.jsが必要です。

多目的に使える、パネルを面白いアニメーションで水平にスライドするスクリプトをwoorkから紹介します。 Ultra versatile slider for websites demo デモでは、下部の「Previous」「Next」でパネルが水平方向にスライドします。 パネルの実装はリスト要素で、それをdivで内包しています。 liを増減することで、簡単にパネルの枚数を変更できます。