adashabeta

ProximityEffect demo 6

*mouse required

’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.
<!-- npm i wrap-chars -->
<script src="WrapChars.min.js"></script>
let lines = document.querySelectorAll('*.line');
lines.forEach(line => WrapChars.wrap(line, 'letter', 'span'));


let els = document.querySelectorAll('*.line > *');
let params = {
    threshold: 20,
    distance: 100,
	jitter:    50,
	direction: 'horizontal',
    attack:     0.7,
    decay:      0.2,
};

let fader = new ProximityEffect(els, params);

fader.addEffect('translateX', 0, {value: 0, scatter: 50});
fader.addEffect('translateY', 0, {value: 0, scatter: 50});
fader.addEffect('translateZ', 0, {value: 75, scatter: 50});
fader.addEffect('rotateX',    0, {value: 0, scatter: 120});
fader.addEffect('rotateY',    0, {value: 0, scatter: 120});
fader.addEffect('rotateZ', {value: 0, scatter: 30}, {value: 0, scatter: 90});

fader.addEventListener('redraw', e => {
	for(let n=0; n<fader.nodes.length; n++)
	{
		//this is unpleasantly hacky and needs replacing with a more wholesome API
		let z = fader.getNodeIndexData(n, 'effects')[2]['far'];
		let f = Math.abs(z)*Math.pow(fader.distanceFromIndex(n), 2)*0.025;
		fader.nodes[n].style['filter'] = `blur(${f}px)`;
	}
});