イナヅマTVログ

2014.11.10
18:02
author: taikiken
0 comments

SVG Animation, fill(塗り)色(color)遷移をCSS3でね

SVG fill(塗り)の色(color)遷移アニメーションをCSS3でねのメモ。

SVG作成ツールが揃いだし本格的にWebでも使われ始めてる様子。
リニューアル後のAppleサイトもSVGがあちらこちらと使われてたりしてます。

サイトに何かと組み込まれるアニメーション。
SVGでも対応できるようにしておかないと…

SVG の色指定

SVG fill 色指定あれこれ。
Continue Reading →

2014.11.07
16:19
author: taikiken
0 comments

[CSS] brタグを”, “と表示したい

ワンソースで様々な端末に対応させようとすると本来のタグとは違う表示にしたい欲求にかられます。

WordPressのようなCMS内部で生成されるタグだとプラグインかfunctions.phpへタグの出力をある端末だけ変更するようなコードを書いたりでも対応できたりするけど…
もっと手軽な感じにCSSを駆使するとそれっぽくできたりします。

あちこちで見かけるtableタグのMedia Queriesサンプルなんかみたいに。
Continue Reading →

2014.10.07
12:46
author: taikiken
0 comments

[JavaScript] TweenMax / TweenLite rotation 方向(direction)設定

TweenMax, TweenLite を使った回転アニメーションのメモ。

0 -> 180, 180 -> 360 と時計回り回転を分割実行した時 180 -> 360 が逆時計回りになるのを防ぐ。

DirectionalRotationPlugin

DirectionalRotationPlugin を使う方法があるらしい。
github: DirectionalRotationPlugin.js
Continue Reading →

2014.09.29
01:00
author: taikiken
0 comments

Canvas 2Dライブラリを作ろうとして感じたこととDisplayObject

誰の役にも立たないゴミな記事です。
しかも長い。
ボンクラ脳でせっかくあれこれ考えたので書くけど、読まなくてイイよ。

Canvas API

Canvasはなかなかステキなヤツです。
Flashの代わりにはなれないけど「近い」ことはできそうです。

iOS 8でWebGLも使えるようになり大きな足かせが取れ、ますます可能性が広がってきたと思います。
Continue Reading →

Firefox 31 Developer tool

2014.08.05
21:43
author: taikiken
0 comments

Firefox だと Canvas のデバッグがしやすいかも

すっかりメインブラウザをChromeにしてました。
FirefoxでのデバッグがFirebug頼みなのがねぇと敬遠気味でした。

久しぶりにFirefoxを使ってみると標準の「開発ツール」がとても進化していて驚きました。
Firefox 31.0の情報です。
Continue Reading →

2014.07.30
12:25
author: taikiken
0 comments

[JavaScript] Memo, IE 10, IE 11を判別するnavigatorプロパティ – userAgentを使わずに

メモ、IE 10, IE 11をuserAgentを使わずに判定する方法。
IE 10

var is_ie10 = !!window.navigator.msPointerEnabled;

IE 11

var is_ie11 = !!window.navigator.pointerEnabled;

MSDN: Internet Explorer 10 のポインター イベントとジェスチャ イベント
MSDN: pointerEnabled property

As of Internet Explorer 11, the Microsoft vendor prefixed version of this property (msPointerEnabled) is no longer supported and may be removed in a future release.

ms vendor prefixed を no longer supported なので判定可能らしい。

[JavaScript] IE 11ブラウザ判定方法のuserAgentを無理矢理ゴニョゴニョするより良さげな様子。

swiper.jsソースコードで知りました。
Continue Reading →