スクロールでイベントを発火 ソースコードをまとめたい（短くしたい）

Question

###ソースコードをまとめたい（短くしたい）
ブラウザー画面の1/2を通過したらclassを追加。→cssで指定したアニメーションが作動。
という、スクロールイベントを記述しました。
以下の実装例で問題ないく動いています。

しかし下記のままだと、スクロールイベントさせたいコンテンツが増えた際、記述を追加していかないとないりません。それが２０個３０個と増えていくと、とてつもない長さになって、手間がかかるうえに、容量が重くなります。

別のイベント用いて、Javascriptで同じ処理を関数でまとめる方法があるということ知りましたが、ソースコードを見ただけでは理解できないできませんでいした。

関数でまとめる際のポイントまたは、別の方法でまとめる方法があれば、
解説込みでアドバイスをいただけるとうれしいです。

###実装例
読み込みファイル
「jQuery v1.9.1」

<main>
  <div class="space"></div>
  
  <div id="scroll_area01" class="test_wrap clearfix">
    <div></div>
    <div></div>
  </div>
  <div id="scroll_area02" class="test_wrap clearfix">
    <div></div>
    <div></div>
  </div>
  
  <div class="space"></div>
</main>

main {
  max-width: 900px;
  margin: 0 auto;
}
.space{
  width: 100px;
  height: 500px;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.test_wrap{
  margin-bottom: 100px;
}
.test_wrap div{
  width: 100px;
  height: 100px;
  background: #ccc;
  float: left;
  margin-right: 20px;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.test_wrap div.motion{
  background: #000;
}

$(window).scroll(function(){
  // トリガー | window3/4 = (window.innerHeight*3/4)
  var trigger = $(document).scrollTop() + (window.innerHeight/2);
  
  // ターゲット
  var target01 = $("#scroll_area01 div"),
      pointer01 = $("#scroll_area01").offset().top;
  // モーション
  if(trigger > pointer01){
    target01.addClass("motion");
  } else {
    target01.removeClass("motion");
  }

  // ターゲット
  var target02 = $("#scroll_area02 div"),
      pointer02 = $("#scroll_area02").offset().top;
  // モーション
  if(trigger > pointer02){
    target02.addClass("motion");
  } else {
    target02.removeClass("motion");
  }
});

Answer 1

$( window ).scroll( function() {
	// トリガー | window3/4 = (window.innerHeight*3/4)
	var trigger = $( document ).scrollTop() + ( window.innerHeight / 2 );

	$( '.test_wrap' ).each( function() {
		// ターゲット
		var target = $( this ).find( 'div' ),
		    pointer = $( this ).offset().top;
		// モーション
		if ( trigger > pointer ) {
			target.addClass( 'motion' );
		} else {
			target.removeClass( 'motion' );
		}
	} );
} );

【.each() | jQuery API Documentation】
https://api.jquery.com/each/

Comments

[退会済みユーザー]

返事が遅くなりました。
アドバイスありがとうございます。
勉強になりました。