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化してくれる拡張機能「3Dnator!」 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
[CSS]パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート
ホバー時：回転完了 実装 HTML パネルは、通常時の一枚画像、ホバー時のインフォメーションをdiv要素で内包します。 <div class="wrapper"> <div class="item"> <img src="images/contact.png"> <span class="information"> <strong>Contact Form</strong> The easiest way to add a contact form to your shop. </span> </div> </div> 実装のイメージは下記のようになります。 通常時は「front side」の画像が表示され、ホバー時に「bottom side」のインフォメーションが表示されます。 CSS まずは、ラッパーのスタイルです。 perspectiveを使用して3Dの奥行きを与え、transfor
スクロールに応じて要素が動く、パララックスを実装できるjQueryプラグイン「scrolldeck」 | Web活メモ帳
スクロールによるパララックス効果を実装できるjQueryプラグイン「scrolldeck」 スクロールすると、画像やテキスト、その他色々な要素がアニメーションするWebデザインを最近良く見かけます。 パララックス(視差効果)や細かなアニメーションするものまで、様々なものがあると思いますが、 本日紹介する「scrolldeck」を使用するとパララックス効果を簡単に実装できるようになります。 パララックスがどんなものか分からない方のために先にプラグインのデモリンクを貼っておきます。 デモ1 デモ2 デモ3 スクロールで画像がずれて行く感じがたまらないですね。 使い方 プラグインを初期化します。 $(document).ready(function() { var deck = new $.scrolldeck(); }); オプション設定をする場合 $(document).ready(func
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
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風スライドショーギャラリー作成チュートリアル スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ
画像を３６０度グルグル回転できるPicasaの埋め込みスライドショー
ネットショップ、とくにファッション系のネットショップであれば、商品を着ているモデルの画像を掲載するだけでも、大きく反応が変わりますよね。 さらに、その画像が３６０度回転すると、さらにユーザーの安心感や購買欲を強くすることができますよね。 いままでは、そのようなことを実現するために、かなりのコストと時間を要してしまいましたが、その障壁を、今回もまたGoogleが一気になくしてきそうです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 画像を３６０度グルグル回せる３Ｄビュースライドショー 「Picasa ウェブアルバムのスライドショー」は、複数画像をウェブ上にアップし、スライドショーにしてサイト上で公開することができます。そのスライドショーの機能に、マウスを左右に動かすことで画像送りできるものが加わ
JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ:phpspot開発日誌
Professor Cloud JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ。 枠内を画像が３Dで回転します。通常こうしたUIを作るにはFlashが多いですが、JavaScriptでやっちゃってます。 クリックすればLightBoxが開きます。 関連エントリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」
3Dで家の間取りを作れる実用的なフリーの間取り図ソフト「AutoDesk Homestyler」
可能性に限界を作ってはならない。人の思考もそうだけれども、家を建てたりリフォームするときにも同じことを言いたい私ですｗ そしてその構想を、いろいろな人に共有して、意見をもらうのもとても大事なことだと思っています。 今回は、そんなときにとても役立つ、フリーの3D 間取り図作成ソフトをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 家の間取りをリアルかつカンタンに作れるフリーソフト 「Autodesk Homestyler」は、フリーの3D間取り図作成 オンラインソフト。かなり精巧に再現することができるうえに、ブログやサイトへ埋め込んで共有することも可能になっています。 一軒家の間取りサンプル 「VIEW IN 3D」ボタンを押すと、3Dで見ることができます。仕様変更でここでは3Dで見
飛び出た？GIFアニメで明治初期の写真を3Dにしてみたから見て。 21枚。:DDN JAPAN
DDN は 音楽 ・ 映像 に関する デジタル アート を中心に情報ミックスを配信中
jQueryで複数の画像を立体表示できる「jQuery Image Cube」:phpspot開発日誌
jQueryで複数の画像を立体表示できる「jQuery Image Cube」。 無茶しやがって、、という感じのJavaScript ですが（＾＾；）、なかなかおもしろいので紹介。 次のように、画像を立体的にして回転させるなんていうことがjQueryとの組み合わせで簡単に実現出来ます。 実装は次のように１行で実装可能。 $('#defaultCube').imagecube(); 一昔前のGIFアニメで無理やり画像を回転させてるのを思い出しました。 以下のエントリを参照してください。 jQuery Image Cube
デザイナー・デベロッパーのためのAIRアプリ・ブラウザアドオン50 – creamu
WebAppStormで、デザイナー・デベロッパーのためのAIRアプリ・ブラウザアドオンがたくさん紹介されています。 いくつかご紹介しますね。 Splashup Light 無料。軽量な画像編集アプリ Fractal4D 無料。3D画像を作成できて、illustratorなどのソフトにエクスポートできる RichFLV 無料。FLVのメタデータ、キューポイント、サウンドなどを編集して、swfやmp3に変換できる e2vector 無料。レイヤー機能、マスク機能などを持ったイラストアプリ ImageSizer 無料。画像のリサイズ、回転、最適化、複数ファイルのリネームができて、複数ファイルをzipで書き出せるアプリ JustResizeIt! 無料。ドラッグ&ドロップで、画像をリサイズしてくれるアプリ kuler desktop 無料。AdobeのカラーマネジメントアプリであるKulerのA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.3defy.com/
平面上のグリッドに立方体を並べて絵や文字が描ける「Adobe Block Builder」NOT SUPPORTED
Interface elements for jQuery - Documentation - Carousel
3Dお絵かきサイト「Q-BLOCK」が凄い:phpspot開発日誌