要素が画面内にあるかどうか判別する処理を実装する

要素が画面内にあるかどうか判別して、画面内にある場合にのみclassを付与する処理を実装してみます。

サンプルコード

.sample01と.sample02にclassを追加してみます。

HTML

<section class="section">
	<div class="sample01"></div>
	<div class="sample02"></div>
</section>

.sample01と.sample02に.is-showというclassが付くと、横移動するようにします。

CSS

.sample01 {
	position: absolute;
	top: 1500px;
	left: 50px;
	width: 100px;
	height: 100px;
	background: #E74C3C;
	transition: 2000ms;
}
.sample01.is-show {
	-webkit-transform: translateX(500px);
	transform: translateX(500px);
}
.sample02 {
	position: absolute;
	top: 3000px;
	right: 50px;
	width: 100px;
	height: 100px;
	background: #3498DB;
}
.sample02.is-show {
	-webkit-transform: translateX(-500px);
	transform: translateX(-500px);
	transition: 2000ms;
}

.sample01は.sample01自体にtransitionが設定されているので.is-showが外れた場合にアニメーションで元の位置に戻りますが、.sample02は.is-showが付いた時のみtransitionが設定されるので、.is-showが外れた場合にアニメーションなしで元の位置に戻ります。

対象要素が画面内にあるかどうか判断して、classの付け替えを行う処理を追加します。

JavaScript

$(function() {
	$(window).on('load scroll', function() {
		add_class_when_visible($('.sample01'));
		add_class_when_visible($('.sample02'));
	});

	function add_class_when_visible(target) {
		// スクロール位置を取得
		var scrollTop = $(window).scrollTop();
		var scrollBtm = scrollTop + $(window).height();

		// 対象要素の位置を取得
		var targetTop = target.offset().top;
		var targetBtm = targetTop + target.height();

		// 画面内にある場合
		if(scrollBtm > targetTop && scrollTop < targetBtm) {
			target.addClass('is-show');
		} else {
			target.removeClass('is-show');
		}
	}
});

画面内に表示された時に、横にアニメーションで移動するようになりました。
画面内に要素がある場合のみclassを追加するデモページ
　

プラグイン化

先ほどは関数で処理を行いましたが、プラグイン化してみます。
オプションはとりあえず付与するclass名のみ変更できるようにしています。
プラグイン化した「acv.js」はこちら

acv.js

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

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

		function add_class_when_visible() {
			var scrollTop = $(window).scrollTop();
			var scrollBtm = scrollTop + $(window).height();

			var targetTop = elements.offset().top;
			var targetBtm = targetTop + elements.height();

			if(scrollBtm > targetTop && scrollTop < targetBtm) {
				elements.addClass(setting.className);
			} else {
				elements.removeClass(setting.className);
			}
		}
	}
})(jQuery);

以下のようにプラグインの指定を行います。
(HTMLとCSSは先ほどと同じなので省略します。)

JavaScript

$(function() {
	$('.sample01').acv();
	$('.sample02').acv();
});

先ほどと同様の動きが実装できました。
画面内に要素がある場合のみclassを追加するデモページ