[Flash] Flashムービーの読み込みと再生
最近は久しぶりに実務でFlashを触っています。 で、今になって「タイムラインベースのFlashムービーは読み込みの完了を待たずにストリーミング的に再生される」という、かなり基本的と思われる仕様を初めて知りました。 そしてそれは当然スクリプトからも制御できて、レアケースではありますがドキュメントクラスで package { import flash.display.MovieClip;...
View Article[CSS/JS] CSSのプロパティ名をベンダープレフィックス付きで取得
※2012.05.19 : 記事の内容とスクリプトを修正しました。 ※2012.08.27 : 以下のコードを改修したものがこちらにあります→ 表題のような事がしたかったので、そのような関数を書いてみました。 var cssProp = function( name, camelcase ) { var index = (typeof camelcase === 'undefined') ? 0...
View Article[JS/CSS3] JavaScriptによるCSS3の実装判定とトランジション制御
CSSアニメーションで画像を切り替えるjQueryプラグインをちくちくと作り進めていて、現在はとりあえずの試作版が出来たところです。 DEMO...
View Article[JS/CSS3] 続・JavaScriptによるCSS3の実装判定とトランジション制御
前回の記事では具体的なコードがあまり無かったので、今回はその辺りをもう少し詳しく。 準備 サンプルとして、適当なオブジェクトを作ってそこにメソッドその他をぶら下げていく事にします。後の処理で汎用的に使う関数もここで用意しておきます。 var NBNOTE = {}; /* □ オブジェクトの型を判定 --------------------------- */ NBNOTE.is =...
View Article[JS] パラパラマンガ用JSを作ってみました
2013/02/16: 改修したバージョンがこちらにあります。 2012/10/16: スクリプトと記事の内容を修正しました。 さるお方の情報により初めて知ったのですが、jQueryの.animate()などで一度に複数の要素をアニメーションさせると、IE8環境では配置済みのgifアニメが停止しちゃうらしい。しかもIE7でもIE...
View Article[JS] 配置済み要素のbackground-image読み込みハンドリング
HTML/CSS <style type="text/css"> #bg { background: url("bg.jpg") no-repeat; } </style> <div id="bg">Lorem ipsum<div> JavaScript var getBgImage = (function() { var func; if (...
View Article[JS] カーソル進入位置に合わせて変わるアニメーション
というロールオーバー演出が使われているFlashサイトを以前どこかで見かけました。残念ながらURLとかは忘れましたが、触ってて気持ち良かったことだけは覚えていたので、いつかどこかでパクらせて頂こうと思いJSで作ってみました。 デモ...
View Article[jQuery] DOMの構築待ちについて
先日、社内のWebデザイナーに標題についての解説をしました。自分の説明が悪くイマイチ理解してもらえなかった感がありましたが、JS(jQuery)を扱う上で重要かつ基礎的な知識の一つだと思いますし、改めて内容を整理しつつ記事にしてみました。 HTMLをほぼほぼ理解しているJS/jQuery初級者で、細かい用語などは自力で調べられる方が対象となります。...
View Article[JS] Flipbook.jsをアップデート
以前に書いた記事で作ったパラパラマンガ用JSライブラリ「Flipbook.js」。パラパラする部分はimgのvisibilityを切り替える仕様だったのだけど、やっぱ早いは正義なのかなと思ったのでスプライトシートを背景画像に使ってbackground-positionをずらす仕様に作り変えてみた。...
View ArticleCanvas事始め
色々と思うところがあり、Canvasコンテンツ制作についての勉強を始めました。 とは言っても時間的なコストはなるべく抑えたいので、CanvasをFlashライクに扱えるらしいライブラリEaselJSを使うことにしました。また、環境面ではMicrosoft製JavaScriptコンパイル言語TypeScriptを導入しました。アロー関数式おいしいです。 作ってみたもの (古くないPCとブラウザ専用)...
View Article[JS] JavaScriptからメディアクエリの実装を判定
var mediaQueriesSupported = (function() { var supported = false; var styleSheet = document.styleSheets[0]; var targetRuleIndex = (styleSheet.cssRules || styleSheet.rules).length; if (...
View Article[JS/CSS3] マウス座標とtransform 3D
マウスの動きに合わせて3D的にふわふわ動く何かを作ってみました。 PC用の最近のブラウザで動きます。 デモ 当初matrix3dであれしなきゃなのかなとビビってましたが、普通にrotateX/rotateYあたりで事足りて安心。アイデアと作りこみ次第で面白い感じにできそうです。
View Article[CSS/JS] CSSのプロパティ名をベンダープレフィックス付きで取得
※2012.05.19 : 記事の内容とスクリプトを修正しました。 ※2012.08.27 : 以下のコードを改修したものがこちらにあります→ 表題のような事がしたかったので、そのような関数を書いてみました。 var cssProp = function( name, camelcase ) { var index = (typeof camelcase === 'undefined') ? 0...
View Article
