この記事は、 http://d.hatena.ne.jp/uupaa/20110622/1308713373 のリニューアル版です。 # 新しいブラウザが出たら、このページを更新していきます。JavaScript を利用しアニメーションを行うには3つの方法があります。 setInterval(16) を使う setTimeout(4) ... 続きを読む
window.requestAnimationFrame と window.webkitCancelRequestAnimationFrame の実装状況のメモです。 // --------------------------------------- // Chrome 16 ready // Safari 5.1.2 not ready // iOS 5.0.1 not ready // var handle = null; function tick... 続きを読む
これでできる! クロスブラウザJavaScript入門 第17回 アニメーションの基礎 Check 2010年10月25日 太田昌吾 JavaScript, クロスブラウザ, アニメーション, JSTweener JavaScript, オブジェクト, call, this, メソッド この記事を読むのに必要な時間:およそ 1... 続きを読む
SVG Basics Tested in Opera, Firefox, Safari and IE. Most work in all four of these environments. 続きを読む
YUI SVG Animations Test Page This page tests animating the SVG attributes and properties with the YUI SVG extensions created for the SVG Wow! web site. There are some browser limitations. For example, WebKit browsers (as of Safari 5.0 and Chr... 続きを読む
I have a problem with the animate function in Safari on iPhone 3.1.2. If I click a div with id #link, that has a click handler like this: $('#link').click(function(){ $('html,body').animate({scrollTop:$('#bottom').offset().top},5000); });... 続きを読む
CSSアニメーションを使ってアイコンを動かしてみたいと思います。 以下、気をつけた点。 CSSアニメーションに非対応のブラウザでもアイコンとして成立している 過剰なマークアップをしない 現実的に使えそうな路線で頑張ってみました。 .iconNew{ width: 3em; t... 続きを読む
GX - Full-Featured Javascript Animations FrameworkGX is a full-featured, cross-browser, super-tiny (10kb uncompressed) Javascript Animations Framework. Using GX you can create complex animations working with every w3c CSS property. Currently,... 続きを読む
Prereqs Requires the jQuery Library as well as the Easing plugin. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type='text/javascript' src='js/jquery.easing.1.2.js'></scri... 続きを読む
Warning: This isn't going to work in any currently available version of Internet Explorer* or many older browsers.The two clocks below are pure HTML. There are no Adobe Flash files or my beloved <canvas> going on, just regular <div> and <img>... 続きを読む
jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使い... 続きを読む