ACT parallax code

//  ACT PARALLAX
/* ======================================= v 0.3.1
 @ speed			    float		  animation speed
 @ transitionTime	float	  	transition time
   ======================================= */
function ACTparallax( target, args ){
	target = target || '.A-parallax';
	args   = args   || {}
	
	const defaults = {
		speed			: 4,
		transitionTime	: 1.5,
		units			: 'px',
	}
	let items = {};

	// ------------------------
	init();
	
	// ------------------------
	function init(){
		if ( window.noMobileParallax && $(window).width() <= 640 ) return;
		if ( window.noTabletParallax && $(window).width() <= 900 ) return;
		
		args = $.extend({}, defaults, args);
		if ( ! $( target ).length ) return;
		
		// LOOP through elements
		$( target ).each(function(idx){
			
			let id = 'A-' + $.now() + idx
			$(this).attr('data-parallaxId', id)
			
			// create data object for target
			items[id] = {
				speed : parseFloat( $(this).attr( 'data-speed' ) ) || args.speed,
				transitionTime : parseFloat( $(this).attr( 'data-trans' ) ) || args.transitionTime,
				mode :  $(this).attr( 'data-mode' ) || args.mode,
			}
			
			// initialize element data and transition time
			let classList = $(this).attr('class').split(/\s+/);
			classList.forEach(clss =>{
				if ( clss.substr(0,6) == 'trans-' )
					items[id].transitionTime = parseFloat( clss.split('-')[1] )
				if ( clss.substr(0,6) == 'speed-' )
					items[id].speed = parseFloat( clss.split('-')[1].replace('_', '-') )
				if ( clss.substr(0,6) == 'offset-' )
					items[id].offset = parseInt( clss.split('-')[1].replace('_', '-') )
			})
			
			$(this)
				.css('transition', 'transform ' + items[id].transitionTime + 's ease-out')
				.attr('data-y', $(this).offset().top )
			
		})
		
		// Animate on windows scroll
		//animate();
		$( window ).scroll( animate );
		
	}
	function animate(){
		var wH  = $(window).height();
		var scT = parseInt( $(window).scrollTop() );
		
		// LOOP through elements
		$( target ).each(function(){
			let id = $(this).attr('data-parallaxId');
			
			// get element values
			var element   = $(this);
			var elementH  = element.outerHeight();
			var offsetTop = parseFloat( element.attr( 'data-y' ) );
			
			// Calculate movement
			let CENTER = (offsetTop + (elementH/2)) - (wH/2)
			let MOVE = CENTER - scT;
			MOVE = (MOVE / 10) * (items[id].speed/2);
			
			
			let onScreen = false;
			if ( (wH + scT) > offsetTop  && scT < offsetTop + elementH ) onScreen = true

			// Apply values
			if ( onScreen )
			element.css( 'transform', 'translateY(' + MOVE.toFixed(2) + args.units + ')' );
			
		})
	}
	
}

Leave a Reply

Your email address will not be published. Required fields are marked *