Use the mouse wheel to zoom

I really like this demo, but I'd like to do it with text. I can envision the size of the window getting larger and smaller along with the size of the font. If the font becomes too small, then the window should display an H1 over it with some sort of descriptor, like "Accounts Receivable".

Can that be done? The demo is changing the pictures dimensions, but what I'm thinking of would be to change the size of the div along with the font size.

Coupled with that would be a drag and drop feature, allowing the user to create their own "desktop".

I guess the short answer is "yes, anything's possible". Here's what I've go tso far:

myDiv = document.getElementById('myDiv')

if (myDiv.addEventListener) {
        // IE9, Chrome, Safari, Opera
        myDiv.addEventListener("mousewheel", MouseWheelHandler, false)
        // Firefox
        myDiv.addEventListener("DOMMouseScroll", MouseWheelHandler, false)
} else {
        // IE 6/7/8
        myDiv.attachEvent("onmousewheel", MouseWheelHandler)
}


myDiv.addEventListener("mousewheel", MouseWheelHandler, false)
var fontSize = 20

function MouseWheelHandler(myEvent) {
var e = window.event || myEvent // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))
$('#myDiv').children().each(function(index, element) {
        fontSize += delta
        this.style.fontSize = fontSize
});
}

#myDiv {
        border:1px solid #000;
        width:500px;
        border-radius:20px;
}

<div id="myDiv">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
</div>
<script src="http://ift.tt/1oMJErh"></script>