SQLの窓

2011年04月29日


WEB フォントを使った「フェードイン、フェードアウト」

IE8 以前で filter を使用すると、アンチエイリアスが無効になるバグがあったので
二つのエリアの切り替え方法を変更した IE8 以前専用の関数を追加しました。IE9 で
は必要無いと思いますが、ここでは IE の場合常にそちらを使用しています。

結果的に、IE8 以前用のコードのほうが使いやすくなっていますが、このような書き方
を CSS3 的に書こうとすると、コードが多くなってしまいますので、利用する時に考え
てどちらの方式を選ぶかどうか良く考えたほうがいいと思います。

a
A
いろいろ準備は必要ですが、いろいろな場面で使える可能性があります

WEB フォントの記述方法の考察
WEB フォントをクロスドメインで利用する
CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御
フリーフォント(WEBフォント)のダウンロード


<style media="screen" type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.ttf") format("truetype");
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.eot");
}
</style>
<![endif]-->
<script type="text/javascript">
var a_counter = 3;
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
	a_counter = 2;
}
var font_chars = Array("",
"A","a","B","b","C","c","D","d","E","e",
"F","f","G","g","H","h","I","i","J","j",
"K","k","L","l","M","m","N","n","O","o",
"P","p","Q","q","R","r","S","s","T","t",
"U","u","V","v","W","w","X","x","Y","y",
"Z","z"
);
function a_start() {

	if (userAgent.indexOf("msie") > -1) {

		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "hidden";
			document.getElementById("a2").filters.blendTrans.Play();
		}
		else {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "visible";
			document.getElementById("a2").filters.blendTrans.Play();
		}

	}
	else {
		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").style.opacity = 0;
		}
		else {
			document.getElementById("a2").style.opacity = 100;
		}
	}

	setTimeout("a_next();", 7000 );
}
function a_next() {

	if ( a_counter % 2 == 1 ) {
		document.getElementById("a2").innerHTML = font_chars[a_counter];
	}
	else {
		document.getElementById("a1").innerHTML = font_chars[a_counter];
	}

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start();
}

function a_start_ie8() {

	document.getElementById("a2").style.visibility = "visible";
	document.getElementById("a1").innerHTML = font_chars[a_counter];
	document.getElementById("a2").filters.blendTrans.Apply();
	document.getElementById("a2").style.visibility = "hidden";
	document.getElementById("a2").filters.blendTrans.Play();

	setTimeout("a_next_ie8();", 7000 );
}
function a_next_ie8() {

	document.getElementById("a2").innerHTML = font_chars[a_counter];

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start_ie8();
}

</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	font-family: tattooli;
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:300px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1" style='padding-left:80px'>a</div>
	<div id="a2" style='padding-left:100px'>A</div>
</div>
<script type="text/javascript">
if (userAgent.indexOf("msie") > -1) {
	setTimeout("a_start_ie8();", 7000 );
}
else {
	setTimeout("a_start();", 7000 );
}
</script>




posted by lightbox at 2011-04-29 00:27 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2011年04月28日


CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御

※ 古いコードから移行する時に、
document.all を変更し忘れていましたので修正しました。

※ IE8 以前のアンチエイリアスが無効になるバグに対応したコードを追加しました


IE は 4 の時から使える方法で実装しています。他のブラウザでは CSS3 の
transition が使えるようなので、CSS 側に定義して、処理そのものは、JavaScript
(タイマー)で実装しました。
このサンプルは、テキストですが、画像でも同じ事です。
※ setTimeout の時間が、トランジションの時間より大きくなる必要があります
2
1
<script type="text/javascript">
var a_counter = 3;
var userAgent = window.navigator.userAgent.toLowerCase();

function a_start() {

	if (userAgent.indexOf("msie") > -1) {

		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "hidden";
			document.getElementById("a2").filters.blendTrans.Play();
		}
		else {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "visible";
			document.getElementById("a2").filters.blendTrans.Play();
		}

	}
	else {
		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").style.opacity = 0;
		}
		else {
			document.getElementById("a2").style.opacity = 100;
		}
	}

	setTimeout("a_next();", 7000 );
}
function a_next() {

	if ( a_counter % 2 == 1 ) {
		document.getElementById("a2").innerHTML = a_counter.toString();
	}
	else {
		document.getElementById("a1").innerHTML = a_counter.toString();
	}

	a_counter++;
	if ( a_counter > 8 ) {
		a_counter = 1;
	}

	a_start();
}
</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:250px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1">2</div>
	<div id="a2">1</div>
</div>
<input
	value="go"
	type='button'
	onclick='a_start();this.style.visibility="hidden"'
/>


▼ 以下は、IE8 以前のアンチエイリアスが無効になるバグに対応したものです
<script type="text/javascript">
var a_counter = 2;

function a_start_ie8() {

	document.getElementById("a2").style.visibility = "visible";
	document.getElementById("a1").innerHTML = a_counter.toString();
	document.getElementById("a2").filters.blendTrans.Apply();
	document.getElementById("a2").style.visibility = "hidden";
	document.getElementById("a2").filters.blendTrans.Play();

	setTimeout("a_next_ie8();", 7000 );
}
function a_next_ie8() {

	document.getElementById("a2").innerHTML = a_counter.toString();

	a_counter++;
	if ( a_counter > 5 ) {
		a_counter = 1;
	}

	a_start_ie8();
}
</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:250px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1">2</div>
	<div id="a2">1</div>
</div>
<input
	value="go"
	type='button'
	onclick='a_start_ie8();this.style.visibility="hidden"'
/>
関連する記事

IE 兼用背景 Fade transition の実装



posted by lightbox at 2011-04-28 15:53 | 記録 | このブログの読者になる | 更新情報をチェックする

2011年04月26日


Windows7 : タスクスケージューラ設定での注意事項



仕様上は最低1分単位で繰り返し実行が可能ですが、コンボボックスは5分しか
ありません。直接入力して変更する事ができます。



※ 1分を指定すると表示が 00:01:00 のようになります。




開始オプションは、「作業ディレクトリ」を指定します。




「新しいインスタンスを並列で実行」にしないと、先に実行したタスクが終わっていない場合
次のタスクが実行されないので注意して下さい。



posted by lightbox at 2011-04-26 22:55 | Windows7 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり