jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

要素が見えたらアクションする

概要
要素が見えたらアクションさせます。
実装例はトップページの NEWS TOPICS タイトル文字です。
使用方法
実装はjsのコメントに書いてあるような感じで行います。
本体名をinview.jsにしてあります。
備考
inview配列内の詳細は以下の通りです。
id -- このid属性の要素が見えたらアクション実施されます。
offset -- 要素が見えたとする位置の微調整です。
init -- 要素が見える前の前処理です。
action -- 要素が見えた時の処理です。
initとactionは必ずしもidと同じ要素を指定する必要はありません。

/**
 * 要素が見えたらアクションする
 *
<script>
var inview = [
	{
		'id':'newstitle'
		,'offset':300
		,'init':function(){document.getElementById('newstitle').style.marginLeft='150px';}
		,'action':function(){document.getElementById('newstitle').style.marginLeft='0px';}
	}
];
</script>
<script src="js/inview.js"></script>
 *
 * @auther ao-system
 */
(function(window,document,inview){
	init();
	function init() {
		for (var i = 0; i < inview.length; i++) {
			(function(i){
				var elmY = offsettop(document.getElementById(inview[i].id)) + inview[i].offset;
				inview[i].elmY = elmY;		//反応開始位置
				var scrollY = scrolltop();
				if (elmY <= (scrollY + document.documentElement.clientHeight)) {
					inview[i].rendered = true;	//既に見えているので処理済み
				} else {
					(inview[i].init)();
					inview[i].rendered = false;	//処理済みか否か
				}
			})(i);
		}
		document.addEventListener('scroll',function(){onScroll();},false);
	}
	function onScroll() {
		for (var i = 0; i < inview.length; i++) {
			(function(i){
				if (inview[i].rendered == false) {
					var elmY = inview[i].elmY;
					var scrollY = scrolltop();
					if (elmY <= (scrollY + document.documentElement.clientHeight)) {
						(inview[i].action)();
						inview[i].rendered = true;
					}
				}
			})(i);
		}
	}
	//要素の位置を返す
	function offsettop(elm) {
		var offsettop = elm.offsetTop;
		if (elm.offsetParent) {
			while (elm = elm.offsetParent) {
				offsettop += elm.offsetTop;
			}
		}
		return offsettop;
	}
	//スクロール位置を返す
	function scrolltop() {
		if (document.body && document.body.scrollTop) {
			return document.body.scrollTop;
		}
		if (document.documentElement && document.documentElement.scrollTop) {
			return document.documentElement.scrollTop;
		}
		if (window.pageYOffset) {
			return window.pageYOffset;
		}
		return 0;
	}
})(window,document,inview);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page