イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
![イージング関数チートシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/3c9199f7e9dec256dc4f958354006055c80b3f6e/height=288;version=1;width=512/https%3A%2F%2Feasings.net%2F192.c6b79276.png)
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
(治安の悪くない Emoji も作れます) 作ったもの ここで遊べます おもしろいところ GIF アニメのエンコードまですべて js で完結しているので、ありがちな「謎のサーバーに画像アップロードするといい感じに変換してくれる」的なサービスと違って、素性の知れたコードがクライアント側でサクサク動きます。 なにができるの? 画像を 128px x 128px に変形 画像を、 Slack にアップロードできる(現状)最大サイズの 128px x 128px に変形します。 ローカルのファイルから選ぶか、画像の URL を入力できます。アップロードするわけではないので、デカい画像でもサクサクなのがお気に入りです。 変形は 正方形に引き伸ばし(アス比無視) 正方形いっぱいに拡大して、余ったところはトリミング(アス比維持) 正方形に収まるように縮める(アス比維持) から選べます。 テキストから画像
はじめまして、フロントエンドエンジニアのおじいちゃんと言います。おじいちゃんはあだ名で、本名は後藤です。よろしくお願いします。 本日は、開発を効率化してくれる自動化ツールのGruntの導入から使用方法、おすすめプラグインまでを紹介したいと思います。 Gruntとは http://gruntjs.com/ GruntはNode.jsを使ったJavaScript製のタスクランナーです。 決まった動作をおこなったときに、あらかじめ決めておいたタスクを実行してくれます。 黒い画面を使うから面倒くさそう…と思っている方もいるかもしれませんが、コマンドはコピペでいけるのでご安心を! それでは、いってみましょう。 環境構築 Gruntを利用するためには、まずNode.jsが必要です。 さっそくインストールしてみましょう。インストーラーがあるので簡単です。 Node.js 下記URLよりダウンロードしてイ
DOMオブジェクトには昔からdispatchEventとか,addEventListenerとかあって,最近だと,node.jsのEventEmitterとか,jQueryのon, triggerを使って自作のオブジェクト間でアプリケーション的に定義されたイベントをやりとりできる. これまで,自作オブジェクトからイベントを発行するのに,jQueryのtriggerを使ってたけど,意図しない挙動をすることがあることが分かって,triggerHandlerを使うように変えた. jQuery.trigger()は,イベントタイプと一致する関数をレシーバが持ってるとき,その関数が呼ばれる. イベントのやりとりと,メソッドの呼び出しは独立しているというイメージがあったので,うっかり同名のメソッドを定義したときに,一見するとよく分からない挙動になって,難しい. なので,自作オブジェクトがイベントを発行
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編 100サンプルを解説してみました。 基礎 その1 Canvas インスタンスを生成しよう その2 背景色を指定しよう その3 幅を指定しよう その4 高さを指定しよう その5 幅、高さを指定しよう その6 canvasのサイズを画面いっぱいにしよう その7 canvasを画面にフィットさせよう(解像度は固定) 図形-初級(Figure) その8 直線を描画しよう その9 矩形を描画しよう(塗りつぶし描画) その10 矩形を描画しよう(ストローク描画) その11 円を描画しよう(塗りつぶし描画) その12 円を描画しよう(ストローク描画) その13 円弧を描画しよう(塗りつぶし描画) その14 円弧を描画しよう(ストローク描画) その15 三角形を描画しよう(塗りつぶし描画) その16 三角
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
DVSP-0097 | Price: 1,000円 / 1,200円 (shop) | 委託店舗: メロンブックス | 通信販売: Diverse Direct
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
tmlib.js って何? ゲームやツールを簡単に作る事ができる JavaScript ライブラリだよ♪ PC とスマートフォンどちらでも動くんだ 『プログラミングって気軽にできるもんなんだ』 『ゲームってこんなに簡単に作れるんだ』 って感じてもらえると嬉しいな かんたんに使えるよ♪ tmlib.js は初心者から上級者まで 幅広く使えるライブラリだよ Usage を見ればすぐに tmlib.js を 使ってプログラミングを始められるよ
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 (7/3追記: twitter等で教えていただいた内容を追加しました) +v (数値化) var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります(例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります)。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
お知らせ このゲームは、お使いのブラウザには対応していない可能性があります。 9leapに投稿されているゲームを快適に遊ぶためには、 Internet Explorerの機能拡張 Chrome Frame をダウンロードしてください。 ※Safari、Google Chromeの最新版でも動作します。 クリックするとスキップできます。 新しいウインドウでゲームを遊ぶ 輝け! ☆操作方法 <メニュー画面> 決定…スペースキー 項目移動…カーソルキー <ゲーム画面> 移動…カーソルキー or マウスドラッグ ボム…Zキー or ダブルクリック 収束ショット+低速移動…Xキー ポーズ…スペースキー ショットを止める…Cキー ☆このゲームは... ごく普通の弾幕シューティングです。 全3ステージ。 WebGLを使って高速描画を目指しています。 弾やエフェクトが死ぬほど出ても処理落ちせずに遊べるかも
Random & Responsive jQuery, HTML 5 & CSS3 Gallery with LazyLoad Day, Month, Year: sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Day, Month, Year: sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna a
JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く