Zoom into div on page load with javascript

Question

Bit of a strange issue but I couldn't find anything about this on Google. I have a scene I'd like to zoom into when the page loads.

Imagine the below image is 100% window width on page load, then after a delay the window zooms in so the monitor in the scene is 100% of the browser window. and the iframe is what you now see.

Does this make sense?

I'm unsure of the best way to do this, I tried to use transform property with scale but I've had no luck and I'm unsure how this would render the iframe? would the contents also scale?

http://jsfiddle.net/LLmaP/1/

Answer 1

you should do something like this:

http://jsfiddle.net/LLmaP/18/

$('.monitor').load(function() {
   setTimeout(function() {
       $('.page').addClass('fullscreen');
}, 1000);
});

but you have to set your cubic-bezier to make the background-size and the iframe height agree. this website can help you

http://cubic-bezier.com/