スクロールで指定した要素が表示された時にclassを追加する

スクロールで画面内に要素が表示されたらアニメーションを行う実装をすることがよくあるので、指定した要素が画面内に表示された時にclassを追加するという処理を作ってみます。

サンプルコード

まずはclass付与の関数を作って実装してみます。

HTML

<div class="contents">
	<section class="section">
		<div class="sample sample1"></div>
	</section>
	<section class="section">
		<div class="sample sample2"></div>
	</section>
	<section class="section">
		<div class="sample sample3"></div>
	</section>
</div>

.sampleに.is-showというclassが付くとフェードで表示するようにします。

CSS

.sample {
	position: absolute;
	top: 500px;
	left: 50px;
	width: 50px;
	height: 50px;

	/* アニメーションに必要な部分 */
	visibility: hidden;
	opacity: 0;
	transition: 1500ms;
}
.sample.is-show {
	visibility: visible;
	opacity: 1;
}

JavaScript

$(window).on('load scroll', function() {
	add_class_in_scrolling($('.sample1'));
	add_class_in_scrolling($('.sample2'));
	add_class_in_scrolling($('.sample3'));
});

// スクロールで要素が表示された時にclassを付与する
function add_class_in_scrolling(target) {
	var winScroll = $(window).scrollTop();
	var winHeight = $(window).height();
	var scrollPos = winScroll + winHeight;

	if(target.offset().top < scrollPos) {
		target.addClass('is-show');
	}
}

ページアクセス時とスクロール時にadd_class_in_scrolling()を実行して、画面内に指定要素がある場合はclassを付与するようにしています。
画面内に要素が表示された時にclassを付与するデモページ
　

プラグイン化

次に先ほどの処理をプラグイン化してみます。
オプションとして、画面内のどの位置まできたらclassを付与するかと、付与するclass名を設定できるようにしてみます。
プラグイン化した「acs.js」はこちら

acs.js

(function($) {
	$.fn.acs = function(options) {

		var elements = this;
		var defaults = {
			screenPos: 0.8,
			className: 'is-show'
		};
		var setting = $.extend(defaults, options);

		$(window).on('load scroll', function() {
			add_class_in_scrolling();
		});

		function add_class_in_scrolling() {
			var winScroll = $(window).scrollTop();
			var winHeight = $(window).height();
			var scrollPos = winScroll + (winHeight * setting.screenPos);

			if(elements.offset().top < scrollPos) {
				elements.addClass(setting.className);
			}
		}

	}
})(jQuery);

screenPosは画面内のどの位置まで要素が来たらclassを付与するかで、0～1の範囲で設定します。
例えば、画面の上下中央でclassを付与したい場合は0.5、画面内に入ったらすぐclassを付与したい場合は1とします。
classNameは付与するclass名を設定します。

acs.jsを読み込んで、以下のように指定します。

JavaScript

$(function() {
	$('.sample1').acs();
	$('.sample2').acs({
		screenPos: 0.4
	});
	$('.sample3').acs({
		className: 'is-show2'
	});
});

class名変更の確認用にCSSを追加します。

CSS

.sample.is-show2 {
	visibility: visible;
	opacity: 1;
	transform: translateX(400px);
}

これで.sample2は画面の上から40%の位置でフェード表示、.sample3は右へ移動しながらフェードで表示するようになりました。
プラグイン化のデモページ