CSS3 にはアニメーション機能があります。
transition と animation です。
animation を使い様々な動きをウイジェットのように作ってくれた方がいます。
Animate.css
デモファイルを作りました。
Continue Reading →
2013 年 5 月 22 日
by taikiken
0 comments
2013 年 5 月 21 日
by taikiken
0 comments
randoriはActionScriptをJavaScriptにコンパイルするframework
徳さんが深夜にTweetしてた”randori”が超興味津々。
Code Three.js in ActionScript with Randori Compiler
ActionScriptで作ったファイルをrandoriを使ってJavaScriptにしたよ、ていうエントリー。
three.jsを使用したDemoが公開されていました。
http://renaun.com/html5/as3threejs/
プロジェクトファイルも公開されています。
https://github.com/renaun/RandoriExamples
コンパイル手順なども詳しく書かれているのですが、frameworkでエラーが出ていてコンパイルはできませんでした。
できるのかな〜
公開デモファイルの中には簡単な HelloWorld プロジェクトも入っていたのですが、コチラはASからJSにコンパイルできました。
同梱されているshファイルをターミナルで走らせるだけです。
Continue Reading →
2013 年 5 月 21 日
by taikiken
0 comments
[JavaScript] DOMElementをSin波みたく動かしてみる
あるコンテンツ制作のための技術検証用テスト素材を公開しました。
DOMElementをSin波で動かしてみてるだけのチープなものだけど…
Sin波ってのは気持ちいい動きするなーなんて思ったりして。
http://www.inazumatv.com/demo/sin/
と、元になったパラメタいじれるの。
Sin波を作ってるのはこんな感じ。
ActionScriptでも書いた記憶があります。
this._middle + Math.sin( this._angle ) * this._range; |
2013 年 5 月 20 日
by taikiken
0 comments
three.js – なんか見てると目が回るのができたので公開してみる
本当は違うものを作ってたんだけど、グルグル目が回りそうで気持ち悪くなりそうなのできたので途中だけどさらしておきます。
THREE.ParticleCanvasMaterial を使用しています。
PC: 4800
mobile: 900
particleを生成しています。
THREE.TrackballControls を使用しています。
マウスホイールで拡大・縮小、
ドラッグで回転させることができます。
見てたら目がチカチカしてきた…
て言うか、だいぶ気持ち悪い。
＊閲覧注意
2013 年 5 月 19 日
by taikiken
0 comments
覚えた、Android ChromeのWebGLを有効にする方法
Android 4.x Chrome だと WebGL が見れるとうわさが…
早速three.jsのexampleを見たけど、Browserは対応してるみたいだけどGraphic boardが対応してないよ、みたいなメッセージが表示されて真っ黒な画面のまま。
ガセだったかと思ったけど、Chromeなので設定いじればどうにかなるかな〜と思い、URLに
chrome://flags
と入力してみた。
Continue Reading →
2013 年 5 月 15 日
by taikiken
0 comments
TextMate 2でメールアドレスをEncryptしてHTMLへ挿入
Sublime Text 2が人気なのは承知してはいますが、TextMate 2を起動しちゃうんだな〜
一時期なんでもこれで書いてた、Perl, PHP, SQL, HTML, CSS, JavaScript, ActionScript全部。
Rubyの端っこかじったのもTextMate 2だった。
今でこそ主役はIntelliJ IDEAになったけど、コードを参照したり、軽くテストしたりと毎日使ってます。
今さらなんだけど初めて気がついた機能があったのでメモっとく。
別にメニューの深い階層にあったわけでなく多分他の人は普通に使ってたはず…
メールアドレスをEncrypt
メールアドレスをHTMLに表示するとき、ソースにベタ書きしませんよね。
何らかの方法で、難読化と言うか、暗号化処理を施します。
Continue Reading →
2013 年 5 月 12 日
by taikiken
0 comments
CSS3, transition-timing-function: cubic-besierの4つの引数
CSS3でアニメーションするための方法のひとつ、transition。
easing は transition-timing-function プロパティに設定します。
以下の5種類が定義されています。
ease, linear, ease-in, ease-out, ease-in-out。
イージングのかかり具合が気になったのでGoogle先生にお聞きすると丁寧に説明してくれてるサイトが色々見つかりました。
roblaplaca.com
roblaplaca.com: Understanding CSS cubic-bezier
cubic-bezier(P1x,P1y,P2x,P2y) |
2013 年 5 月 11 日
by taikiken
0 comments
WebCodeは便利かもしれない
Facebookで教えてもらったWebCodeってアプリが便利かも。
WebCode 
4,300円
$49.99なので、App Store はまだ円安の価格改定が行われていないようです。
書き出し(Export)できるのは
・HTML(Canvas) + JavaScript
・HTML5 + CSS3
・SVG
画像(PNG, TIFF)の書き出しもできます。
Continue Reading →
2013 年 5 月 9 日
by taikiken
0 comments
[JavaScript][CSS3] animation, transitionのEvent名をメモ
CSS3のanimation, transition のイベントを知りたかったのでメモっとく。
ネタ元
【CSS3 Animation】
MDN: CSS アニメーション
MDN: Detecting CSS animation support
w3school: CSS3 Animations
【CSS3 transition】
Stack Overflow: CSS3 transition events
MDN: CSS transitions
Continue Reading →
2013 年 5 月 6 日
by taikiken
0 comments
[JavaScript] fps（フレームレート）を設定したい
JavaScriptのloop処理はrequestAnimationFrameを使用すると実現できます。
requestAnimationFrame, cancelAnimationFrame はこう使ってる
requestAnimationFrameはモニタのリフレッシュレートに依存しているようで概ね60fpsになります。
そこまでのフレームレートが必要ない場合や、待機状態の時にもう少し低いレートでloopを実行したいことがありました。
可変にできる仕組みを作れないかと思い、一定間隔でサーバーのプログラムを呼び出すために以前作っていたコードを改造してみました。
Continue Reading →