JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://raw.githubusercontent.com/philipwalton/polyfill/master/dist/polyfill.min.js"></script>
<script src="https://raw.githubusercontent.com/philipwalton/polyfill/master/demos/position-sticky/polyfill.position-sticky.js"></script>
<div class="container landing"> <a id="logo" href="http://leapcraft.dk">leapcraft</a>

    <p>We are a <em>Digital Transformation</em> company
        <br>working with <em>Big Data technologies</em> and the <em>Internet of Things</em>.
        <br>We craft beautiful experiments and deploy systems at scale.</p>
    <canvas id="c"></canvas>
</div>
<nav>
    <ul>
        <li>Platforms</li>
        <li>Solutions</li>
        <li>Cases</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>
<div class="container">Foo</div>
<div class="container">Bar</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    position: relative;
}
body {
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
}
canvas {
    position: fixed;
    z-index: 1 !important;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
canvas, .container {
    height: 100vh;
    margin: 0;
    padding: 0;
}
nav {
    height: 40px;
    line-height: 40px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    text-transform: uppercase;
}
nav ul li {
    display: inline-block;
    color: white;
    font-weight: 200;
    cursor: pointer;
    margin: 0 5px;
    font-family: Zetta Sans;
}
#logo {
    display: block;
    position: relative;
    top: 10px;
    left: 15px;
    height: 46px;
    width: 200px;
    text-indent: -9999px;
    background:...

JavaScript

if (!Array.prototype.fill) {
    Array.prototype.fill = function (value) {

        // Steps 1-2.
        if (this == null) {
            throw new TypeError('this is null or not defined');
        }

        var O = Object(this);

        // Steps 3-5.
        var len = O.length >>> 0;

        // Steps 6-7.
        var start = arguments[1];
        var relativeStart = start >> 0;

        // Step 8.
        var k = relativeStart < 0 ? Math.max(len + relativeStart, 0) : Math.min(relativeStart, len);

        // Steps 9-10.
        var end = arguments[2];
        var relativeEnd = end === undefined ? len : end >> 0;

        // Step 11.
        var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len);

        // Step 12.
        while (k < final) {
            O[k] = value;
            k++;
        }

        // Step 13.
        return O;
    };
}



function Wave(canvas, nCircles, nLines) {
    this.canvas = canvas;
    if (this.canvas) {
        this.setDimensions(window.innerWidth, window.innerHeight);
        this.context = this.canvas.getContext("2d");
        this.context.setTransform(1, 0, 0, 1, 0, 0);
    }
    this.circles = this.generate(nCircles || 4, nLines || 7);
    this.draw();
}

Wave.prototype = {
    setDimensions: function (width, height) {
        this.height = height;
        this.width = width;
    },
    generate: function (nCircles, nLines) {
        // needs to be power of two plus one, which we get because we use 0..size inclusive
        var size = 2 << nLines;
        var circles = [];
        // generate n circles
        for (var i = 0; i < nCircles; i++) {
            var points = [];
            // fill each circle with random walk - try to keep it inside 0..1 to avoid cropping
            var min, max;
            min = max = points[0] = points[size] = Math.random();
            for (var j = size / 2; j >= 1; j = j / 2) {
                for (var k = j; k < size; k += 2 * j) {
                   ...