Exobrain BG

by mifeng

HTML

<body>
    <div id="node-container" style="width:4000px;height:4000px" class="rest">
        <div class="node root" style="top:2020px;left:1460px">
            <p>Find the Words</p>
        </div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #f0f0f0;
    position:relative
}

.rest {
        cursor: url(https://www.exobrain.co/assets/handOpen-b335c101a62d18667a22a5f35d6a22d2.cur),default;   
}

.handling {
        cursor: url(https://www.exobrain.co/assets/handClosed-f6132751d79ac798e2d9bb70e88b26f8.cur),default;   
}

#node-container {
    border: 5px solid green;
    margin: 0;
    padding: 0;

    background: url(https://www.exobrain.co/assets/bg-02fa491a5dceb27227abdf1aec982205.png) #FBF9F0
}

.node {
    /* width: 100%;*/
    position: absolute;
    background: orange;
    color: #fff;
    padding: 10px;
    
    /* no text select */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.node-special {
    background: yellow;   
    color: #999;
}

JavaScript

$(function() {
    
    var mouseX, mouseY;
    
    var container = $('#node-container'),
        $window = $(window),
        scrollTo = $('.root');
    
    var i = 351, left = 100, top = 100,
        rand = Math.floor((Math.random()*80)+2);
    
    console.log(rand);
    
    while (i--) {
        var dddiv = $("<div>").css({
            "top": ((i % 30 === 0) ? (top += 300) : top),
            "left": ((i % 30 === 0) ? (left = 200) : (left += 150))
        }).addClass("node");
        
        if (i === rand)
            dddiv.addClass("node-special").html("<p>I LOVE YOU</p>");
        else
            dddiv.html("<p>" + i + "</p>")
        
        dddiv.appendTo(container);
    }
    
    var offset = scrollTo.offset(),
        widthOffset = ($window.width() - scrollTo.width()) / 2,
        heightOffset = ($window.height() - scrollTo.height()) / 2;
    
    console.log(offset);
    console.log(widthOffset);
    console.log(heightOffset);
    
    var conX = offset.left - widthOffset, conY = offset.top - heightOffset;
    
    window.scrollTo(offset.left - widthOffset, offset.top - heightOffset);
    
    container.mouseup(function() {
        container.off("mousemove"); 
        container.removeClass("handling");
        container.addClass("rest");
    });
    
    container.mouseout(function() {
        container.off("mousemove"); 
        container.removeClass("handling");
        container.addClass("rest");
    });
    
    container.mousedown(function(e) {
        
        container.removeClass("rest");
        container.addClass("handling");
        
        mouseX = e.pageX;
        mouseY = e.pageY;
        
        console.log("CON: " + conX + "," + conY);
        console.log("DOWN: " + mouseX + "," + mouseY);
        
        container.mousemove(function(e) {
            //console.log("INNER-DOWN: " + mouseX + "," + mouseY);
            
            offsetX = e.pageX - mouseX;
            offsetY = e.pageY - mouseY;
            
           ...