WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

固定画像を動的に演出する

   

怪奇小説「黒猫」を固定画像などを使って演出的に blackcat ⇒エフェクトや効果音を使った実験 CSSのposition:fixedを用いた画像の固定方法は、IEで不具合が出るのでCSSをケース分けして書く必要があります。ただ、IEは画像のガタつきを抑えるためJavaScript文で制御しているため、JavaScriptがオンであることが条件。 具体的には画面上で固定したい画像について、次のようにCSSを設定します。この例ではposition:topが100px、position:leftが80pxに指定されています。また、IEに対応させるため top: expression((documentElement.scrollTop…… left: expression((documentElement.scrollLeft…… と記述されている行の数値の部分を同様に変更します。 
	 
	#fixedElement {
		position: fixed;
		top: 100px;
		left: 80px;
		background: url(image/sample.jpg) #000 no-repeat;
		
		/* IE5 later && javascript-on */
		position: expression('absolute');
		top: expression((documentElement.scrollTop || document.body.scrollTop) + 100 + 'px');
		left: expression((documentElement.scrollLeft || document.body.scrollLeft) + 80 + 'px');
	}
	 
ただ、これだけではIEで画像がスクロールの際にガタつくため、 
	 
	body {
		background: url(null) fixed;
	}
	 
このように、body要素のbackground-attachmentプロパティを”fixed”にします。この例では画像などを一括で指定しています。なおbody要素に背景画像を設定し、なおかつ固定させたくないという場合、IE6限定での解決法があるようです。詳しくはこちら また前述の実験ページではスクロール量に応じて、エフェクトや効果音を出す仕組みにしています。スクロール量の判定はブラウザ間の互換を考えてPrototypeライブラリを利用しています。Elementクラス（元々はPositionクラス）のcumulativeScrollOffset()メソッドは、引数の要素の縦横スクロール量を配列として取得します。インデックスかtop、leftプロパティで参照可能です。 
	 
	var element = $('element_ID');
	var scrollTop = element.cumulativeScrollOffset().top;
	 
ページのスクロール量を常時監視するため、次のようにタイマーを用いて書くと実用的です。 
	 
	var element, scrollTop;
	element = $('element_ID'); //Prototypeライブラリで要素を取得

	//PeriodicalExecuterクラスはsetIntervalと同じタイマー機能を持つ
	new PeriodicalExecuter(function(pe) {
		//ここでは横方向のスクロールは扱わないので、topプロパティを代入します。
		scrollTop = element.cumulativeScrollOffset().top;

		//スクロール量が1000px以上になったら、if文のなかの処理を実行。
		if (scrollTop >= 1000) {
			.................
			.................
			.................
		}

		//実際のスクロール量を確かめるため、FirefoxのFirebugを利用するのが手っ取り早いです。もちろんスクリプトが完成したらこの部分は削除します。
		console.log(scrollTop);
	}, 0.1);
	 
一方で一定間隔で処理を繰り返すタイプのタイマーを使用していると、一度だけさせたい処理を何度も実行してしまうことがあります。このページでは一度だけ処理させたいとき次のように変数でチェックするようにしています。 
	 
	var element, scrollTop;
	element = $('element_ID');

	//すでにアラートされたかチェックする変数。初期値はfalse
	var isAlert = false;

	new PeriodicalExecuter(function(pe) {
		scrollTop = element.cumulativeScrollOffset().top;

		if (scrollTop >= 1000) {
			//縦方向のスクロール量が1000px以上になり、さらに変数isAlertがfalseならばif文の以下のコードを実行
			if (!isAlert) {
				alert('HOGE!!');

				//同じコードが再び実行されないように変数isAlertをtrueを代入する
				isAlert = true;
			}
		}

	}, 0.1);
	 

 - JavaScript/Ajax , , ,