scaling elements to make them fit the screen (by @fmate14)
This commit is contained in:
@@ -141,6 +141,19 @@
|
|||||||
document.head.appendChild(meta);
|
document.head.appendChild(meta);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// configuration object
|
||||||
|
// probably will get extended (and configurable) later
|
||||||
|
var config = {
|
||||||
|
width: 1024,
|
||||||
|
height: 768
|
||||||
|
}
|
||||||
|
|
||||||
|
// computing scale of the window
|
||||||
|
var hScale = window.innerHeight / config.height;
|
||||||
|
var wScale = window.innerWidth / config.width;
|
||||||
|
var windowScale = hScale > wScale ? wScale : hScale;
|
||||||
|
|
||||||
|
|
||||||
var canvas = document.createElement("div");
|
var canvas = document.createElement("div");
|
||||||
canvas.className = "canvas";
|
canvas.className = "canvas";
|
||||||
|
|
||||||
@@ -285,8 +298,8 @@
|
|||||||
css(root, {
|
css(root, {
|
||||||
// to keep the perspective look similar for different scales
|
// to keep the perspective look similar for different scales
|
||||||
// we need to 'scale' the perspective, too
|
// we need to 'scale' the perspective, too
|
||||||
perspective: step.scale * 1000 + "px",
|
perspective: step.scale * (1/windowScale) * 1000 + "px",
|
||||||
transform: scale(target.scale),
|
transform: scale(target.scale * windowScale),
|
||||||
transitionDuration: duration,
|
transitionDuration: duration,
|
||||||
transitionDelay: (zoomin ? "500ms" : "0ms")
|
transitionDelay: (zoomin ? "500ms" : "0ms")
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user