quick and dirty jquery parallax effect using waypoints.js

quick and dirty jquery parallax effect using waypoints.js

// quick and dirty jquery parallax effect using waypoints

$(window).on('scroll',function() {
	var $strawberries = $('.strawberries'),
		$strawberry2 = $('.strawberries img:nth-child(2)'),
		$strawberry3 = $('.strawberries img:last-child'),
		$circle3 = $('.circles-container .circle:nth-child(3n)'),
		$circle4 = $('.circles-container .circle:nth-child(4n)'),
		$circle5 = $('.circles-container .circle:nth-child(5n)'),
		$fallingOrange = $('.forange'),
		$fallingStraw = $('.fstraws-top'),
		$orange = $('.orange'),
		$lemon = $('.blemon');

	var $containerScroll = $(window).scrollTop()/8 + "px",
		$fastSpeedScroll = ($(window).scrollTop() * 0.4) - 200 + "px",
		$rotateScroll = $(window).scrollTop()/8,
		$containerScrollBottom = $(window).scrollTop()/16 - 100 + "px",
		$fastSpeedScrollBottom = ($(window).scrollTop() * 0.3) - 600 + "px",
		$rotateScrollBottom = $(window).scrollTop()/16 - 200;

	$strawberries.css('top',$containerScroll);

	$strawberry2.css({
	   '-webkit-transform' : 'rotate('+ $rotateScroll +'deg)',
	   '-ms-transform' : 'rotate('+ $rotateScroll +'deg)',
	   'transform' : 'rotate('+ $rotateScroll +'deg)'
	});

	$strawberry3.css({
	   '-webkit-transform' : 'rotate('+ $rotateScroll/2 +'deg)',
	   '-ms-transform' : 'rotate('+ $rotateScroll/2 +'deg)',
	   'transform' : 'rotate('+ $rotateScroll/2 +'deg)'
	});

	$('.home-middle').waypoint({
		handler: function(direction) {

			$circle3.css({
			   '-webkit-transform' : 'translateX('+ $containerScroll +')',
			   '-ms-transform' : 'translateX('+ $containerScroll +')',
			   'transform' : 'translateX('+ $containerScroll +')'
			});

			$circle4.css({
			   '-webkit-transform' : 'translateY(-'+ $fastSpeedScroll +')',
			   '-ms-transform' : 'translateY(-'+ $fastSpeedScroll +')',
			   'transform' : 'translateY(-'+ $fastSpeedScroll +')'
			});

			$circle5.css({
			   '-webkit-transform' : 'translateY(-'+ $containerScroll +')',
			   '-ms-transform' : 'translateY(-'+ $containerScroll +')',
			   'transform' : 'translateY(-'+ $containerScroll +')'
			});
		}
	});

	$('.challenge-you-home').waypoint({
		handler: function(direction) {
			$lemon.css({
			   '-webkit-transform' : 'translateY('+ $containerScrollBottom +')',
			   '-ms-transform' : 'translateY('+ $containerScrollBottom +')',
			   'transform' : 'translateY('+ $containerScrollBottom +')'
			});

			$fallingStraw.css({
			   '-webkit-transform' : 'translateY('+ $fastSpeedScrollBottom +')',
			   '-ms-transform' : 'translateY('+ $fastSpeedScrollBottom +')',
			   'transform' : 'translateY('+ $fastSpeedScrollBottom +')'
			});

			$orange.css({
			   '-webkit-transform' : 'rotate('+ $rotateScrollBottom/2 +'deg)',
			   '-ms-transform' : 'rotate('+ $rotateScrollBottom/2 +'deg)',
			   'transform' : 'rotate('+ $rotateScrollBottom/2 +'deg)'
			});

			$fallingOrange.css({
			   '-webkit-transform' : 'translateY(-'+ $containerScrollBottom +')',
			   '-ms-transform' : 'translateY(-'+ $containerScrollBottom +')',
			   'transform' : 'translateY(-'+ $containerScrollBottom +')'
			});
		},
		offset: '58%'
	});
});