Probleme de fadeIn sur plusieurs élements

Bonjour à tous, j'ai un petit souci avec un site que je dev actuellement -> www.pier17.fr/test
Je souhaiterais que les elements qui actuellement s'affichent en fadeIn s'affichent comme sur ce site (l'un aprés l'autre quand on scrolle et qu'on arrive à l'element) -> http://www.eagleadventuretours.de/

Je me doute que c'est avec du Js, mais étant un vrai naze la dedant je vous sollicite.

Petite precision, j'utilise le plugin ACF sur Wordpress et j'utilise un champ repeater
ex :

					<?php if( have_rows('bloc-projet')) : ?>
					<?php $i = 0; while(the_repeater_field('bloc-projet')): ?>
					
						<div class="medium-4 column">
					    	<div class="thumb-projet masquer fadeIneffect">
								<img src="<?php the_sub_field ('imageprojet') ?>" />
						    	<a href="#" data-reveal-id="myModal<?php echo $i ?>">
									<div class="info-projet-bg">
										<div class="info-projet">
											<h5><?php the_sub_field ('titre_projet') ?></h5>
											<p><?php the_sub_field ('lieu_projet') ?></p>
										</div>
									</div>
								</a>
					    	</div>
						</div>

Actuellement j'ai ce script en fin de page et j'utilise les animations du site http://www.justinaguilar.com/animations/ qui du coup ne correspondent pas forcement au rendu souhaité :

		<script type="text/javascript">	
			(function($){	
				$(window).scroll(function() {
					$('.fadeIneffect').each(function(){
					var imagePos = $(this).offset().top;
			
					var topOfWindow = $(window).scrollTop();
						if (imagePos < topOfWindow+400) {
							$(this).addClass("fadeIn");
						}
					});
				});
			})(jQuery);
		</script>

Merci par avance à l'âme charitable qui pourra me venir en aide. :s
Pierre