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.

Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358