Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。単純に並べられた要素がスライドするカルーセルはよくありますが並べられた要素の中央に位置する要素のみを拡大表示させるという少し変わった演出を加えたカルーセルパネルUIをjQueryを使って作ってみたので紹介してみます。jQueryで中央…

5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたがブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。【横スライドパターン】…

jQueryプラグインをまとめて紹介している記事やWebサイトは数多くありますが約1000個のjQueryプラグインを収集している「Unheap - A tidy repository of jQuery plugins」がプラグインを探す際にとても活用できそうだったので自分用メモとしてご紹介。Unheap - A t…

Googleさんの画像検索で使われているサムネイルをクリックするとすぐ下にアコーディオン形式で詳細エリアが広がるUI。このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので実験がてらjQueryを使…

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して画面幅めいっぱいでのコンテンツスライダーを紹介しましたが当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応さ…

一年以上前の記事になりますが「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法」と題して、画像がクロスフェードするだけのシンプルな画像ビューアーを実装するスクリプトを紹介しましたが紹介後、１ページ内に複数設置やリンクを張ったりキャプション（テキスト）を追加するパターンなどなど数多…

jQueryを使ってのコンテンツスライダーや画像スライドショーなどを出来るだけシンプルなスクリプトでに実装する実験やサンプルをいくつか紹介してきていますが最近よく見かける（流行り？）ブラウザウィンドウ画面の幅をめいっぱい使ってコンテンツ要素をスライドさせて魅せるコンテンツスライダーをまだ試したことがなかったので実験的に…

jQueryを使ってのコンテンツスライダーを実装するプラグインは多々ありますがjQueryとCSS3での3Dアニメーションでスムーズな切り替えを簡単に実装できる「Adaptor::jQuery content slider」がいろいろと参考になりそうだったので自分用メモとして紹介してみます。Adaptor :: jQu…

先日「jQueryでリキッド対応のカルーセルUIを作成する実験」と題して、ブラウザのサイズによって可変するリキッドカルーセルパネルUIの実装方法を紹介しましたがその動作に自動でスライドする機能を追加したパターンを作成してみたので紹介してみます。まずは動作サンプルから。jQueryでリキッドカルーセルUIに自動スライド機…

今までここでカルーセルパネルUIを実装するサンプルをいくつか紹介していますが、amazonのサイトでも使われているような、ブラウザ枠のサイズによってカルーセルに表示する個数を変化させるリキッド対応のカルーセルパネルを試しに作ってみたので紹介してみます。まずは動作サンプルから。jQueryでリキッド対応のカルーセルUIを…