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

エリア内背景画像をスクロールに応じて移動

概要
エリア内背景画像をスクロールに応じて移動させます。
実装例はトップページの NEWS TOPICS の箇所です。
使用方法
JavaScript、html、cssの3つで可能です。
JavaScriptはhtmlの最後に置きます。
実装はjsのコメントに書いてあるような感じで行います。
本体名をdepthback.jsにしてあります。
備考
要素の位置、スクロール位置、画面内高さから背景画像のbackground-position Y%を設定しています。

/**
 * 背景画像をスクロールに応じて移動
 *

<style>
#wrapper01a {
	width: 100%;
	height: 500px;
	background-image: url(./image/newsback.jpg);
	background-size: 100%;
	background-position: 0 50%; <--- この50%にあたる部分を0~100%で変化させる
}
</style>

<div id="wrapper01a"><div id="wrapper01b">
	content
	content
	content
	content
</div></div>
<div id="wrapper03a"><div id="wrapper03b">
	content
	content
	content
	content
</div></div>

<script>
var depthback = [{'id':'wrapper01a','height':500},{'id':'wrapper03a','height':400}];
</script>
<script src="js/depthback.js"></script>

 *
 * @auther ao-system
 */
(function(window,document,depthback){
	init();
	function init() {
		onScroll();
		document.addEventListener('scroll',function(){onScroll();},false);
	}
	//要素の位置を返す
	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;
	}
	function onScroll() {
		for (var i = 0; i < depthback.length; i++) {
			(function(obj){
				render(obj.id,obj.height);
			})(depthback[i]);
		}
	}
	function render(idStr,elmHeight) {
		var elmY = offsettop(document.getElementById(idStr));
		var posY = scrolltop();
		var cH = document.documentElement.clientHeight;	//画面内高さ
		var y = parseInt((elmY - posY + elmHeight) / (cH + elmHeight) * 100);
		document.getElementById(idStr).style.backgroundPosition = '0 ' + y + '%';
	}
})(window,document,depthback);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page