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

画像が見えたら不透明度を100%にする

概要
画像が見えたら不透明度を100%にする視覚効果です。
読み込み時点でclass="lazy"の画像をopacity=0にセットして、要素が見えたらopacity=1にします。
フェード効果させるためにはcssでtransition設定します。
使用方法
JavaScriptをhtml下部に設置します。効果を適用させる要素にはclass="lazy"を記述しておきます。
備考
opacityではなく別の効果に差し替えてもいいでしょう。

/**
 * 要素が見えたら opacity 0 --> 1
 *
<img src="" class="lazy">
<script src="js/lazy.js"></script>
 *
 * @auther ao-system
 */
(function(window,document){
	var lazies = [];
	init();
	function init() {
		lazies = document.getElementsByClassName('lazy');
		for (var i = 0; i < lazies.length; i++) {
			(function(i){
				var elmY = offsettop(lazies[i]);
				var scrollY = scrolltop();
				if (elmY <= (scrollY + document.documentElement.clientHeight)) {
					//既に見えているので何もしない
				} else {
					lazies[i].style.opacity = 0;
				}
			})(i);
		}
		document.addEventListener('scroll',function(){onScroll();},false);
	}
	function onScroll() {
		for (var i = 0; i < lazies.length; i++) {
			(function(i){
				if (lazies[i].style.opacity == 0) {
					var elmY = offsettop(lazies[i]);
					var scrollY = scrolltop();
					if (elmY <= (scrollY + document.documentElement.clientHeight)) {
						lazies[i].style.opacity = 1;
					}
				}
			})(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);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page