ProximityEffect demo 6

• grids
  • 1*
  • 2*
  • 3*
  • 4*
• text
  • 5*
  • 6*
  • 7*

’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

View/download project on GitHub.

wrap-chars page.

// split the words into separate elements using wrap-chars
let poem = document.querySelector('*.centerpiece');
WrapChars.wrap(poem, {
	split: 'word'
	});

// effect config
let params = {
    threshold: 20,
    distance: 100,
	jitter:    50,
	direction: 'vertical',
    attack:     0.7,
    decay:      0.2,
	doPresetDistances: false
	};

let proxEffect = new ProximityEffect(els, params);

proxEffect.addStyle('translateX',                       [0, {value:  0, scatter:  50, scatterMethod: 'normal'}]);
proxEffect.addStyle('translateY',                       [0, {value:  0, scatter:  50, scatterMethod: 'normal'}]);
proxEffect.addStyle('translateZ',                       [0, {value: 25, scatter: 150, scatterMethod: 'uniform'}]);
proxEffect.addStyle(   'rotateX',                       [0, {value:  0, scatter: 270, scatterMethod: 'normal'}]);
proxEffect.addStyle(   'rotateY',                       [0, {value:  0, scatter: 270, scatterMethod: 'normal'}]);
proxEffect.addStyle(   'rotateZ', [{value: 0, scatter: 10}, {value:  0, scatter:  90}]);

// get data through effect API to add depth blur
proxEffect.addEventListener('redraw', e =>
{
	for(let n=0; n<proxEffect.nodes.length; n++)
	{
		let z = proxEffect.getNodeIndexData(n, 'styles')[2].far;
		let d = proxEffect.distanceFromIndex(n);
		let f = Math.abs(z)*Math.pow(d, 2)*0.025;
		proxEffect.nodes[n].style['filter'] = `blur(${f}px) brightness(${50}%)`;
	}
});