Full Screen website Zoom using css-transform scale and jQuery
By North Street, A Creative Studio
If the design calls for “zooming” in to the width of the browser, with everything scaling up proportionally, text & images included, then this bit of code is for you!
Check out the codepen example here.
I call it, nsZoomZoom.
Match the body width, let’s say 1000px in this example, to the PSD design and essentially code the site like it’s 1999, as a fixed width layout. Then, with a little sprinkle of jQuery, when the browser window is increased to a size larger than 1000px, you’ll adjust the css transform scale function to “zoom” into the site.
For sizes lower than 1000px, you’ll just use regular media queries. This method should be compatible down to IE9 (but worst case, the design just maxes out to 1000px then.)
With the time you saved, go have a Gallus.
<html>
<body>
<header>
<h1>Some Big Feature headline</h1>
</header>
<div>
<h2>More stuff</h2>
<img src="http://placekitten.com/g/600/400">
</div>
<div>
<h2>Another Box</h2>
<img src="http://placekitten.com/g/400/400">
</div>
</body>
</html>
html, body {
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
width: 1000px;
}
img {
width: 100%;
}
header {
width: 100%;
background-color: pink;
}
div {
float: left;
width: 60%;
background-color:green;
}
div+div {
width: 40%;
background-color: teal;
}
header h1, div h2 {
padding: 12px;
}
body {
background-color:lightblue;
-ms-transform:scale(1); // Req for IE9
transform:scale(1);
}
jQuery(document).ready(function($){
nsZoomZoom();
$( window ).resize(function() {
nsZoomZoom();
});
function nsZoomZoom() {
htmlWidth = $('html').innerWidth();
bodyWidth = 1000;
if (htmlWidth < bodyWidth)
scale = 1
else {
scale = htmlWidth / bodyWidth;
}
// Req for IE9
$("body").css('-ms-transform', 'scale(' + scale + ')');
$("body").css('transform', 'scale(' + scale + ')');
}
});
About north street
We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.
