|
|
|
jQueryのColorBoxを設置
<!-- colorBox設定 -->
<!-- if ( navigator.userAgent.indexOf('iPhone') != -1) {
if(confirm('iPhone向けのページを表示しますか？')){
location.href = "http://www.tsuka-time.com/illustration.html";
} } //-->
|
jParallaxの設置
使い方次第でかなり視覚効果が高いツール。もちろんイラストの質と遠近感の計算及びそのスピードはかなり計算が必要。透過の切り抜きも細心の注意が必要。
 DEMO1………このHPメニューページのメインビジュアル
近づくにつれ景色が左右に広がる効果※左右のサイズが足りずそんなに効果が望めなかったが
DEMO2………WebDesignのメインビジュアル
景色が平行に移動する場合遠くは遅く、近くは早く移動して遠近感を出す効果demo
<!-- jParallax設定例 --><!-- jParallax設定例 -->
<link href="jquery-ui/jParallax/jParallaxbase2.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/jParallax/jquery.jparallax.js" type="text/javascript"></script>
$(function() {
var corners = '<img src="image/illustraition/corner_white_tl.png">' +
'<img src="image/illustraition/corner_white_tr.png">' +
'<img src="image/illustraition/corner_white_bl.png">' +
'<img src="image/illustraition/corner_white_br.png">';
$('#parallax').jparallax({
xparallax: true,
yparallax: false,
frameDuration: 50
}).append(corners);
});
角丸の設定がなされてある。ベースのＣＳＳとjQuery、jParallax本体のＣＳＳで構成される。 id名はもちろん照会出来る様にしておく。5.
<!-- jParallax画像設定例 -->
<div id="parallax0">
<div style="width: 250px; height: 273px;">
<img src="image/illustraition/message0100.gif"
alt="" style="position: absolute; left: -235px; top: 37px;" border="0">
</div>
</div>
divスタイルの幅で元のサイズに対しての相対的なスピードが決定される。
イメージは動画の場合gifを大きい画面で綺麗なグラデーションを求めるならばpngファイルを使用する。但しＩＥ6以下はｐｎｇの透過効果は蹴られてしまうので背面で使った方が無難である。ちなみにIE以下でも動くが、iPhoneでは指に感応するのでその効果は発揮されない。
スタイルポジションでは上からの位置であるtopとleft、rightで左右どちら方向から動くかを決定する。例えばleftの数値100は開始位置の数値。
画像を透過にして読み込むみdreamweaver上でリサイズすると透過部分を無視されてしまう（グリーン矢印部分）もちろんブラウザ上では透過部分が反映されるので問題はないのだが、
dreamweaverでもリアルサイズを保持する技としては、少し原始的なのだが本当に小さな（目立たない）有色ドットをコーナーに埋めておけば左右上下範囲のサイズを保持できる。
特にJavaを切った場合や古いブラウザでは透過部分は完全に無視されプレビューされたり、それぞれパーツの元サイズとの整合性はもちろん位置指定であるtopや左右の数値は0でも入力して置く事が幅広いクロスブラウザを達成するにはベターである。
※いずれにしても、pngとgifの色調のズレにはじまりCSS、ビヘイビアの問題を含め限界はあります…safari2.0×以下やIE5.5以下はこの手のプラグインは体裁を繕うのみで機能としては完全にお手上げ。
|
|
tipsyツールチップ
jQueryの tipsy（0.1.7）意外と使いそうで使わないこのプラグイン。入れるとページがうるさくなるし補足しないとダメなら、もっと他の方法でフォローしてあげたい。ユーザビリティとしてはどこまで訪問者側の気持ちに立って使い易くするのか？は議論すべきなところ。もちろん補助ツールなので、アクシビリティな考えでは有効なのだが…。いずれにしても他のビヘイビアとの併用は出来ないので、純粋なテキストのみに使いたい。
DEMO1
DEMO2
DEMO3
DEMO4
DEMO5
<!-- ツールチップjs設定 -->
<script type ="text/javascript" src="jquery-ui/scripts/jquery-1.3.2.min.js"></script>
<script type ="text/javascript" src="jquery-ui/tipsy/docs/javascripts/jquery.tipsy.js">
</script>
<!-- ツールチップcss設定 -->
<link rel ="stylesheet" href="jquery-ui/tipsy/docs/stylesheets/tipsy.css" type="text/css">
<link rel ="stylesheet" href="jquery-ui/tipsy/docs/tipsy-docs.css" type="text/css">
を</head>要素に埋め込む
<!-- ツールチップ設定例 -->
<script type="text/javascript">
$(function() {
$('#example-1').tipsy();
$('#example-2').tipsy();
$('#example-3').tipsy();
$('#north').tipsy({gravity: 'n'});
$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});
$('#auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS});
$('#example-fade').tipsy({fade: true});
$('#example-fade-1').tipsy({fade: true});
$('#example-fade-2').tipsy({fade: true});
$('#example-fade-3').tipsy({fade: true});
$('#example-custom-attribute').tipsy({title: 'id'});
$('#example-callback').tipsy({title:
function() { return this.getAttribute('original-title').toUpperCase(); } });
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
$('#example-html').tipsy({html: true });
});
</script>
本文記述のid部分がアローの位置方向やフェードがかかったりとそれぞれの特徴に合わせて表現される。文字組、背景色などがツールチップＣＳＳに依存される事となる。
とにもかくにもスクリプトを3つ以上組むと極端にパフォーマンスが悪くなりこのページのYSlowの評定が69のD判定だった。組み方にもよるがjQueryは一発芸的な大技として1つ小技として2つ目を基準に拡張していくべきなのかも。
|
|
|
|
|
| 2 / 2 ページ |
へ右へズレていく（涙）。どうしてもイラストを拡大しながらプレビューさせるケースがあるのでiphoneの性能上いた仕方ないみたい。（アルキメデスの亀みたく延々センタリングできない）もともとiphone用ページは別途用意してるのでそこに自動アクセス出来ないかしらと探したら。やっぱりありました！以前からFrashやらなんやらで、別ページに回避したかったので非常にカンゲキです。
