adashabeta

ProximityEffect demo 3

*mouse required

Flipping double-sided tiled image with local offset.

function init() {
	let cols = 10,
		rows = 10,
		tileSize = 64,
    	t = document.querySelector('#parentelement'),
    	n = t.removeChild(t.querySelector('*.childelement'));

    for(let i=0; i<cols; i++)
    {
        for(let j=0; j<rows; j++)
        {
            let e = t.appendChild(n.cloneNode(true)),
				x = i*tileSize,
				y = j*tileSize;

            e.style.left = x+'px';
            e.style.top  = y+'px';
			e.children[0].style.backgroundPositionX = e.children[1].style.backgroundPositionX = -x+'px';
			e.children[0].style.backgroundPositionY = e.children[1].style.backgroundPositionY = -y+'px';

			e.dataset['offsetx'] = (5-j)*32;
        }
    }

    let params = {
        threshold: 64,
        runoff:    96,
		direction: "horizontal",
        attack:     0.6,
        decay:      0.6,
		accuracy:   1
    };

	let fader = new ProximityEffect(document.querySelectorAll('*.childelement'), params);
	fader.addEffect('rotateY', 180,  0);
	fader.addEffect('translateZ', 40,  0);
	fader.addEffect('scale', 1.01,  1);
};

init();