イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
HTML5広告を簡単に作成できる無料ツール Google Web Designer を試してみました | バシャログ。
こんばんは、Latinです。 最近話題の HTML5 広告デザインツール Google Web Designer を私も勉強がてら試してみました。 Google Web Designer をインストール Google公式サイトからダウンロードしてインストール。 https://www.google.com/webdesigner/ ↑画面真っ黒ですなぁ！ ↑「新しいファイル」から早速作ってみます。 ↑よくあるバナー規格サイズなんかをサポートしてくれています。 でも、正直よくわからん。 「場所」っていうのはパブリッシュする場所になるようです。 ↑今回は300×250pxのバナー作ってみます。 Flash のようなキャンバスが表示されました。 ↑とりあえずドラッグアンドドロップでアヒル君を設置。 ↑プロパティウィンドウからサイズ変更。 ↑こんな感じで。 ↑ツールバーの各アイコンの説明をまとめて
[JS]FlashもHTML5も無しで、美しいアニメーションを実装するスクリプト -jCSML
FlashもHTML5もSilverLight, SVGも使わずに、IE7+, iPhone, iPad, Androidで動作するアニメーションを作成できるjQueryのプラグインを紹介します。 jCS Media Library [ad#ad-2] jCSMLの対応ブラウザ jCSMLのデモ jCSMLのダウンロード jCSMLの対応ブラウザ jCSMLの対応環境は下記の通りです。 HTML5非対応のIE7でも、Flash非対応のiPhoneでも動作します。 IE7+ Firefox3.6+ Chrome Safari iPhone iPad Android jCSMLのデモ jCSMLの多彩で美しいデモをいくつか紹介します。 各デモはチュートリアルも兼ねており、コードも一緒に掲載されています。
データのビジュアリゼーションに使えるJSライブラリ「d3.js」:phpspot開発日誌
d3.js データのビジュアリゼーションに使えるJSライブラリ「d3.js」 ユニークで様々なビジュアリゼーションが可能になっており、更にアニメーションしたりインタラクティブな要素を盛り込めるのも特徴 次のようなデータビジュアリゼーションをjavascriptのコードを使って描画でき、サンプルコードなんかも公開されています。 IEには対応していませんが、かなり色々なことができるので覚えておいてもよいかも。 関連エントリ 色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集 データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる 続きの続き : nogunogu
こんにちは。のぐちです。 さて、ここまで続けて、需要があるのかどうかさっぱり分かりませんが、 今回はいよいよCSSアニメーションを使ってフリックを表現します。 早速ソースを並べて解説をしていきます。 まずは前回までのものからHTMLを少し変更しました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>flick</title> <meta name="viewport" content="width=device-width, maximum-scale=0.6667" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type
CSSアニメーションで一見複雑に見える動きをさせる方法 - EC studio デザインブログ
Webサイトにアニメーションを取り入れる場合には、いくつか方法があると思います。代表的なところでいうと、 ・JavaScript、jQuery ・Flash ・CSSアニメーション などが挙げられます。 ただ複雑な動きとなると、高度なコードを書く必要があったりと、それなりに難しくなります。ですが、シンプルなアニメーションでも組み合わせることで、パッと見複雑に見える動きを付けることができます。 そのアニメーション手法というのは、先日、京都で開催された"Ti.Developers.meeting vol.03（Titanium mobileでのアプリ開発者が集まる関西方面のミートアップ）"でのコバヤシトールさん（@toru0325 / もぐもぐエンターテイメントアプリ - MogSnap）のセッションで紹介されていたもので、その斬新な技法に驚かされたと共に、日頃の制作に対する姿勢の面でも改めて
注目！Flash CS風のUIでHTML5のタイムラインアニメーション作成·Radi MOONGIFT
RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。 RadiはMac OSX用のフリーウェア（β版中につき無料）。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタグを駆使することでアニメーションさえ自在に作れる。 メイン画面 とは言えそれはあくまでも「駆使」すればの話でしかない。やはりツールがなければ容易に作れるものではないし、容易でなければ普及しないだろう。そこで注目されるのがRadi、HTML5対応のアニメーション作成ソフトウェアだ。 RadiはFlashのようにレイヤーを重ねてタイムラインベースのアニメーションを作成する。作成したコンテンツはvideoタグ、canvasタグで出力することができる。フレーム間の動きは自動で補完で
もうFLASH不要かも? HTML5アニメ作成ソフト｢Hype｣登場 iOSにも対応! 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間:1分] ウェブコンテンツに魅力的な動きを付与できるFLASH。しかし、Adobe社の公式オーサリングツールは高額で、デザイナーじゃないと手が届きにくかった。その対抗馬として注目を浴びている次期ウェブ標準仕様のHTML5をベースに、手軽にアニメやスライドを作成できるツール「Hype」が米時間の5月20日にお目見えした。 Mac OS X用ソフトとして既にApp Storeで販売中。価格はUSストアでは29ドルで、日本だと3500円と割高だが日本語ローカライズ版が入手できる。 ツールは、FLASHオーサリングツールなどを使用したことがある人なら、数分もあれば使い始められるだろう。始めてこの手の作品を手がける人は少し手まどうかもしれないが、チュートリアル動画があるので、これを一通り見れば見よう見まねでスタートできるだろう。また、今回のバージョンでどのようなことができるのかは、ギャラリ
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
公海555000kk线路检测—首页（欢迎您）
GREE Engineering
[JS]GIF以外の画像でもアニメーションさせることができるスクリプト -Canimate