JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="page-wrap">
    <div class="bg-layers">
        <div class="bg-layer" style="background-image: url(http://i.imgur.com/1ORnSj4.png); background-position: top center;"></div>
        <div class="bg-layer" style="background-image: url(http://i.imgur.com/6jYnCO5.png); background-position: top center;"></div>
        <div class="bg-layer" style="background-image: url(http://i.imgur.com/dIz2oJc.png); background-position: bottom center;"></div>
        <div class="bg-layer" style="background-image: url(http://i.imgur.com/arqt6lX.png); background-position: bottom center;"></div>
        <canvas id="snow-canvas"></canvas>
    </div>
    <div class="dazzle-wrap" data-dazzle>
         <h2 class="title gold-text flare-text">Example Title</h2>

        <p>Praesent congue erat at massa. Morbi mattis ullamcorper velit. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Nullam sagittis. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.</p>
        <p>Aenean massa. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nunc nonummy metus. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce ac felis sit amet ligula pharetra condimentum.</p>
        <p>Nulla sit amet est. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Nulla consequat massa quis enim. Ut tincidunt tincidunt erat. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
    </div>
    <div class="dazzle-wrap" data-dazzle data-reverse>
         <h2 class="title gold-text">Proin pretium leo ac ut neque</h2>

        <p>Aenean massa. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nunc nonummy metus. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce ac felis sit amet ligula pharetra condimentum.</p>
        <p>Nulla sit...

SCSS

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
html,
body{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}
body{
    background-color: #191e49;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
}
* {
    box-sizing: border-box;
}
p {
    margin: 0 0 15px 0;
}
p:last-of-type {
    margin-bottom: 0;
}
.clearfix:before{
    content: '';
    zoom: 1;
}
.clearfix{
    clear: both;
}
.clearfix:after{
    content: '';
    clear: both;
    display: table;
}
.page-wrap{
    overflow: hidden;
    padding: 10px;
}
#snow-canvas{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.bg-layers{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}
.bg-layer{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center center;
    z-index: -1;
    animation-name: bgLayer;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
}
.bg-layer:nth-child(1){
    animation-duration: 5000ms;
    animation-delay: 500ms;
}
.bg-layer:nth-child(2){
    animation-duration: 4000ms;
    animation-delay: 1500ms;
}
.bg-layer:nth-child(3){
    animation-duration: 4300ms;
    animation-delay: 0ms;
}
.bg-layer:nth-child(4){
    animation-duration: 3500ms;
    animation-delay: 2000ms;
}

@keyframes bgLayer{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.25;
    }
    100%{
        opacity: 1;
    }
}


.dazzle-wrap {
    width: 46%;
    margin: 2%;
    float: left;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
[data-dazzle] {
    position: relative;
    padding: 30px;
}
[data-dazzle] span.d-bulb {
    position:...

JavaScript

/**
 * MM BACKGROUND
 */

var snowBackground = {
    W: window.innerWidth,
    H: window.innerHeight,
    mp: 25,
    particles: [],
    ctx: null,
    pushOffsetX: 0.3,
    defaultSpeedY: -1,
    yCont: false,
    init: function (e) {
        snowBackground.speedY = snowBackground.defaultSpeedY;
        canvas = document.getElementById(e);
        snowBackground.ctx = canvas.getContext("2d");
        canvas.width = snowBackground.W;
        canvas.height = snowBackground.H;
        for (var i = 0; i < snowBackground.mp; i++) {
            var xtmp = Math.random() * snowBackground.W;
            var rtmp = Math.random() * 4 + 1;
            snowBackground.particles.push({
                ox: xtmp, //original x-coordinate
                x: xtmp, //x-coordinate
                y: Math.random() * snowBackground.H, //y-coordinate
                //y: Math.random() * snowBackground.H + snowBackground.H, //y-coordinate
                r: rtmp, //radius
                d: rtmp //density
            });
        }
        /*
        window.addEventListener('mousemove', function (e) {
            snowBackground.pushOffsetX = e.offsetX / snowBackground.W;
        });
        */
        window.addEventListener('resize', function (e) {
            snowBackground.W = window.innerWidth;
            snowBackground.H = window.innerHeight;
            canvas.height = snowBackground.H;
            canvas.width = snowBackground.W;
        });
        var loopSnow = window.setInterval(snowBackground.draw, 33);
    },
    draw: function () {
        snowBackground.ctx.clearRect(0, 0, snowBackground.W, snowBackground.H);
        snowBackground.ctx.fillStyle = "rgba(255, 255, 255, 0.03)";
        snowBackground.ctx.shadowBlur = 5;
        snowBackground.ctx.shadowColor = "#ffffff";
        snowBackground.ctx.shadowOffsetX = 0;
        snowBackground.ctx.shadowOffsetY = 0;
        snowBackground.ctx.beginPath();
        for (var i = 0; i < snowBackground.mp; i++) {
            var p =...