note

Uses jQuery ;-)

//
// Parallax
//

function parallax(zone, layers) {
	this.activeZone = zone;
	this.layers = layers;
}

parallax.prototype.init = function () {
	var self = this;
	self.activeZoneHeight = self.activeZone.height();
	self.activeZoneTop = self.activeZone.offset().top;

	$(self.layers).each(function (i, layer) {
		layer.top = parseInt(layer.item.css('top'));
	});

	self.resize();

	$(window).resize(function () {
		self.resize();
	});

	$(window).scroll(function () {
		self.moveLayers();
	});
};

parallax.prototype.moveLayers = function () {
	var self = this;

	self.topPos = $(window).scrollTop();
	self.ratio = Math.min(1, Math.max(0, (self.topPos - self.baseDisplacement) / self.maxDisplacement));

	$(self.layers).each(function (i, layer) {
		layer.item.css({
			top: Math.round(layer.top - layer.displacement * self.ratio + layer.displacement / 2) + 'px'
		});
	});
};

parallax.prototype.resize = function () {
	var self = this;

	self.maxDisplacement = scroll.windowHeight + self.activeZoneHeight;
	self.baseDisplacement = self.activeZoneTop - scroll.windowHeight;

	self.moveLayers();
};

var ecolaborationParallax = new parallax($('.art-block.intro'), [
	{
		item: $('.art-block.intro .leaf-1'),
		displacement: 400
	},
	{
		item: $('.art-block.intro .leaf-2'),
		displacement: 200
	},
	{
		item: $('.art-block.intro .leaf-3'),
		displacement: 400
	}
]);

About me

Stuff I do with my brain, my fingers and an editor:

(Front-end) development - typescript, Vue, React, svelte(kit) web architectures web performance API design pragmatic SEO security Accessibility (A11y) front-end dev recruitment and probably more...

Feel free to , check out my open source projects, or just read the things I write on this site.