[B! animation] miguchiのブックマーク

miguchi id:miguchi

animationに関するmiguchiのブックマーク (13)

スマホでアニメーションするときはcss3の「translate3d」を使おう
Posted: 2011.09.16 / Category: javascript / Tag: CSS3, jQuery, アニメーションスマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の﹁translate3d﹂を使えば滑らかに動きますよ。 jQueryのアニメーションたとえばある要素をクリックしたときスライドするアニメーションをjQueryで書くとこんな感じですね。 javascript $('#rect').click(function(){ $(this).stop().animate({'marginLeft' : '300px'}, 300); }); css3のアニメーション同じことをcss
miguchi 2013/01/12
*web制作

アニメーション

css3

animation

スマートフォン
リンク
Create CSS Animation in HTML5 Games
miguchi 2012/10/16
animation

CSS
リンク
msto.jp - it転職リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
miguchi 2012/10/16
css3

animation

iPhone
リンク
CSS3 Keyframe Animations - iPhone Wiggle Effect
miguchi 2012/10/16
CSS

animation

iPhone
リンク
GitHub - mach3/js-moviecrop: JavaScript Library to animate background of block elements.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
miguchi 2012/10/16
CSS

animation

css sprite
リンク
CSS3アニメーションとJavaScriptを組み合わせてみる | Technology-Gym
みなさんこんにちはこんばんは。イッシーですʕ￫ᴥ￩ʔ。iPhoneのブラウザではCSS3のアニメーションや3D効果が使用できます。そこで今回はCSS3を使って様々な効果を作ってみましょう。Google Chromeなどのブラウザでも見ることができますので様々な効果を楽しみつつ、様々な場で使ってみてください。 ■角丸特に目新しくありませんが、見栄えが良くなるのでとりあえず角丸にしておきます。 .element{ border:1px solid #333333; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .element{ border:1px solid #333333; -moz-border-radius:10px; -webkit-border-radius:10px; bo
miguchi 2012/10/16
CSS

animation

css sprite
リンク
シンプルなスプライトアニメーションライブラリ「MovieCrop.js」 - Mach3.laBlog
この記事は賞味期限切れです。︵更新から1年が経過しています︶ CSSスプライトを使用したアニメーションライブラリは既に色々と選択肢がありそうですが、敢えて今回これを書いてみたのは、ローテクでごくシンプルな物が欲しかったから。さらに言ってみれば、それらの選択肢をまだ知らなかったから。 MovieCrop.jsについて MovieCrop.js via Github MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。再生/逆再生/停止/巻き戻しが出来ます。簡単な使い方まず使用する画像を作成し、ブロック要素の背景にします。要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなの
miguchi 2012/10/16
CSS

animation

css sprite
リンク
jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow
Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of techno logies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screenca
miguchi 2012/10/16
CSS

animation

css sprite
リンク
msto.jp - it転職リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
miguchi 2012/08/16
css3

animation

アニメーション
リンク
Animating sprites using CSS - chrismar.sh
miguchi 2012/08/16
animation

css

CSSスプライト
リンク
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ見れない人のために動画も撮ってみました。どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。今回はこのCSSのアニメーションのチュートリアルをご紹介します。﹁NEW!﹂というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
miguchi 2012/08/16
CSS

アニメーション

animation
リンク
HTML5ファミリー：CSS3広告とFlash広告 | Ext Japan Blog
この記事は7/20に掲載された﹁HTML5 Family: CSS3 Ads Versus Flash Ads﹂を訳したものですこれまでHTML5関連技術について多くの解説ブログを掲載してきましたが、今回は、CSS3の機能を使っておもしろい実験をやってみたいと思います。例えば、、、よく見かけるようなFlashのバナー広告をHTML5で再現することはできるでしょうか？結論から言うと、HTML5そのものは必要ではなく、いくつかの画像ファイルとCSS3アニメーションだけで十分でした︵現時点では、最新のChromeとSafariでのみ機能します︶。次のリンク‥3つのFlashバナー広告と、それらを我々がCSS3で再現したものとを比較してみてください。実際、気味悪いほどそっくりに仕上がっています。この記事では、CSS3とHTMLだけで上記のようなバナー広告を作る方法について説明していきます。説明
miguchi 2012/08/16
css3

広告

HTML5

animation
リンク
たかたんのにっき : JavaScriptとCSS Spritesを使って動画をつくる
miguchi 2012/08/16
javascript

animation

CSSスプライト
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx