Tag : Gallery

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作するフリック/スワイプ動作UIをjQueryで実装する方法を紹介しましたが、前回の単純なフリック/スワイプのUI動作に加えて、自動で次の画像に切り替わるスライドショー動作とメインビジュアル部分にNEXT/BACKのボタンを追加したパターンでの画…

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR