ふわふわ切り替える感じで。 jQuery.gpFadeImageで簡易的な画像ギャラリーを。 こんな風に、ギャラリーページの入り口みたいなところで使ったらいいんじゃないかなと思います。
実装は超簡単、カスタマイズ性にも優れ、IE6にも対応、クリックで開閉する折りたたみコンテンツを設置するjQueryのプラグインを紹介します。 jQuery Collapse jQuery Collapse -GitHub [ad#ad-2] jQuery Collapseの特徴 jQuery Collapseのデモ jQuery Collapseの使い方 jQuery Collapseの特徴 軽量 約600バイトの軽量スクリプト。 クロスブラウザ対応 IE6+, Firefox3+, chrome5+, Safari4+, Opera10+ でテスト済み。 カスタマイズ モジュール式で設計しているため、簡単にカスタマイズが可能。 開閉する要素の変更、callback関数も用意されています。 クッキーのサポート 「jquery-cookie」を利用してクッキーをサポート。 ARIA遵守 障害
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
ウィンドウサイズに応じてli要素と select要素にスイッチできるjQuery プラグイン、Responsive Menuのメモ。 ブレークポイントを設定して、閲覧 するウィンドウサイズがそのポイント に達したらli要素で作ったメニュー をselectにしてコンパクト化します。 以前、CSS-Tricksでも記事になっていました(参照:Convert a Menu to a Dropdown for Small Screens)が、これと同じ機能です。孫要素までネストされたリストでもselectにスイッチできます。CSS-Tricksのもネスト対応してるかは調べていませんが・・ 普通にPCで見ると左のようにリストに、スマフォのようなウィンドウサイズの狭いデバイスだとselectにスイッチしてコンパクトにしてくれます。これ便利ですよね。 select化されてもネストされた要素はスペースで明
Innovation Slide - PlugIn jQuery 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innovation Slide」 動きが昔見たような紙芝居風なスライダーです。左にスライドし、奥にしまわれます。 WEB紙芝居的な使い方でやると面白いことができるかも データは ul li リストで定義して初期化するだけです。 jQueryには個人的にノーベル賞をあげたいです 関連エントリ jQueryベースの画像スライダー30まとめ 画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit」 Apple.comの新スライダーエフェクトを実装するjQueryプラグイン
暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認まず完成形を見てみ
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
Slidorion, A jQuery Plugin | jQuery Image Slider and jQuery Accordion | Random Demo スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」。 左側をスライダー、右側をテキストを入れたアコーディオンな感じのウィジェットが実装できます。 ほどよくアニメーションして良い感じです。 マークアップも綺麗に記述可能。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 ファイルアップロード関連のjQueryプラグイン10 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」 jQue
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin. Docs Download Why Craftyslide? Craftyslide was created first and foremost as an experiment, but secondly out of frustration with many plugins being written today. I found many slideshow plugins
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
jQuery Stylish Background Image Sliding effect | image slideshow 1枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル 説明が難しいのでデモを御覧ください。写真もいいのですが、タイル毎に切り替わるエフェクトはなかなかクールですね。 ファッションやアパレル関連のサイトで使うことができそうです 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 CSS3で実装された画像スライドショーサンプル HTML5&CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」
Posted: 2011.12.01 / Category: javascript / Tag: jQuery, アニメーション Appleサイトのスライダー(カルーセル?)は画像がばらばらに切り替わるのでとてもクールですね。 ということで、動きはあまり再現されていないのですが、それっぽいのを作ってみました。 使い方 こんな感じでマークアップします。 リストの数だけボタンを作成してください。 「id=arrow」という画像はボタンを追尾する画像です。 html <div id="slider"> <div id="thum"> <ul> <li><img src="img/01.png" width="128" height="128" /></li> <li><img src="img/02.png" width="128" height="128" /></li> <li><img s
Cool Highlighter Effect with jQuery | jQuery Plugins コンテンツをページ内でハイライトしつつ切り替えられるjQueryデモ 縦に区切ったコンテンツをベースにハイライトを使ってページを切り替えるというお洒落なUIを実現できます。 ページはキーボードによる切り替えが可能で、スライドショーっぽく使うことができます。 デモページ - 実際に動きを見てみましょう 関連エントリ XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか!って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
アニメーションで次々に表示するニュースティッカーを実装するjQueryのプラグインを紹介します。 IE6+をはじめ、スマフォ用のSafari Mobileにも対応しています。 jQuery News Ticker デモ [ad#ad-2] jQuery News Tickerの実装 jQuery News Tickerの実装 外部ファイル スタイルシートとスクリプトを外部ファイルとして指定します。 <link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="in
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
like Apple’s New Slide effect | jQuery Plugins Apple.comの新スライダーエフェクトを実装するjQueryプラグイン apple.com のページ上部にある製品一覧ウィジェット。かなり良い感じで動きますが、これを再現するjQueryプラグインが出ました。 説明しづらいのでデモを見てみてください。 apple.com の例 ヘッダーの製品部分の動きを見てみてください 今回紹介するプラグインのデモ ほぼ同じ動きですね。 なんというかappleってこういう細部にもこだわっていてその動き方とかにもセンスを感じるっていうところは本当にさすがだなぁと思いますね。 関連エントリ jQueryベースの画像スライダー30まとめ 画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit」 divを並べた後、たった1行でオシャレなス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く