jQueryとCSS3を使った3Dのフォトスタック実装例:phpspot開発日誌
jQuery & CSS3 3D Interactive Photo Stack jQueryとCSS3を使った3Dのフォトスタック実装例。 複数枚の画像を重ね合わせて次のように写真リストを単に並べるだけでなく３Dにしてみたデモとソースが公開されています。 動きにはjQuery、回転などにCSS3を使っている感じです ページ下部のテキストにカーソルを合わせるとアニメーションで画像が切り替わります。ここら辺わかりづらいので使う場合は直したほうがよさそう。 CSS3のプロパティが組み合わさることでより色々なテクニックが出てきそうで楽しみです 関連エントリ ピュアCSS3でタイピングアニメーションするデモ アイコン付きの分かりやすいボタンをCSS3で実装するサンプル CSS3で動画再生部分を立体的にする等のデモ CSS3を使ったクリエイティブなテキストエフェクト集２３ ステップで学べるCSS3ボ
2Dや3Dの変形アニメーションを実現できる「TransformJS」:phpspot開発日誌
TransformJS - 3D and 2D Transforms for jQuery 2Dや3Dの変形アニメーションを実現できる「TransformJS」 例えば、サムネイル画像をクリックすると画像を立体的に回転させながら拡大するというようなことが出来ます。 クルクル回転しながら拡大 jQueryのanimateメソッドの引数パラメータを調整するだけでアニメーションを調整できるみたいです 関連エントリ カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 カーソルを合わせた際に背景画像をアニメーションさせるメニュー実装jQueryデモ グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」 CSS3なキーフレームアニメーションのデモ
複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」:phpspot開発日誌
jQuery.Smart3D Info for Coders 複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」 マウス位置に応じて画像をずらせて奥行きを表現できます。 実装方法が簡単で、ul以下にliとimgタグを並べて初期化するだけというものです。マークアップ的にあんまりよろしくないのかもしれませんが、こうしたUIが必要なときに手軽に実装できます。 単なる画像よりも、こうしたインタラクティブな要素を入れるとより注目を集められそうですね 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 ページの要素を3D化できる面白jQueryプラグイン「3Dify」 次世代のイメージマップを実現できるjQueryプラグイン「ImageMapster」
3D効果を使って迫力あるスライドショーを作れる「Slicebox」:phpspot開発日誌
Slicebox - A fresh 3D image slider with graceful fallback | Codrops 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 一見普通の画像のスライドショーかとおもいきや、画像切替の際に超かっこよく3D効果を使って切り替わるスライドショーの実装ができます。 画像が立体的にぐるりと切り替わる感じは超クール エフェクトが色々と用意されています。 jQueryプラグイン形式なので、<div>のなかに画像をつらつらと並べて初期化するだけでOKの簡単実装。 3D transformを使っているみたいですが、フルに活用するとこういうこともできるんですね 関連エントリ 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン 次の画
[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などのデザイン
スマフォでも使える３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プラグイン
[JS]2D、3Dの多彩で面白いエフェクトを備えたスライダーのスクリプト -Flux slider | コリス
iPhone, iPadなどにも対応した、画像のスライド時にCSS3アニメーションを採用し多彩なエフェクトが楽しめるスライダーを実装するjQueryのプラグインを紹介します。 Flux slider デモページ [ad#ad-2] 画像の変更時は、上記のバー状のものをはじめ、ブロック状、サークル状など、2D、3Dのダイナミックなアニメーションが用意されています。 Flux sliderの実装 HTML 各画像をdiv要素で内包します。 <div id="slider"> <img src="img/avatar.jpg" alt="" /> <img src="img/ironman.jpg" alt="" /> <img src="img/tron.jpg" alt="" /> <img src="img/greenhornet.jpg" alt="" /> </div> JavaScr
ページの要素を3D化できる面白jQueryプラグイン「3Dify」:phpspot開発日誌
3Dify Plugin ? Rendi qualsiasi elemento della tua pagina web 3D ページの要素を3D化できる面白jQueryプラグイン「3Dify」 マウスカーソルを合わせると、要素がインタラクティブに３Dで動くというインタフェースを実現できるjQueryプラグインです。 通常は平面の要素がグリグリ３Dで動きます。 ブログレイアウトでも次のようにグニャグニャとなります。ちょっとしたサプライズ要素として覚えておいてもよさそうです。 動作ムービーは以下。 一昔前はこんなことが出来るなんて誰が想像したでしょう、というインタフェース。 使いどころはそれほど無いかもしれませんが、覚えておけば何かびっくり要素を入れたい、的な時に役立つかも。 関連エントリ スポットライトを画像にあてる効果を作れるjQueryプラグイン「Spotlight」 リンクの開きかた
要素を3D回転させて注目を集められるjQueryプラグイン「rotate3Di」:phpspot開発日誌
jQuery Plugin: rotate3Di - Flip HTML content in 3D - zachstronaut 要素を3D回転させて注目を集められるjQueryプラグイン「rotate3Di」。 次のように、四角い要素にカーソルを合わせると回転します。 Chromeだと本当に滑らかに動いてインタラクティブ要素として面白い効果を付けられます。 次のように、要素に対して rotate3Di メソッドを実施するだけ。 第一引数は回転のdegreeで、第二引数はdurationとなります。 $('#rot-ex').rotate3Di(180, 3000); デモにあるような小さいものではなく、もっと大きな要素を回転させると大きなインパクトが得られそうです。 対応していないブラウザでは何も起りませんが、なかなか面白いプラグインですね。 関連エントリ ピュアCSS3で3Dアニメー
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
JavaScriptの3Dエンジン·Three.js MOONGIFT
Three.jsはJavaScriptのオープンソース・ソフトウェア。Webブラウザが高機能化していく中で競われているのがJavaScriptエンジンの性能だ。実行速度が向上することによって、Webアプリケーションなどの利用が促進される。HTMLレンダリング性能と合わせて重要な指針だ。 マウスの動きを追従する エンジンが高機能化すれば実現できる幅が広がる。その一つが3Dレンダリングだ。JavaScriptで3Dオブジェクトが表現できるようになれば、ゲームはもちろん様々な分野で活用できるだろう。そのレンダリングエンジンとしてThree.jsを紹介しよう。 Three.jsは3Dオブジェクトをレンダリングするライブラリで、先日話題になったGoogleマップを使ったマッシュアップ「The Wilderness Downtown」もこのThree.jsを使って作られた一つだ。さらにマウスで反応する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA