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>
|
|
【JavaScript コンテンツの最新記事】
- jQuery の ajax でアクセス可能なデータをボタンをクリックした後 window.open で開いたウインドウの中にテキストエリアを作成して表示する方法
- IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル
- JavaScript : DIV 内に時間範囲のボックスを表示する処理
- jQuery/JavaScript : 存在しない可能性のある画像の代替表示
- JavaScript による、時間範囲の表現( 出退勤等 )
- JavaScript : HTML 特殊文字を書き出すコード( ツール )
- Twitter 縦書き intent
- スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする
- IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス
- JS : テキストエリア内の選択文字列の置き換え
- IE限定、ローカルファイル参照フィールドを使ったトリック
