JSFiddle - React, Tailwind, and code Playground

by Couto

HTML

<script src="http://yourjavascript.com/71114111071/jquery.mousewheel.min.js"></script>
<div class="container">
    <div class="wrapper">
        <div class="content" id="one"></div>
        <div class="content" id="two"></div>
        <div class="content" id="three"></div>
        <div class="content" id="four"></div>
        <div class="content" id="five"></div>
        <div class="content" id="six"></div>
        <div class="content" id="seven"></div>
        <div class="content" id="eight"></div>
        <div class="content" id="nine"></div>
    </div>
</div>

CSS

.container{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
}

.wrapper{
    width: 1200px;
    height: 1200px;
}

.content{
    width: 400px;
    height: 400px;
    background-color: #eee;
    float: left;
}

#one {
    background-color: #444;
    background-image: url("http://www.cornify.com/pics/preview/8ud47.jpg")
}


#two {
    background-color: #555;
    background-image: url("http://www.cornify.com/pics/preview/22450Unicorn1.jpg")
}

#three{
    background-color: #666;
    background-image: url("http://www.cornify.com/pics/preview/unicorn3.jpg")
}

#four{
    background-color: #777;
    background-image: url("http://www.cornify.com/pics/preview/unicorn-puzzle-7032271.jpg")
}

#five{
    background-color: #888;
    background-image: url("http://www.cornify.com/pics/preview/unicorn-wall3.jpg");
}

#six {
    background-color: #999;
    background-image: url("http://www.cornify.com/pics/preview/unicorn15.jpg");
}

#seven {
    background-color: #aaa;
    background-image: url("http://www.cornify.com/pics/preview/unicorn31.jpg")
}

#eight{
    background-color: #bbb;
    background-image: url('http://www.cornify.com/pics/preview/unicorn1024.png');
}

#nine {
    background-color: #ccc;
    background-image: url('http://www.cornify.com/pics/preview/Unicorn_1280.jpg')
}

JavaScript

$(document).ready(function() {
    var $wrapper = $('.wrapper');
    $wrapper.draggable();

    $wrapper.mousewheel(function(evt) {
        if (evt.wheelDelta > 0) {
            $wrapper.css({
                'zoom': $wrapper.css('zoom') * 0.5
            });
        } else {
            $wrapper.css({
                'zoom': $wrapper.css('zoom') / 0.5
            });
        } 
    })

});