2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013当ブログでもお馴染みのCodePenから、スタイルシートやスクリプトを使って実装された2013年にもっとも人気のあったスゴイデモを紹介します。 Top Pens of 2013 Top Pens of 2013はベスト100が掲載されており、どれも見応え十分のワクワクするクリエイティブな作品ばかりですが、その中からトップ10を紹介します。
【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
スマホでアニメーションするときはcss3の「translate3d」を使おう
スマホでアニメーションするときはcss3の「translate3d」を使おう スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。 投稿日2011年09月16日 更新日2011年09月16日 jQueryのアニメーション たとえばある要素をクリックしたときスライドするアニメーションをjQueryで書くとこんな感じですね。 javascript $('#rect').click(function(){ $(this).stop().animate({'marginLeft' : '300px'}, 300); }); css3のアニメーション 同じことをcss3の
HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
