Can anyone help me tweak this little script? scroll into viewport kinda thing

JavaScript
1

Hi,

I have a little script that makes it so that my css-animations start when the element scroll into view. However, I would (if possible) want to change the script so that the animation starts when you have scrolled … say 50% of the element, instead of right away.

Here is the script I’m using atm:


	<script>
		function isElementInViewport(elem) {
		    var $elem = $(elem);

		    // Get the scroll position of the page.
		    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
		    var viewportTop = $(scrollElem).scrollTop();
		    var viewportBottom = viewportTop + $(window).height();

		    // Get the position of the element on the page.
		    var elemTop = Math.round( $elem.offset().top );
		    var elemBottom = elemTop + $elem.height();

		    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
		}

			function checkAnimation() {
		    $('.myelementClass').each(function() {
		        if (!$(this).hasClass('start') && isElementInViewport(this)) {
		            $(this).addClass('start');
		        }
		    });
		}

		// Capture scroll events
		$(window).scroll(function(){
		    checkAnimation();
		});
	</script>

Thanks in advance.