【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方
こんばんは、企画の林です。 今回は iPad 専用ウェブアプリ、Sleipnir Start for iPad の開発で学んだ CSS3 でのアニメーション処理についてお話します。 iPhone / iPad 向けのウェブアプリを作ろうと考えている方で jQuery 使いの人に優しい内容です。 ※ Sleipnir Start for iPad が何か分らない方は前回の記事をどうぞ。 iPad 上のブラウザで、ネイティブアプリのように滑らかにのアニメーションさせるためには jQuery.animate() を使ってはいけません。 CSS3 の transform:translate3d を使って GPU 上で処理させる必要があります。 （jQuery.animate() 関数はお話にならないくらいカクカクした動きになってしまいます。） 上下左右どの動きも transform:transla
iPadなどのタブレット端末に激しく使えそうなJavaScript「Kaiten browser」
twitter facebook hatena google pocket スマートフォンにとってのjQuery Mobileがあるように、iPadなどのタブレット端末には「Kaiten browser」なのかもしれません。 とりあえず、紹介のみ。 Via：Kaiten sponsors Kaitenのデモを触っていただければわかるかと思いますが、タブレット端末に適しているナビゲーションと動きを与えられます。 初期画面 TwitterのTLを表示 フルスクリーンで表示 サイトを表示 ファイルはこちらからダウンロード可能です。 Kaiten browser | jQuery Plugins 基本的にすべてJavaScriptでごりごりと書いていくようです。 下記Hello Worldの例 (function($){ // keep a reference to Kaiten's contai
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker - かちびと.net
iPadや、iPhoneなどのタッチデバイス の普及で、個人的にも電子書籍への 関心がかなり高まりました。そんな中、 割と良さそうな電子書籍専用のフレーム ワークがあったのでメモがてらご紹介。 こういうの覚えておくと重宝しそうですね。 なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より「電子」らしく表現出来ると楽しそうですね。 HTML5で作る電子書籍用のフレームワークです。jQueryやiPadのようなタッチデバイス向けのフレームワークとなっています。 複数フレームワークを併用 Lakerには定番のjQueryや、iPhone、iPadで黄金比を保つcssフレームワークのLess Framework、HTML5+jQuery製動画プレイヤーのjPlayer、スワイプイベントをサポートする為のライブラリ、TouchSwipeなども搭載されてい
iPad simulator in HTML and JS
Let me tell you what a crazy week it’s been regarding my iPad Simulator A little background I’ve thought about creating the iPad simulator shortly after I bought my iPad. I was fascinated by the UI and wanted to see if I can recreate it. This isn’t the first online simulator I’ve built, before this, was a Nokia n97 simulator, also built with JS + CSS (http://nokian97.co.il) I’ve uploaded the iPad
iPhoneやiPadにも対応・モニターサイズに合わせて拡大表示するLightbox風jQueryプラグイン - かちびと.net
iPhoneやiPadにも対応した、モニター サイズに自動的に合わせて拡大表示 してくれるjQueryプラグイン、Touch- Galleryのご紹介です。Lightbox系の スクリプトは沢山ありますが、こちらも 一つの選択肢として思えておくといつか 役に立つかも、と思ってエントリー。 PCは勿論、iPhoneやiPadでも、そのモニターサイズの幅に合わせてLightbox風にフルスクリーン表示してくれます。特に設定も不要なのは楽で良い感じ。というか、iPhoneやiPad向けに作られたっぽいですね。 Touch-Gallery ↑ モニターのサイズに自動で合わせて拡大表示してくれるjQueryプラグインです。 ↑ PCで見るとこんな感じ。基本的には普通のLightbox系の拡大表示です。 ↑ iPhoneで見てもモニターサイズに合わせて拡大表示します。 ↑ 横にしても自動的に横幅に合わ
これはいい！iPadテーマのjQuery画像ギャラリー:phpspot開発日誌
Build an iPad-Themed Image Slider with jQuery | Design Shack これはいい！iPadテーマのjQuery画像ギャラリー。 画像ギャラリースクリプトは色々ありますが、iPadの中に映し出されたようなブラウザ上で動作する画像ギャラリーです。 デモページを見れば、細かなデザインにもAppleっぽさが取り入られているが分かります。 ちょっと変わったことをしたい場合や、iPadに関連するサイトやアプリ紹介ページなんかで使えるかもしれませんね。 関連エントリ 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集 超クール画像ギャラリーが作れるJavaScriptライブラリ どんな写真も指定サイズにまとめてギャラリーにできるjQueryプラグイン「Image Scale Carousel」 画像ギャラリー
jQueryでiPhone/iPadの向きを検出する[to-R]
jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出
![jQueryでiPhone/iPadの向きを検出する[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1788fe5c4e0abeec501baa392c032db6a3514abe/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F20100817_01.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobile 1.1.0 日本語リファレンス
本当にiPad“だけ”にCSSを読み込ませるには。