How to Detect if an Element is Scrolled Into View Using jQuery

Design trends are constantly changing and something we are using in a lot of recent projects is animations triggered when the visitor scrolls to a certain point on the page. Here is a quick guide on how to detect if an element is scrolled into view and implement a CSS animation that is triggered by a jQuery scroll event.

See the code in action here: http://jsfiddle.net/vep4sryp/1/

The HTML

<div class="container">
	<div class="inner box1">
		<p>This text is static.</p>
	</div>
	<div class="inner box2">
		<p>This text will have an animated entrance.</p>
	</div>
</div>

The jQuery Scroll Detection

$(window).scroll(function(){
	// This is then function used to detect if the element is scrolled into view
	function elementScrolled(elem)
	{
		var docViewTop = $(window).scrollTop();
		var docViewBottom = docViewTop + $(window).height();
		var elemTop = $(elem).offset().top;
		return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
	}
	
	// This is where we use the function to detect if ".box2" is scrolled into view, and when it is add the class ".animated" to the <p> child element
	if(elementScrolled('.box2')) {
		var els = $('.box2 p'),
			i = 0,
			f = function () {
				$(els[i++]).addClass('animated');
				if(i < els.length) setTimeout(f, 400);
			};
		f();
	}
});
&#91;/code&#93;

<h2>The CSS</h2>
[code]
.container {
	width: 100%;
}
.inner {
	width: 980px;
	margin: 0 auto;
	height: 500px;
}
.inner.box2 p {
	visibility: hidden;
}
.inner.box2 p.animated {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

CSS Animation

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

This is just a basic example, and can be adapted to suit your needs. If you need something a bit more complex jQuery Waypoints another good solution to detect elements in the viewport.

We have also shown a basic CSS animation example, a great tool for CSS animations can be seen here.

If you found this tutorial helpful, or need some help implementing it into your website let us know in the comments.