Simple Paralax Effect from SocialTriggers.com

paralax.html

<style>
  .parallax-zone [data-parallax] {
    will-change: transform;
}
</style>

<section class="jumbotron cover parallax-zone">
    <div class="cover-wrapper">
            <img data-parallax="0.6" src="/images/home/web.png" alt="web" class="web-image blend-overlay ">
            <img data-parallax="-0.4" src="/images/home/social.png" alt="social" class="social-image blend-overlay">
            <img data-parallax="-0.2" src="/images/home/triggers.png" alt="triggers" class="triggers-image blend-overlay">
            <img data-parallax="0.2" src="/images/home/big-avatar.png" alt="avatar" class="big-avatar">
    </div>
</section>

<script>
var $parallax = $('.parallax-zone'),
		onParallaxScroll = function( force ) {
			var distance = $dom.scrollTop();

			$parallax.each(function() {
				var $this = $(this),
					$objects = $parallax.find('[data-parallax]'),
					distanceFromTop = $this.offset().top;

				if ( force == true || $this.is(':appeared') ) { 
					$objects.each(function() {
						var $this = $(this),
							val = parseFloat( $this.attr('data-parallax') ),
							total = val*(distance-distanceFromTop),
							attr = 'translate(0, '+total+'px)';

						$this.css({
							'-webkit-transform' : attr,
							'-moz-transform' : attr,
							'margin-top' : attr
						});
					});
				}
			});
		};

	if ( $parallax.length > 0 ) {
		$parallax.appear();
		$dom.on('scroll', function() {
			window.requestAnimationFrame(onParallaxScroll);
		});
		onParallaxScroll(  );
	}
</script>