Resizilla v3

Resize window event with debounce https://github.com/julienetie/resizilla

by Julien Etienne

HTML

<section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <section id='yellow'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      ...

CSS

body,
    html {
        margin: 0;
        padding: 0;
        background-color: #333;
        display: block;
    }
    
    body {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
    }
    
    div {
        border-radius: 50%;
        box-sizing: border-box;
        width: 12.5%;
        height: 12.5%;
        position: relative;
        float: left;
    }
    
    section {
        position: absolute;
    }
    
    section:nth-child(1) {
        height: 100%;
        width: 100%;
        z-index: 1;
    }
    
    section:nth-child(2) {
        width: 500px;
        height: 500px;
        z-index: 2;
    }
    
    section:nth-child(3) {
        width: 250px;
        height: 250px;
        z-index: 3;
    }
    
    section:nth-child(1) div {
        border: 2px dashed rgb(0, 255, 255);
    }
    
    section:nth-child(2) div {
        border: 2px dashed rgb(255, 255, 0);
    }
    
    section:nth-child(3) div {
        border: 2px dashed rgb(255, 80, 0);
    }
    
    span {
        width: 300px;
        height: auto;
        background: rgba(255, 0, 0, 0.5);
        top: 33%;
        left: 33%;
        z-index: 3;
        position: absolute;
        font-size: 3em;
        font-family: sans-serif;
        color: rgb(255, 100, 255);
        text-align: center;
        padding: 0.5em 0.2em;
        border-radius: 0.7em;
    }

JavaScript

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.resizilla = factory());
}(this, (function () { 'use strict';

/**
 * request-frame-modern - Optimal requestAnimationFrame & cancelAnimationFrame polyfill for modern development
 * @version v2.0.3
 * @license MIT
 * Copyright Julien Etienne 2015 All Rights Reserved.
 */
// Initial time of the timing lapse.
var previousTime = 0;

/**
 * Native clearTimeout function for IE-9 cancelAnimationFrame
 * @return {Function}
 */
var clearTimeoutWithId = function clearTimeoutWithId(id) {
    window.clearTimeout(id);
    id = null;
};

/**
 * IE-9 Polyfill for requestAnimationFrame
 * @callback {Number} Timestamp.
 * @return {Function} setTimeout Function.
 */
function setTimeoutWithTimestamp(callback) {
    var immediateTime = Date.now();
    var lapsedTime = Math.max(previousTime + 16, immediateTime);
    return setTimeout(function () {
        callback(previousTime = lapsedTime);
    }, lapsedTime - immediateTime);
}

// Request and cancel functions for IE9+ & modern mobile browsers. 
var requestFrameFn = window.requestAnimationFrame || setTimeoutWithTimestamp;
var cancelFrameFn = window.cancelAnimationFrame || clearTimeoutWithId;

/**
 * Set the requestAnimationFrame & cancelAnimationFrame window functions.
 */
var setNativeFn = function setNativeFn(requestFn, cancelFn, winObj) {
    winObj.requestAnimationFrame = requestFn;
    winObj.cancelAnimationFrame = cancelFn;
};

/**
 *  volve - Tiny, Performant Debounce and Throttle Functions,
 *     License:  MIT
 *      Copyright Julien Etienne 2016 All Rights Reserved.
 *        github:  https://github.com/julienetie/volve
 *‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
 */

/**
 * Date.now polyfill.
 * {@link https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now}
 */
if...