Oxygen Shape Divider animated – How To Make Your Shape Dividers Change On Scroll

Webdesign

 

Oxygen CodeBlock

 

PHP auskommentieren:

<!-- -->

 

JavaScript eintragen:

Quelle: https://gist.github.com/KittenCodes/5ce62c1455ebd5728eaea489b517de28

 

var ready = (callback) => {
	if (document.readyState != 'loading') callback();
	else document.addEventListener('DOMContentLoaded', callback);
}

ready ( () => {
	if (window.angular) { return; }

	calcHeight();
})

document.addEventListener('scroll', function() {
	if (window.angular) { return; }

	calcHeight();
})

function calcHeight() {
	document.querySelectorAll('.oxy-shape-divider').forEach( shape => {
		var top = shape.getBoundingClientRect().top;
		shape.querySelector('svg').style.height = top / 3 + 'px';
	})
}