Colors.js

import $ from 'jquery';

const Colors = {

	element: $('.background-color'),

	steps: [
		'rgb(238, 212, 177)',
		'rgb(255, 255, 255)',
		'rgb(245, 202, 229)',
		'rgb(207, 207, 207)',
		'rgb(255, 251, 167)',
	],

	init() {
		this.calculate();
		this.getColor();
		this.element.css('opacity', 1);
		this.watch();
	},

	calculate() {
		this.scrollMax = $(document).height() - $(window).height();
	},

	watch() { $(window).scroll(() => this.getColor()); },

	getColor() {
		const ypos = $(window).scrollTop();
		let percent = (ypos / this.scrollMax > 1) ? 1 : ypos / this.scrollMax;
		percent = (percent > 1) ? 1 : percent;
		let currentStep = Math.floor(((this.steps.length - 1) * percent));
		currentStep = (currentStep >= this.steps.length - 1) ? this.steps.length - 2 : currentStep;
		const percentBetween = (percent * (this.steps.length - 1)) - currentStep;
		const color3 = this.mixRGB(this.steps[currentStep], this.steps[currentStep + 1], percentBetween);
		// console.log(currentStep, this.steps.length - 1);
		this.element.css('background-color', color3);
	},

	mixRGB(one, two, percent) {
		const rgb = [];
		const color1 = this.parseRGB(one);
		const color2 = this.parseRGB(two);
		for (let i = 0; i <= 2; i++) {
			rgb[i] = (this.mixChannel(color1[i], color2[i], percent));
		}
		return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
	},

	parseRGB(color) {
		return color.match(/([0-9]+)/g);
	},

	mixChannel(one, two, percent) {
		const num1 = Number(one);
		const num2 = Number(two);
		return Math.round(num1 + (((num2 - num1)) * percent));
	},

};

$(() => Colors.init());

$(window).load(() => Colors.calculate());