JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<div id="mainbg"></div>
<div id="whiteDiv1"></div>
<div id="whiteDiv2"></div>
<div id="test1"></div>
<div id="test2"></div>

CSS

#mainbg {
    background-image: url('http://4.bp.blogspot.com/-eJ_9QXvwPOo/TqywbgMFGpI/AAAAAAAABZ4/5W8kNb1QTnI/s1600/1+-+Sam+saves+Lenore+-+s2.jpg');
    width: 800px;
    height: 500px;
    background-size: 100%;
    position: absolute;
    z-index: 200;
}
#test1, #test2 {
    z-index: 300;
    position: absolute;
    width: 800px;
    height: 500px;
    background-color: rgba(0,0,0,0.1);
    -webkit-mask-image: -webkit-radial-gradient(50% 50%, 100px 100px, rgba(255,255,255,0) 57%, rgba(10,8,9,1) 74%); /* Chrome10+,Safari5.1+ */
}

#whiteDiv1, #whiteDiv2 {
    z-index: 400;
    width: 800px;
    height: 500px;
    position: absolute;
    background-color: rgba(255,255,255,0.1);
    -webkit-mask-image: -webkit-radial-gradient(center, 100px 100px, rgba(0,0,0,1) 0%,rgba(0,0,0,0.4) 85%,rgba(0,0,0,1) 96%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
}

JavaScript

var time = 300;
setInterval(function(){
    var num = Math.random() * 50 - 25;
    var num2 = Math.random() * 50 - 25;
    var num3 = Math.random() * 50 - 25;
    var num4 = Math.random() * 50 - 25;
    $("#test1").animate({
        "-webkit-mask-position-x" : "+=" + num,
        "-webkit-mask-position-y" : "+=" + num2
    },  time, "linear");
    $("#test2").animate({
        "-webkit-mask-position-x" : "+=" + num3,
        "-webkit-mask-position-y" : "+=" + num4
    }, time, "linear");
    $("#whiteDiv1").animate({
        "-webkit-mask-position-x" : "+=" + num,
        "-webkit-mask-position-y" : "+=" + num2
    },  time, "linear");
    $("#whiteDiv2").animate({
        "-webkit-mask-position-x" : "+=" + num3,
        "-webkit-mask-position-y" : "+=" + num4
    }, time, "linear");
}, time);