Overscroll multidirection

Overscroll multidirection javascript

by Abhay Singh

HTML

<script src="https://azoff.github.io/overscroll/js/jquery.min.js"></script>
<script src="https://azoff.github.io/overscroll/js/jquery.overscroll.min.js"></script>
<div id="container"></div>

CSS

body {
  overflow:hidden;
}
#container {
    height: 800px;
    width: 800px;
    position:relative;
}

div.img {
    width: 200px;
    height: 200px;
    position: absolute;
}

div.id0 {
    border: 4px solid red;
    top: 1244px;
    left: 1244px;
}

JavaScript

// Setup constants
var viewportWidth = $(window).width(),
    viewportHeight = $(window).height(),
    arraySize = 11,
    centerPoint = {x:5, y:5};

// This function calculates the distance between two points
function distance(point1, point2) {
    
    // Euclidean Distance:
    return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
    
    // Instead, you could also use the more simple Rectilinear Distance:
    // return Math.abs(point1.x - point2.x) + Math.abs(point1.y - point2.y);
    
    // Or the 'Maximum Metric' (Chebyshev) Distance:
    // return Math.max(Math.abs(point1.x - point2.x), Math.abs(point1.y - point2.y));
    
}

// Create array containing points with distance values
var pointsWithDistances = [];
for (var i=0; i<arraySize; i++) {
    for (var j=0; j<arraySize; j++) {
        var point = {x:i, y:j};
        point.distance = distance(centerPoint, point);
        pointsWithDistances.push(point);
    }
}

// Sort points by distance
pointsWithDistances.sort(function(point1, point2) {
    return point1.distance == point2.distance ? 0 : point1.distance < point2.distance ? -1 : 1;
});

// Create output "graphics"
var tileSize = 250;
var borderSize = 4;
var containerContent = "";
var maxDistance = distance(centerPoint, {x:0, y:0});
for (var l=0; l<pointsWithDistances.length; l++) {
    var point = pointsWithDistances[l];
    var colorValue = parseInt(point.distance / maxDistance * 255, 10);
    if (colorValue != 0) {borderSize = 0};
    containerContent += '<div class="img id'+colorValue+'" style="background-color:rgb('+colorValue +',10,100); left:'+((point.x*tileSize)-borderSize)+'px; top:'+((point.y*tileSize)-borderSize)+'px"></div>';
}

document.getElementById('container').innerHTML = containerContent;


    var container = $("#container");
    container.css('width', viewportWidth);
    container.css('height', viewportHeight);    
    container.overscroll();

// Center first box in viewport
    var gear =...