IE6もOK！jQueryプラグインでぐりんぐりんする画像切り替えを作る
twitter facebook hatena google pocket 最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <amp-img src="画像パス1"> </figure> <figure> <amp-img src="画像パス2"> </figure> <figure> <amp-img src="画像パス3"> </figure> </div> </div> あとはJav
3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」
twitter facebook hatena google pocket トップページとかで告知エリアとしてメインビジュアルを大きい画像で回すケースが見受けられます。 多くがFLASHで実現しているかと思いますが、jQueryプラグインのProfessor Cloudでも実現が可能です。 sponsors 使用方法 Professor Cloudからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="cloud-carousel.1.0.5.js"></script> <script type="text/javascript"> $(function(){ $("#id名").CloudCarousel({
スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」:phpspot開発日誌
スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」 2011年06月24日- Welcome AlbanX.com スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」。 次のような見栄えで、スマートフォンでスワイプすれば回転するようなUIが作れるjQueryプラグインのご紹介です。PCでもホイール等で動作します。 スマートフォンサイトの重要度が今度ますます高まってくると思いますが、こうしたUIを実現したいという時に使えますね <div>の中に<img>を並べて初期化するようなのでHTMLも汚くなりません。 関連エントリ エレメント内のテキストを絵文字に自動で変換してくれるjQueryプラグイン「jQuery Emoticons」 テキストにグラデーションをかけられるjQueryプラグイン
3D風に飛び出すフォトギャラリーをjQueryで実装する方法 | Web活メモ帳
jQueryを使った面白い画像ギャラリーを見つけたのでご紹介。 画像にマウスオーバーすると、3D風に飛び出すようになっています。 デモ IE系だとうまく動作しないようですが、こういったエフェクトはインパクトがありますね。 一味違うエフェクトを実装したいという方、下のリンクからどうぞ
CSS3をフル活用した立体的な画像ギャラリー作成デモ:phpspot開発日誌
Create a CSS3 Image Gallery with a 3D Lightbox Animation - Inspect Element CSS3をフル活用した立体的な画像ギャラリー作成デモ。 一見、角丸に綺麗にデザインされたギャラリー。これだけでもいいのですが カーソルを合わせると立体的に浮上がります。 更にクリックするとLightBoxエフェクト。 単純に使うだけでなく、中身を解読すれば、CSS3についての知識が深まりそうです。 関連エントリ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 超カッコいいApple風スライドショーギャラリー作成チュートリアル スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ
Cloud Carousel - A 3d Carousel in Javascript
startSection('doctype'); ?> endSection();?> startSection('head');?> endSection(); $templ->startSection('content'); ?> Cloud Carousel - A 3d Carousel in Javascript There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance
画像を3Dにぐるぐる回すFlashコンテンツ (flShow Carousel 1.7) -稀によくあるブログ
非常に滑らかな動きで、オンマウス時にピタリと止まってくれるので、ちょっとしたメニューとして入れてみても良いかもと思えます。 この前の記事でmootoolsを使用した同様のものを紹介しましたが、こちらのほうが設置、設定共に簡単で、使いやすいと思います。 画像も特にサイズを合せたりしなくとも、表示位置の大きさに合せて自動で調節されるので、画像同士の高さの差があまりにも大きくなければ、そのままxmlファイルに書き込んでも大丈夫だと思います。 折りたたむ xmlファイル書き方 表示する画像は全て、ここに書き込みます。 サイズはjsで書き込んだ全体のサイズに自動で縮小されるのでここでは画像パスと、画像からのリンクを書き込みます。 <?xml version="1.0" encoding="utf-8"?> <!-- fhShow Carousel 1.7 configuration
はてなブログ | 無料ブログを作成しよう
うめぇヨーグルトソースでもいかがですか。個人差にもよりますが。もしよろしければ。 お久しぶりです。 最近うんめぇ〜と思ってるヨーグルトソースがあるので、書いていこうと思います。 ヨーグルトとハーブ類をもりもり使うので、そういうのが食べられない方にはうんめぇソースではないです。ごめんなさい…。もしよろしければお茶だけも…旦~ 【用意する…
JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ:phpspot開発日誌
Professor Cloud JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ。 枠内を画像が３Dで回転します。通常こうしたUIを作るにはFlashが多いですが、JavaScriptでやっちゃってます。 クリックすればLightBoxが開きます。 関連エントリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」
jQueryで複数の画像を立体表示できる「jQuery Image Cube」:phpspot開発日誌
jQueryで複数の画像を立体表示できる「jQuery Image Cube」。 無茶しやがって、、という感じのJavaScript ですが（＾＾；）、なかなかおもしろいので紹介。 次のように、画像を立体的にして回転させるなんていうことがjQueryとの組み合わせで簡単に実現出来ます。 実装は次のように１行で実装可能。 $('#defaultCube').imagecube(); 一昔前のGIFアニメで無理やり画像を回転させてるのを思い出しました。 以下のエントリを参照してください。 jQuery Image Cube
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Interface elements for jQuery - Documentation - Carousel