dCam - Dynamic Hype Camera using Hype 3.5 features v1

Using JavaScript with Hype
11

Hello Everybody,

even though people haven’t been commenting much this is a great project and I updated the code a bit.

v1.1

  • Fixed the selection scopes to only focus on the current document and stage when selecting elements
  • Fixed the requestAnimationFrame to cancel when the scene is changed
  • Streamlined the query process with querySelector and more efficient scene selector

// Dcam by Lucky || LuckyDe.com || v1.0 
// modified by Max Ziebell  || v1.1

var gP = hypeDocument.getElementProperty,
	hD = hypeDocument,
	stage = hD.getElementById(hD.documentId()),
	cam = stage.querySelector(".dCam"),
	scene = stage.querySelector('#'+hD.documentId()+' > .HYPE_scene[style*="block"]'),
	stageW = gP(scene, 'width'),
	stageH = gP(scene, 'height'),
	camMatrix, scaleW, scaleH, originX, originY, translateX, translateY, angle, camL, camT, camH, camW, camsX, camsY, realW, realH, realL, realT, rAF;
	cam.style.visibility = 'hidden';
	cam.style.zIndex = scene.style.zIndex;

function setupCam() {
	rAF = requestAnimationFrame(setupCam);
	camMatrix = new WebKitCSSMatrix(window.getComputedStyle(cam).webkitTransform)
	camL = gP(cam, 'left');
	camT = gP(cam, 'top');
	camH = gP(cam, 'height');
	camW = gP(cam, 'width');
	camsX = gP(cam, 'scaleX');
	camsY = gP(cam, 'scaleY');
	angle = -Math.atan2(camMatrix.b, camMatrix.a) * (180 / Math.PI);
	realW = camW * camsX;
	realH = camH * camsY;
	realL = (camL - (realW - camW) / 2);
	realT = (camT - (realH - camH) / 2);
	originX = (realL + (realW / 2));
	originY = (realT + (realH / 2));
	translateX = (originX - (stageW / 2)) * -1;
	translateY = (originY - (stageH / 2)) * -1;
	scaleW = stageW / realW;
	scaleH = stageH / realH;
	scene.style.transformOrigin = scene.style.WebkitTransformOrigin = originX + "px " + originY + "px";
	scene.style.webkitTransform = scene.style.transform = "translateX(" + translateX + "px) translateY(" + translateY + "px) scaleX(" + scaleW + ") scaleY(" + scaleH + ") rotateZ(" + (angle) + "deg)";
	scene.style.webkitFilter = cam.style.webkitFilter;
	scene.style.opacity = cam.style.opacity;
	if (scene != stage.querySelector('#'+hD.documentId()+' > .HYPE_scene[style*="block"]')) {
        cancelAnimationFrame(rAF);
    }
}
setupCam();

Nice work @Luckyde

7 Likes