A function for creating pixel and percentage calculations for step-based scrolling interactives using Skrollr.js

calculateStepDimensions.js

function calculateStepDimensions(step_obj){
  // Create cumulative percentage values for each step
  // Because it's easier to declare the percentage in in the config obj
	// But it's easier later on to know each step's pixel start and end values
	var cml_perc = 0
	for (var step in step_obj){
		if (_.has(step_obj, step)){
			var row  = step_obj[step];
			var len_pix  = Math.round(row.perc * TOTAL_LENGTH);
			cml_perc += row['perc'];
			var end_pix = Math.round(cml_perc * TOTAL_LENGTH);

			row['len_pixel'] = len_pix;
			row['cml_perc']  = cml_perc;
			row['end_pixel'] = end_pix;
			row['start_pixel'] = end_pix - len_pix;
		}
	}	
	return step_obj
};
var TOTAL_LENGTH = 20000, // The total scrollable area for our interactive
    STEP_VALUES  = {
	step_0: {
		perc: .12
	},
	step_1: {
		perc: .20
	},
	step_2: {
		perc: .18
	},
	step_3: {
		perc: .23
	},
	step_4: {
		perc: .20
	}
};

calculateStepDimensions(STEP_VALUES)

result.js

{
step_0: {
  cml_perc: 0.12,
	end_pixel: 2400,
	len_pixel: 2400,
	perc: 0.12,
	start_pixel: 0
},
step_1: {
	cml_perc: 0.32,
	end_pixel: 6400,
	len_pixel: 4000,
	perc: 0.2,
	start_pixel: 2400
},
step_2: {
	cml_perc: 0.5,
	end_pixel: 10000,
	len_pixel: 3600,
	perc: 0.18,
	start_pixel: 6400
},
step_3: {
	cml_perc: 0.73,
	end_pixel: 14600,
	len_pixel: 4600,
	perc: 0.23,
	start_pixel: 10000
},
step_4: {
	cml_perc: 0.9299999999999999,
	end_pixel: 18600,
	len_pixel: 4000,
	perc: 0.2,
	start_pixel: 14600
}